@charset "UTF-8";

/* selection */
::selection {
	background: #fff;
	color: #531900;
}

::-moz-selection {
	background: #fff;
	color: #531900;
}

#introduction {
	display: none;
}

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

#activityArea {
	display: none;
}

#activityArea a {
	color: #444;
}

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

#question {
	background-color: #FFF;
	color: #fff;
	padding: 20px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	line-height: 1.3;
}

.unit01 #question {border: 3px solid #ee519b;}
.unit02 #question {border: 3px solid #00B2AD;}
.unit03 #question {border: 3px solid #E05D2C;}

#question.leading-lg {
	line-height: 1.6;
}

#feedback {
	font-size: 1.4em;
}

#question span {
	padding: 0px;
	font-size: 1.4em;		
	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 {
	color: white;
}*/

/*.unit01 #question .ui-selected {background: #a53f6f;}
.unit02 #question .ui-selected {background: #0b8682;}
.unit03 #question .ui-selected {background: #F39814;}*/

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

#attemptsInfo > div.four > h5:hover{
	cursor: pointer;
	color: #FEBE65;
}

#attemptsInfo > div.feedback:hover{
	cursor: pointer;	
}



span.previousAtempt{
	display: none;
	background-color: #FEBE65;
	color: #000;
	position: absolute;
	left: 100%;
	top: 0;
	width: auto;
	padding: 0 5px;
}

span.previousAtempt::before{
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-width: 13px;
	border-style: solid;
	border-color: transparent #FEBE65 transparent transparent;
	top: 0;
	left: -26px;

}


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

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

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

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

#restartButton {
	margin-top: 1em;
}

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