@charset "utf-8";
/* CSS Document */


body {
	background:url(../images/background.JPG) top center;
	font-family:'Open Sans',sans-serif; font-size:100%;
	}

.btnOff{
	opacity:.5;
}

#headerCont{height:50px; background-color:#90af3D; box-shadow:0px 2px 4px rgba(0,0,0,.5); }

#header h2 {height:50px; text-align:left; color:#FFF; line-height:50px; z-index:99;}

#info{
	position:absolute;
	display:none;
	width:100%;
	left:0;
	background-color:#FFF;
	text-align:left;
	margin:0 auto;
	
	padding:4%;
	z-index:9999;
	box-shadow:0px 2px 4px #000;

}

#info ul li {margin-left:4%}


#controls{
	float:right;
	position:absolute;
	right:30px;
	top:5px;}

.controlBtn{
	display:inline-block;
	cursor:pointer;
	background-color:#FFF;
	background-position:top left;
	background-size:25px 25px;
	width:25px;
	height:25px;}


.controlBtn:hover{
	background-color:#222;
}





.btn {	

	width:220px; 
	height:80px;
	background-color:#e2a853;
	padding:12px auto;
	line-height:80px;
	color:#FFF;
	text-align:center;
	font-weight:bold;
	cursor:pointer;
}
/*fix scollbar on page load*/
div.section {
	overflow-y: hidden;

}

#content a {text-decoration:none;}

.btn_main {
	margin:20px;
	line-height:normal;
	padding-top:2%;
	padding-bottom:5%;
	
}
.btn:hover{color:#222; box-shadow:0px 3px 3px #222;}


#footer {
	position:fixed;
	bottom:0; 
	width:100%; 
	background-color:#778691; 
	height:40px;
	color:#FFF; 
	text-align:center; 
	line-height:30px;}



#stage{width:100%; position:relative;}

#stage .asset{position:absolute;}
/*.asset{ width:100%; height:100%;}*/

/************* Sort Statments **************/


/*****************************************/
#buttonHolder {
	text-align:center;
}

#content li {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b8e356), color-stop(1, #a5cc52) );
	background:-moz-linear-gradient( center top, #b8e356 5%, #a5cc52 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b8e356', endColorstr='#a5cc52');
	background-color:#b8e356;
	-webkit-border-top-left-radius:0px;
	-moz-border-radius-topleft:0px;
	border-top-left-radius:0px;
	-webkit-border-top-right-radius:0px;
	-moz-border-radius-topright:0px;
	border-top-right-radius:0px;
	-webkit-border-bottom-right-radius:0px;
	-moz-border-radius-bottomright:0px;
	border-bottom-right-radius:0px;
	-webkit-border-bottom-left-radius:0px;
	-moz-border-radius-bottomleft:0px;
	border-bottom-left-radius:0px;
	text-indent:0;
	border:1px solid #83c41a;
	margin: 1% 0;
	display:inline-block;
	color:#333;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	min-height:50px;
	width:100%;
	text-decoration:none;
	text-align:center;
	
	}
	
#checkAnswerBtn, #closeInfoBtn{
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #aba6ab), color-stop(1, #858385) );
	background:-moz-linear-gradient( center top, #aba6ab 5%, #858385 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#aba6ab', endColorstr='#858385');
	background-color:#aba6ab;
	-webkit-border-top-left-radius:0px;
	-moz-border-radius-topleft:0px;
	border-top-left-radius:0px;
	-webkit-border-top-right-radius:0px;
	-moz-border-radius-topright:0px;
	border-top-right-radius:0px;
	-webkit-border-bottom-right-radius:0px;
	-moz-border-radius-bottomright:0px;
	border-bottom-right-radius:0px;
	-webkit-border-bottom-left-radius:0px;
	-moz-border-radius-bottomleft:0px;
	border-bottom-left-radius:0px;
	text-indent:0;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#0a0a0a;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	height:40px;
	line-height:40px;
	width:100px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #858585;
}
#checkBtn:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #858385), color-stop(1, #aba6ab) );
	background:-moz-linear-gradient( center top, #858385 5%, #aba6ab 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#858385', endColorstr='#aba6ab');
	background-color:#858385;
}
#checkBtn:active {
	position:relative;
	top:1px;
}

#results {
	background-color: #666;
	color: #FFF;
	text-align:left;
	padding: 2%;
	width:100%;
	
}

#marking {
	margin-left: auto;
	margin-right: auto;
	
}


.dragarea {
	min-height: 20em;
	}
	
.dragarea h4 {
	text-align: center;
	}
/************* Flowcharts **************/


/*****************************************/

#DropArea1 {
		width: 25%;
}
#DropArea2 {
		width: 41%;
}


div.section.flowchartActivityarea {
	overflow-y: visible;
	height: 100%;
	padding-bottom: 0;
	 -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	
}


.row {
		/*display: inline-flex;
		display: -webkit-inline-flex;*/
		width: auto;

}
.oftwo {
		padding-left: 50%;
		margin-left: -73px;
		float: left;
}
.offour {
		padding-left: 50%;
		margin-left: -150px;
		float: left;
}
.ofarrows {
		padding-left: 50%;
		margin-left: -100px;
}


.arrow {
	background-image: url('../images/arrow-down.svg');
	height:50px;
	width:30px;
	background-repeat:no-repeat;
	margin:-10px auto;
	
}
.arrowdouble {
	background-image: url('../images/arrow-double.svg');
	height:50px;
	width:95px;
	background-repeat:no-repeat;
	margin:-10px auto;
	
}
.arrowdoubledouble {
	background-image: url('../images/arrow-double.svg');
	height:50px;
	width:218px;
	background-repeat:no-repeat;
	margin:-10px auto;
	float:left;
}


#initialDragArea {
	margin: 0;
	width: 100%;
	
}
#initialDragArea .drag {
	margin: 2px;
	
}



.drag {
	background-color: #A6C949;
	display: inline-block;
	-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align:center;
-webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  font-weight: bold;
  cursor: pointer;

}
.drag.rectangle{
	height: 28px;
	width: 121px;
	
}
.square-large{
	height: 121px;
	width: 121px;
}
.drag.square-small{
	height: 71px;
	width: 71px;

}


.image2 {
	padding-top: 85px;
	background-image: url('../images/drag_mother_cell.png');
}
.image3 {
	padding-top: 85px;
	background-image: url('../images/drag_dna_replicates.png');
}
.image4 {
	background-image: url('../images/drag_chromosome_cell_full.png');
}
.image5 {
	background-image: url('../images/drag_chromosome_cell_half4.png');
}
.image6 {
	background-image: url('../images/drag_chromosome_cell_half.png');
}

.drop {
	background-color: #FFF;
	margin: 10px auto;
	border: 2px dotted #009;
	
}
.drop.rectangle{
	height: 30px;
	width: 121px;
	
}
.drop.square-large{
	height: 121px;
	width: 121px;
}
.drop.square-small{
	height: 71px;
	width: 71px;
	margin-left: 5px;
	margin-right: 5px;
	float:left;

}
.drop.square-small:first-child { 
		margin-left: 0px;
}
.drop.square-small:last-child { 
		margin-right: 0px;
}



/* small screens including iPad ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) {
	#DropArea1 {
		width: 35%;
		padding-left: 0;
		padding-right: 0;
		margin-left: -10%;
		margin-right: -10%;
	}
	#DropArea2 {
		width: 45%;
		padding-left: 0;
		padding-right: 0;
	}
	#DragArea1 {
		float:left;
		width:40%;
	}
	.oftwo {
		padding-left: 50%;
		margin-left: -70px;
		float: left;
}
.offour {
		padding-left: 50%;
		margin-left: -150px;
		float: left;
}
.ofarrows {
		padding-left: 50%;
		margin-left: -100px;
}


	
	.flowchartActivityarea {
		padding:0;
	}
	#content {
		padding:0;
	}
}
@media only screen and (max-width : 768px) {
	#DropArea1 {
		width: 35%;
		padding-left: 0;
		padding-right: 0;
		margin-left: -10%;
		margin-right: -10%;
	}
	#DropArea2 {
		width: 60%;
		padding-left: 0;
		padding-right: 0;
	}
	#DragArea1 {
		width: 25%;
		padding-left: 0;
		padding-right: 0;

	}
	.oftwo {
		padding-left: 50%;
		margin-left: -70px;
		float: left;
}
.offour {
		padding-left: 50%;
		margin-left: -150px;
		float: left;
}
.ofarrows {
		padding-left: 50%;
		margin-left: -100px;
}

.square-large{
	height: 100px;
	width: 100px;
}
.drop.square-large{
	height: 100px;
	width: 100px;
}
.image2 {
	padding-top: 78px;
	background-image: url('../images/drag_mother_cell.png');
	background-position: -11px -11px;
}
.image3 {
	padding-top: 57px;
	background-image: url('../images/drag_dna_replicates.png');
	background-position: -13px -11px;

}



	
	.flowchartActivityarea {
		padding:0;
	}
	#content {
		padding:0;
	}
}