/*
* 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 {
		background: rgba(245,204,233,1);
		background: -moz-linear-gradient(top, rgba(245,204,233,1) 0%, rgba(247,244,239,1) 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(245,204,233,1)), color-stop(100%, rgba(247,244,239,1)));
		background: -webkit-linear-gradient(top, rgba(245,204,233,1) 0%, rgba(247,244,239,1) 100%);
		background: -o-linear-gradient(top, rgba(245,204,233,1) 0%, rgba(247,244,239,1) 100%);
		background: -ms-linear-gradient(top, rgba(245,204,233,1) 0%, rgba(247,244,239,1) 100%);
		background: linear-gradient(to bottom, rgba(245,204,233,1) 0%, rgba(247,244,239,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5cce9', endColorstr='#f7f4ef', GradientType=0 );
		overflow-y: scroll;
		background-repeat: no-repeat;
		background-color:rgba(247,244,239,1);
	}

	body {

		background:url(../../../images/clouds-scatter.png)5px 300px repeat-x;
	}


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

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

	/* footer */
	footer {
		background-image:url(../../../images/footer-p.png);
		width:100%;
		height:224px;
		position:absolute;
		bottom:0;
		left:0;
		z-index:-1;
	}


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




	#navigation {
		background-color:#555460;
		height:50px;
		z-index: 300;
		position: relative
		/*background: url(../images/header.jpg) no-repeat 0px;*/
	}

	#subheader {
		background-color:#00b2ad;
	/*background-color:#E05D2C;
	background-color:#8B8F29;
	background-color:#00b2ad;*/
	height:40px;
	padding-bottom:5px;
	margin-bottom:0px;
	
	/*background: url(../images/header.jpg) no-repeat 0px;*/
}

#subheader h2{
	
	font-size:2em;
	font-family: 'BandaRegularRegular', sans-serif;
	text-align:center;
	padding-bottom:0px;
	margin-bottom:0px

}



.arrow-up {
	margin-left:auto;
	margin-right:auto;
	width:70%;
	width: 0; 
	height: 0; 
	border-left: 40px solid transparent;
	border-right: 40px solid transparent;
	border-bottom: 40px solid #00b2ad;
	
}


.arrow_box {
	position: relative;
	background: #00b2ad;
}
.arrow_box:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-top-color: #00b2ad;
	border-width: 40px;
	margin-left: -40px;
}



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

#title {

	color: #fff;
}

#disableAudioBtn{
	background-color:#F00;
	cursor: pointer;

}

#nextButton {
	display: none;
}

#restartButton {
	display: none;
}



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

	.html-start{
		background: rgba(245,204,233,1);
		background: -moz-linear-gradient(top, rgba(245,204,233,1) 0%, rgba(247,244,239,1) 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(245,204,233,1)), color-stop(100%, rgba(247,244,239,1)));
		background: -webkit-linear-gradient(top, rgba(245,204,233,1) 0%, rgba(247,244,239,1) 100%);
		background: -o-linear-gradient(top, rgba(245,204,233,1) 0%, rgba(247,244,239,1) 100%);
		background: -ms-linear-gradient(top, rgba(245,204,233,1) 0%, rgba(247,244,239,1) 100%);
		background: linear-gradient(to bottom, rgba(245,204,233,1) 0%, rgba(247,244,239,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5cce9', endColorstr='#f7f4ef', GradientType=0 );

		background-repeat: no-repeat;
		background-color:rgba(247,244,239,1);

	}
	.body-start {

		background:url(../../../images/clouds-scatter.png)5px 300px repeat-x;
		
	}

	#introduction {
		display: none;
	}
	
	#introductionText{
		color:#fff;
		padding:10px;
		background-color:#00b2ad;
	}
	

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

	.html-activity{
		background: rgba(250,226,192,1);
		background: -moz-linear-gradient(top, rgba(250,226,192,1) 0%, rgba(247,244,239,1) 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(250,226,192,1)), color-stop(100%, rgba(247,244,239,1)));
		background: -webkit-linear-gradient(top, rgba(250,226,192,1) 0%, rgba(247,244,239,1) 100%);
		background: -o-linear-gradient(top, rgba(250,226,192,1) 0%, rgba(247,244,239,1) 100%);
		background: -ms-linear-gradient(top, rgba(250,226,192,1) 0%, rgba(247,244,239,1) 100%);
		background: linear-gradient(to bottom, rgba(250,226,192,1) 0%, rgba(247,244,239,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fae2c0', endColorstr='#f7f4ef', GradientType=0 );

		background-repeat: no-repeat;
		background-color:rgba(247,244,239,1);
	}

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

	}
	#activityInfo{

		display: none;
		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;
	}


	#question {
		font-family:"BandaRegularRegular";
		background-color: #00b2ad ;
		color: #fff;
		padding-top: 10px;
		padding-bottom: 10px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
	}

	#questionArea {
		display: none;
		position:relative;
	}

	#questionArea h4{
		display: none;

	}


	.mcqbutton {
		border: 5px solid white;		
		filter: none; /* Applies to FF + IE */
		-webkit-filter: grayscale(0);disabled

	}

	.mcqbuttondiv {
		display: inline-block;
		margin: 0 10px;

	}

	.disabled {
		filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
		filter: gray; /* IE6-9 */
		-webkit-filter: grayscale(1); /* Webkit Nightlies & Google Chrome Canary */

	}

	.incorrectimage {

		color:#FFF;
		background-image:url(../../../images/cross.svg);
		background-repeat: no-repeat;
		background-position: center;
		background-color:#F75959;
		display: inline-block;
		height:160px;
		cursor:initial;
		
	}

	.correctimage {

		color:#FFF;
		background-image:url(../../../images/tick.svg);
		background-repeat: no-repeat;
		background-position: center;
		background-color:#4EBF65 ;
		display: inline-block;
		height:160px;
		cursor:initial;
		
	}
	
	/* Results
	================================================== */

	.html-results{
		background: rgba(213,185,250,1);
		background: -moz-linear-gradient(top, rgba(213,185,250,1) 0%, rgba(247,244,239,1) 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(213,185,250,1)), color-stop(100%, rgba(247,244,239,1)));
		background: -webkit-linear-gradient(top, rgba(213,185,250,1) 0%, rgba(247,244,239,1) 100%);
		background: -o-linear-gradient(top, rgba(213,185,250,1) 0%, rgba(247,244,239,1) 100%);
		background: -ms-linear-gradient(top, rgba(213,185,250,1) 0%, rgba(247,244,239,1) 100%);
		background: linear-gradient(to bottom, rgba(213,185,250,1) 0%, rgba(247,244,239,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5b9fa', endColorstr='#f7f4ef', GradientType=0 );
		background-repeat: no-repeat;
		background-color:rgba(247,244,239,1);

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


	#resultsArea {	
		display: none;
		color: #fff;
		position:relative;

	}

	#resultsText {
		margin-top:-158px;
		padding-top:170px;
		padding-bottom:20px;
		background: #00b2ad;
		font-family:"BandaRegularRegular", Helvetica, Arial, sans-serif;
		font-size:25px;
		line-height:34px;
		text-shadow: 0px 2px 3px #555;
	}

	.resultsAccordionText {
		color: #febe65;
	}

	#resultsMedal {
		font-size:23px;
		position: absolute;	
		z-index:110;
		margin-top: 147px;
		width:340px;
		text-align: center;	
		color: #fff;
		text-shadow: 0px 2px 3px #555;		
	}

	#resultsStar {
		width: 267px;
		height: 277px;
		position: relative;	
		z-index:100;
		margin-left: auto;
		margin-right: auto;



	}

	.Gold {
		background-image: url(../../../images/medal-gold.svg);


	}

	.Silver {
		background-image: url(../../../images/medal-silver.svg);


	}

	.Bronze {
		background-image: url(../../../images/medal-bronze.svg);


	}

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

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

	#resultsAccordion {
		margin-left: 0;
	}




/* #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) {

	#resultsMedal {
		width:265px;
	}
	

}

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


		/* Common Page Styles
		================================================== */
		#navigation {
			background-color:#555460;
			height:50px;
			/*background: url(../images/header.jpg) no-repeat 0px;*/
		}

		#subheader {
			background-color:#00b2ad;
	/*background-color:#E05D2C;
	background-color:#8B8F29;
	background-color:#00b2ad;*/
	height:40px;
	padding-bottom:0px;
	
	/*background: url(../images/header.jpg) no-repeat 0px;*/
}

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



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

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

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


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



#activityArea{
	z-index:0;
}



	/* Results
	================================================== */
	#resultsMedal {
		width:100%;
		
	}
}

/* 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;
		
	}

	.mcqbuttondiv {
		display: block;
	}
	
	
	
}


/* #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; }
*/