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

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

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



	#introduction {
		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:#EE519B;*/
	height:40px;
	padding-bottom:5px;
	margin-bottom:0px;
	
	/*background: url(../images/header.jpg) no-repeat 0px;*/
}

#subheader h2{
	
	font-size:2em;
	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;
}

h5 {
	color: #fff;
}


#title {
	
	color: #fff;
}

div.ui-tooltip {
	position: absolute;
	color: #000;
	border: 4px solid #FEBE65;
	border-radius: 5px;
	padding: 0;
	opacity: 1;
	width:230px;
	height: 30px;

}
.ui-tooltip-content {
	position: relative;
	padding: 5px 15px 10px 15px;
	width:200px;
	background: #FEBE65;
}
div.ui-tooltip-content::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-width: 20px;
	border-style: solid;
	border-color:  transparent transparent #FEBE65 transparent;
	top: -43px;
	left: 100px;
}

#controls {
	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;
		
	}
	
	#introductionText{
		color:#fff;
		padding:10px;
		background-color:#00B2AD;
	}
	
	#startButton{
		margin-top:60px;
	}

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

	#activityArea{
		
		display:none;
	}


	#questionStimulus {

		-moz-column-count: 2;
		-moz-column-gap: 10px;
		-webkit-column-count: 2;
		-webkit-column-gap: 10px;
		column-count: 2;
		column-gap: 10px;

		background-color: #FFF;
		border: 10px dotted #00b2ad;
		text-align: left;
		padding:10px;
		font-size: 16px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		display: none;
	}
	
	#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;
		display: none;
		
	}

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

	#question {
		background-color: #AAE6E4;
		color: #fff;
		padding: 10px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
	}

	#feedback {
		font-size: 1.4em;
	}

	.ui-widget-content {


	}
	#question span {
		padding: 0px;
		font-size: 1.4em;
		/*background: #AAE6E4;*/
		color: #555460;
		border:0px;
		cursor:pointer;
		-ms-user-select: none; /* IE 10+ */
		-moz-user-select: -moz-none;
		-khtml-user-select: none;
		-webkit-user-select: none;
		user-select: none;
	}

	#question .ui-selecting {
		background: #FECA40;
	}
	#question .ui-selected {
		background: #F39814;
		color: white;
	}


	#checkAnswerFeedback h4 {
		margin-bottom: 20px;
	}


	#question h4 {
		text-align: left;
		color: #fff;
		padding-left:10px;
	}

	#attemptsInfo h5 h6{			
		color: #ffffff;
		text-align: left;

	}	

	#attemptsInfo {

		position: relative;
		color: #ffffff;
		background-color:#555460;
		height:80px;
		padding-top: 5px;
		display: none;
	}
	#attemptsInfo:after {
		background: linear-gradient(-45deg, rgba(250,226,192,1)  5px, transparent 0), linear-gradient(45deg, rgba(250,226,192,1)  5px, transparent 0);
		background-position: left-bottom;
		background-repeat: repeat-x;
		background-size: 10px 10px;
		content: " ";
		display: block;
		position: absolute;
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 10px;
	}

	#highlight {
		background-color:#e05d2c;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		color: #fff;

	}


	.feedback {
		height:22px;
		width: 22px;
		margin-left: 554px;
	}


	.correctstyle {
		background-image:url(../../../images/tick.gif);
		background-repeat: no-repeat;
		background-position: 95% center;
		background-color:#4EBF65;
	}
	.incorrectstyle {
		background-image:url(../../../images/cross.gif);
		background-repeat: no-repeat;
		background-position: 95% center;
		background-color:#F75959;

	}

	.feedback {
		background-color:#CCC;
		height:20px;
		width: 20px;
		margin-left: 300px;
		border: 1px solid #fff;

	}

	.correctfeedback {
		background-image:url(../../../images/tick.gif);
		background-color:#4EBF65;
		background-repeat: no-repeat;


	}

	.incorrectfeedback {
		background-image:url(../../../images/cross.gif);
		background-color:#F75959;
		background-repeat: no-repeat;

	}

	.correctfeedback, .incorrectfeedback {
		background-position: center;
		height: 20px;

	}



	







	/* 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 {	
		color: #fff;
		position:relative;
		display: none;
		
	}

	#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;
		

	}
	#resultsFeedback {
		display: none;
		text-align: left;
		color: #fff;
		background-color: #555460;

	}

	
	#resultsFeedback table{
		border-collapse: collapse;
		border-spacing: 0;
		width:100%;
		height:100%;
		margin:0px;padding:0px;
	}
	#resultsFeedback th {
		background-color:#555460;
		padding:7px;
		border: 1px solid #ffffff;
	}
	#resultsFeedback td{
		vertical-align:middle;
		background-color:#00b2ad;
		border:1px solid #ffffff;
		border-width:0px 1px 1px 0px;
		text-align:left;
		padding:7px;
		color:#ffffff;
	}

	#resultsFeedback tr th:last-child td{
		border-width:0px 1px 0px 0px;
	}
	#resultsFeedback tr td th:last-child{
		border-width:0px 0px 1px 0px;
	}
	#resultsFeedback tr th:last-child td th:last-child{
		border-width:0px 0px 0px 0px;
	}
	#resultsFeedback tr th:first-child td th{

		background-color:#555460;
		border:0px solid #ffffff;
		text-align:center;
		border-width:0px 0px 1px 1px;
		font-size:21px;
		font-family:Arial;
		font-weight:bold;
		color:#ffffff;
	}
	.resultsFeedback tr th:first-child td th:first-child{
		border-width:0px 0px 1px 0px;
	}
	.resultsFeedback tr th:first-child td th:last-child{
		border-width:0px 0px 1px 1px;
	}


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


	}

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

		
	}

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

		
	}



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

	.feedback {
		margin-left: 210px;
	}

	#timeCounter, #currentQuestionDisplay {
		font-size:16px;  
	}


	

}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
	
	
	#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:#EE519B;*/
		height:40px;
		padding-bottom:0px;
		
		/*background: url(../images/header.jpg) no-repeat 0px;*/
	}

	#subheader h2{
		font-size:inherit;
	}


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


	.feedback {
		margin-left: 383px;
	}

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

	}


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

	}


	#questionArea{

		position:relative;
		/*top:80px;*/
	}

	#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-activity {
		background:none;
		
	}
	
	.body-results {
		background:none;
		
	}

	.feedback {
		margin-left: 260px;
	}

	#attemptsInfo {
		height:60px;
		padding-top: 0px;
	}


	#activityArea {
		margin-top: 0px;

	}

	#timeCounter h5 {
		color: #555460;
		background-color: #d8e0d7;
	}

	#timeNumbers {
		color: #555460;

	}


	#checkAnswerButton, #nextButton {
		margin-top: 0px;
	}

}

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

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

	#activityArea {
		margin-top: 0px;

	}

	.feedback {
		margin-left: 210px;
	}

	#attemptsInfo {
		height:60px;
		padding-top: 0px;
	}

	#timeCounter h5 {
		color: #555460;
		background-color: #d8e0d7;
	}

	#timeNumbers {
		color: #555460;

	}

	#checkAnswerButton, #nextButton{
		margin-top: 0px;
	}

}



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