/*
* 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:200;
		position:relative;
	}

	#subheader {
		background-color:#00B2AD;
		height:40px;
		padding-bottom:5px;
		margin-bottom: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;
	}

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

	}
	.ui-tooltip-content {
		position: relative;
		padding: 5px 15px 5px 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;
	}


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

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

	}

	#activityArea {
		display: none;
		margin-top: 20px;
	}
	
		#questionStimulus {

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

	
	#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 {
		background-color: #00B2AD;
		color: #fff;
		padding-top: 10px;
		padding-bottom: 10px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
	}

	/* drag and drop specific*/


	ul {
		list-style-type: none;
	}

	li {
		margin-bottom: 10px;
	}




	.dragObject, .questionObject {

		background-color: #555460;
		width: 355px;
		height: 20px;
		cursor: pointer;
		color: #ffffff;
		font-family: Verdana;
		font-size: 15px;
		padding: 5px 30px;
		text-decoration: none;
		border: 1px solid #00B2AD;
		position: relative;
	}

	.questionObject:after, .questionObject:before {
		left: 100%;
		top: 50%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
	}

	.questionObject:after {
		border-color: rgba(85, 84, 96, 0);
		border-left-color: #555460;
		border-width: 15px;
		margin-top: -15px;
	}
	.questionObject:before {
		border-color: rgba(238, 81, 155, 0);
		border-left-color: #00B2AD;
		border-width: 16px;
		margin-top: -16px;
	}

	#dragObjectList {

		background-color: #AAE6E4;		
		height: 410px;
		width:250px;
		color: #555460;
		border: 1px dashed #FFF;

	}

	.dragObject {

		background-color: #00B2AD;
		border: none;	
		position: relative;
		width: 170px;
		height: 22px;
		left: 16px;

	}

	.dragObject:after, .dragObject:before {

		border-bottom: 16px solid #00B2AD;
		border-top: 16px solid #00B2AD;
		content: '';
		height: 0;
		position: absolute;
		top: 0%;
		width: 0;

	}

	.dragObject:after {
		border-left: 16px solid transparent;
		left: -16px;
		top: 0px;

	}



	.dropObject {

		background-color: #AAE6E4;		
		width: 200px;
		height: 20px;
		cursor: pointer;
		color: #555460;
		font-family: Verdana;
		font-size: 15px;
		padding: 5px 30px;
		text-decoration: none;
		border: 1px dashed #555460;
		margin-left: 40px;
	}

	.dropObject-hover {

		background-color: #febe65;		

	}

	.ui-draggable-dragging {
		
		background-color: #00B2AD;
	}

	.ui-draggable-dragging.dragObject:after{
		border-bottom: 16px solid #00B2AD;
		border-top: 16px solid #00B2AD;
		
	}



	.dragObject:after {
		border-left: 16px solid transparent;
		left: -16px;
		top: 0px;

	}

	#checkAnswerButton{
		display:none;
	}

	.correctfeedback {
		background-color: #58CC00;
		background-image:url(../../../images/tick.gif);
		background-repeat: no-repeat;
		background-position: 95% center;
		background-color:#4EBF65;
	}	
	

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


	.correctstyle {
		background-color: #4EBF65;
		border-top: #4EBF65 ;
		border-bottom: #4EBF65 ;
		background-image:url(../../../images/tick.gif);
		background-repeat: no-repeat;
		background-position: 95% center;

	}

	.correctstyle:after, .correctstyle:before {
		border-top: 16px solid #4EBF65 ;
		border-bottom: 16px solid #4EBF65 ;
	}

	.incorrectstyle {
		background-color: #F75959;
		border-top: #F75959;
		border-bottom: #F75959;
		background-image:url(../../../images/cross.gif);
		background-repeat: no-repeat;
		background-position: 95% center;


	}

	.incorrectstyle:after, .incorrectstyle:before {
		border-top: 16px solid #F75959;
		border-bottom: 16px solid #F75959;
	}


	.neutralstyle {
		background-color: #AAAAAA;

	}

	.neutralstyle:after, .neutralstyle:before {
		border-top: 16px solid #AAAAAA;
		border-bottom: 16px solid #AAAAAA;
	}




	/* end drag and drop specific*/
	
	/* 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;

	}

	#restartButton {
		display: none;

	}

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

	}

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

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

	.questionObject {
		width:146px;
	}

	.dropObject {
		width:171px;

	}

	.dragObject {
		width:142px;
	}

	li .dragObject {
		left: 54px;
	}


	

}

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


	#navigation {
		background-color:#555460;
		height:50px;
		
	}

	#subheader {
		background-color:#00B2AD;
		height:40px;
		padding-bottom:0px;
	}

	#subheader h2{
		font-size:inherit;
	}

	#selectable:after {		
		left: 170px;
	}

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

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

	}

	#questionArea{
		position:relative;
	}


	#resultsMedal {
		width:100%;

	}

	#questionObjectList {
		width:146px;
	}

	#dropObjectList {
		width:200px;
	}
	#dragObjectList {
		padding-left: 100px;
	}
	.questionObject {
		width:146px;
	}

	.dropObject {
		width:171px;
		margin-left:42px;
	}

	.dragObject {
		width:142px;

	}

	

	li .dragObject {
		left: 54px;
	}

}

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