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

		
		
	}


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

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

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


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


	#navigation {
		background-color:#000;
		height:80px;
	}
	
	#subject{
	font-family: 'Century Gothic', sans-serif;
	font-weight:bold;
	line-height:75px;
	color:#FFF;
	}

	#subheader {
		background-color:#EC008C;
		height:60px;
		padding-bottom:5px;
		margin-bottom:0px;

	}

	#subheader h2{
	font-size:2em;
	font-family: 'Century Gothic', sans-serif;
	text-align:centre;
	line-height:55px;
	padding-bottom:0px;
	margin-bottom:0px

	}



	.arrow-up {
	
	left:0;
	width:70%;
	width: 0; 
	height: 0; 
	border-left: -100px solid transparent;
	border-right: 40px solid transparent;
	border-bottom: 40px solid #000;
	
}

.arrow-down {
	position:relative;
	float:right;
	margin-top:10px;
	width: 0; 
	height: 0; 
	border-left: 40px solid transparent;
	border-right: -100px solid transparent;
	
	border-top: 40px solid #EC008C;
	
}



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

	
	.body-start {

		
		
	}
	
	#introductionText{
		color:#fff;
		padding:10px;
		background-color:#000;
	}
	

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

	

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

	}

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

	}
	
	#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:#000;
		height:55px; 
		width: 100%;  
		position:relative;

	}



	#timeCounter:after,
	#timeCounter:before,
	#currentQuestionDisplay:after,
	#currentQuestionDisplay:before
	{
		border-top: 15px solid #000 ;
		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;
	}
	
	#questionObjectList {
		margin-right:0px;
	}

	#question {
		background-color: #00B2AD ;
		color: #fff;
		padding-top: 10px;
		padding-bottom: 0px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
	}

	/* drag and drop specific*/


	ul {
		list-style-type: none;
	}

	li {
		margin-bottom: 10px;
	}

.questionObject{
	text-align:right;
	}
.dropObject{
	text-align:left;
	}


	.dragObject, .questionObject {

		background-color: #000;
		height: 40px;
		cursor: pointer;
		color: #ffffff;
		font-family: Verdana;
		font-size: 14px;
		padding: 5px 10px;
		text-decoration: none;
		border: 1px solid #EC008C;
		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:#FCF;	
		margin-top:30px;
		margin-bottom:30px;
		height: 410px;
		color: #555460;
		border: 1px dashed #FFF;

	}

	.dragObject {

		background-color:#EC008C;
		border: none;	
		position: relative;
		height: 42px;
		

	}

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

	}*/

#dropObjectList{
	margin-left:0px;
	
	}

	.dropObject {

		background-color: #FCF;		
		width: 460px;
		height: 40px;
		cursor: pointer;
		color: #555460;
		font-family: Verdana;
		font-size: 15px;
		padding: 5px 0px;
		text-decoration: none;
		border: 1px dashed #555460;
	}

	.dropObject-hover {

		background-color:#CA0065;		

	}

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

	

	#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: 99% 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: 99% 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
	================================================== */

	
	.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: #EC008C;
		font-family:"Century Gothic", 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;

	}

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


	}

	.Argent {
		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) {
footer{
	display:none;
	}
	
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
#questionObjectList {
		width:310px;
		padding-left:0px;
		padding-right:0px;
	}
	.questionObject{
		font-size:13px;
		}
	
#subheader h2{
	font-size:20px;
	line-height:55px;
}


#timeCounter h5, #currentQuestionDisplay  {	
		font-size:inherit;
	}
	
.dropObject {
		background-color: #FCF;;		
		width: 440px;
	
		cursor: pointer;
		color: #555460;
		font-family: Verdana;
		font-size: 15px;
		padding: 5px 0px;
		text-decoration: none;
		border: 1px dashed #555460;
	}
	
		#dragObjectList {
		width:442px;
		margin-left:-50px;
		background-color:#FCF;	
		margin-top:30px;
		margin-bottom:30px;
		height: 410px;
		color: #555460;
		border: 1px dashed #FFF;
	}

	.dragObject{
		width:422px;
		text-align:left;
		font-size:13px;
		}
	
	#resultsMedal {
		width:265px;
	}
}

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


	#navigation {
	
		height:50px;
		
	}

	#subheader {
	
		height:40px;
		padding-bottom:0px;
	}

	#subject{
 		font-size:1.3em;
	}

	.arrow-down {
	position:relative;
	float:right;
	margin-top:-20px;
	width: 0; 
	height: 0; 
	border-left: 40px solid transparent;
	border-right: -100px solid transparent;
	
	
	
}

	#subheader h2{
		font-size:inherit;
	}

	#selectable:after {		
		left: 170px;
	}

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

	#timeCounter, #currentQuestionDisplay {
		
		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:200px;
	}
/*
	#dropObjectList {
		width:146px;
	}
	#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) {

	

}

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

	#subheader{
		height:45px;

	}
	#title{
		line-height:22px;
	}

}


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