/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

/* #Page Styles
================================================== */
/* #Activity Styles
================================================== */


/* Common Page Styles
================================================== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, input, textarea,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

/* selection */
::selection {
	background: #fff;
	color: #531900;
}
::-moz-selection {
	background: #fff;
	color: #531900;
}
html, body {
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: 100%;
}

/* --------------------------------
	separate rules to keep FF happy
	-------------------------------- */
	html {
		
		

	}

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


	#wrapper{
		min-height:100%;
		position:relative;
	}

	#content{
		padding-bottom:224px;   /* Height of the footer element */
	}

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


	}


	#container{
		margin:0;
		padding:0;
		position:absolute !important;
		display: none;
	}




	

	#subheader {
		background-color:#e2a853;
		/*background-color:#efce41;
		background-color:#dfc452;
		background-color:#a8c656;
		background-color:#90af3d;
		background-color:#849e64;
		background-color:#82b8aa;
		background-color:#5a8b7f;
		background-color:#357061;*/
		

		height:50px;
		padding-bottom:5px;
		margin-bottom:0px;
		box-shadow:0px 2px 4px rgba(0,0,0,.5);
		text-align:left; 
		color:#FFF; 
		line-height:50px; 
		z-index:99;

	
		/*background: url(../images/header.jpg) no-repeat 0px;*/
}

#subheader h2 {
	height:50px; 
	text-align:left; 
	color:#FFF; 
	line-height:50px; 
	z-index:99; 
	font-weight: bold; 
		}










h1{
	line-height: 35px;
	margin-bottom: 0px;
}

#title {
	
	color: #fff;
}



	/* Start
	================================================== */

	.html-start{
		
		
	}
	.body-start {
		
		/*background:url(../images/clouds-scatter.png)5px 300px repeat-x;*/
		
	}
	
	#introductionText{
		color:#fff;
		padding:10px;
		background-color:#e2a853;
		/*background-color:#efce41;
		background-color:#dfc452;
		background-color:#a8c656;
		background-color:#90af3d;
		background-color:#849e64;
		background-color:#82b8aa;
		background-color:#5a8b7f;
		background-color:#357061;*/
	}
	

	
	/* Activity
	================================================== */

	.html-activity{

	}

	.body-activity {
		/*background:url(../images/clouds-scatter.png)5px 300px repeat-x;*/
		
	}
	#activityInfo{
		
		
		padding:0;
		top:0;
	}
	
	#timeNumbers {
		font-family: Courier, monospace;
		color: #fff;
		font-size:21px;
		margin-top: 10px;
	}

	#timeCounter h5 {
		color:#fff;
	}

	#timeCounter, #currentQuestionDisplay {
		padding:5px;
		color: #ffffff;
		background-color:#555460;
		height:55px; 
		width: 100%;  
		position:relative;
		
	}



	/*#timeCounter:after,*/
	#timeCounter:before,
	/*#currentQuestionDisplay:after,*/
	#currentQuestionDisplay:before
	{
		/*border-top: 15px solid #555460 ;
		content: '';
		height: 0;
		position: absolute;
		top: 100%;
		width: 0;*/
	}
	/*#timeCounter:after,
	#currentQuestionDisplay:after
	{
		border-left: 65px solid transparent;
		right: 0px;
	}*/
	#timeCounter:before,
	#currentQuestionDisplay:before {
		border-right: 65px solid transparent;
		left: 0px;
	}


	#startButton{
		margin-top:60px;
	}

	#restartButton{
		margin-top: 60px;
	}

	#activityArea {
		padding-top: 60px;
		padding-bottom: 60px;
	}


	#question {
		font-family:'Open Sans';
		background-color: #e2a853;
		/*background-color:#efce41;
		background-color:#dfc452;
		background-color:#a8c656;
		background-color:#90af3d;
		background-color:#849e64;
		background-color:#82b8aa;
		background-color:#5a8b7f;
		background-color:#357061;*/
		color: #fff;
		padding-top: 10px;
		padding-bottom: 10px;
		width: 600px;
		padding-right: 10px;
		padding-left: 10px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
	}

	

	input[type="checkbox"] {
   		display: none;
   		
   		
   		
	}
	input[type=checkbox].activityCheckbox + label.css-label {
		
		background-position: 0 0px;
		background-repeat: no-repeat;
		cursor: pointer;
		height: 40px;
		padding-top: 10px
		


	}



	input[type=checkbox].activityCheckbox:checked + label.css-label {
		background-position: 0 -50px;
		background-repeat: no-repeat;

	}

	input[type=checkbox].activityCheckbox:disabled + label.css-label {
		background-position: 0 -80px;
		background-repeat: no-repeat;
		cursor: pointer;
		margin-bottom: 10px;
		margin-top: 20px;
	}

	label.css-label {
		background-image:url(../css/images/checkbox1.fw.png);
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		background-repeat: no-repeat;
		margin-bottom: 10px;
		margin-top: 10px;
		font-family:'Open Sans';
		font-size: 22px;

	}


	
	
	/* Results
	================================================== */

	#resultsText{
	color:#fff;
	padding:10px;
	background-color:#00B2AD;
	font-size:inherit;
}

	.html-results{
		
		
	}
	.body-results {
		/*background:url(../images/clouds-scatter.png)5px 300px repeat-x ;*/
	}


	#resultsArea {	
		color: #fff;
		position:relative;
		
	}

	.correct{
		font-weight:bold;
		color:#FFF;
		/*background-image:url(../images/tick.gif);*/
		
		background-repeat: no-repeat;
		/*background-position: 90% center;*/
		background-color:#44ae79;
	}

.incorrect{
		font-weight:bold;
		color:#FFF;
		/*background-image:url(../images/tick.gif);*/
		
		background-repeat: no-repeat;
		/*background-position: 90% center;*/
		background-color:#e9545f;
	}
	

	




/* #Media Queries
================================================== */

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {

}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	
	
	

}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
	
	
		/* Common Page Styles
		================================================== */
		

		#subheader {
			background-color:#a8c656;
			/*background-color:#efce41;
		background-color:#dfc452;
		background-color:#a8c656;
		background-color:#90af3d;
		background-color:#849e64;
		background-color:#82b8aa;
		background-color:#5a8b7f;
		background-color:#357061;*/
			height:40px;
			padding-bottom:0px;
	
		
}

#subheader h2{
	font-size:20px;
}



/* Start
================================================== */

#introductionText{
	color:#fff;
	padding:10px;
	background-color:#a8c656;
	/*background-color:#efce41;
		background-color:#dfc452;
		background-color:#a8c656;
		background-color:#90af3d;
		background-color:#849e64;
		background-color:#82b8aa;
		background-color:#5a8b7f;
		background-color:#357061;*/
	font-size:inherit;
}

/* Activity
================================================== */
#timeCounter, #currentQuestionDisplay {
	color: #ffffff;
	background-color: #555460 ;
	height:100%;
	top:60px;
	padding:0px;
	
}

#currentQuestionDisplay {
	
	top:80px;
	
}

#timeCounter:after,
#timeCounter:before,
#currentQuestionDisplay:after,
#currentQuestionDisplay:before
{
	border-top: 0;    
	height: 0;    
	top: 100%;
	width: 0;
	
}



#questionArea{
	
	position:relative;
	top:150px;
}

#activityArea{
	z-index:0;
}

.dna img{
float:left; margin:0; width:33%;color: red;


}
.dna2 img{
float:right; margin:0; width:33%;




}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	body {
		background:none;
	}

	.body-start {
		background:none;
		
	}

	.body-activity {
		background:none;
		
	}
	
	.body-results {
		background:none;
		
	}
	
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
	
	#subheader{
		height:45px;
		
	}
	#title{
		line-height:22px;
	}

	body {
		background:none;
	}

	.body-start {
		background:none;
		
	}

	.body-activity {
		background:none;
		
	}
	
	.body-results {
		background:none;
		
	}
	
	
	
}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/