body{
	font-size: 100%;
}

.quiz{
	margin: 0 auto;
	width: 100%;		
	font-size: 1em;		
}

.alignWrapper{
	width: 80%;
	margin: 0 auto;
	max-width: 44em;
}

/* INTRO ==================================== */

.quizLogo{
	display: block;
	cursor: pointer;
}

.introPanel{}

.introGrass{
	position: relative;
	top: -4em;
	background: url( ../media/ui/grass_bit.png );
	/*background: url( ../media/ui/grass.png ) no-repeat center;*/
	height: 8em;
}

.introStart{
	display: block;
	margin: 0 auto;
	cursor: pointer;	
}


/* QUESTIONS ANSWERS ==================================== */

.question_answers{
	margin-top: 1.5em;
	padding-left: 1em;
	max-height: 14em;
}

ul {}

.selected {
	background-color:rgb(102,154,102);
	padding: 0.2em;
	/*border-radius: 0.2em;*/
	color: white;
}

.question{
	font-family : "Guardian Egyptian Headline" , serif;
	padding: 1em 0;
	font-size: 1.2em;
	font-weight: bold;
}

.answers{
	min-height: 12em;
	/* 
	Preload hover state for label
	https://css-tricks.com/snippets/css/css-only-image-preloading
	*/
	background-image: url( ../media/quiz/radius_on.png) no-repeat -8888px -8888px;
}

.answer{ 
	float: left;
	line-height: 1.4;
	margin-right: 0.5em;
	width: 48%;
	min-height: 5em;
	max-height: 5em;
}

.answer:nth-of-type(odd) {
	clear:both;
}

.answerBlob{
	float: left;
	width:24px;
	height:24px;
	cursor: pointer;
}

.answerText{
	font-family: "Guardian Egyptian Text", serif;
	font-size: 1em;
	cursor: pointer;
	float:left;
	margin-left: 0.5em;
	width:85%;
}

/*input[type='radio'] {
	width: 0;
	visibility: hidden;
}*/

label {
	padding: 0.5em 0 0.5em 2.5em;
    cursor: pointer;
	/*background: url( ../media/quiz/radius_off.png) left no-repeat; */
	display: inline-block;
}

label:hover {
	/*background-image: url( ../media/quiz/radius_on.png); */
}

/* PROGRESS BAR ==================================== */

.progressBar{
	margin-bottom: 1.5em;
	padding-left: 1em;
	clear:both;
}

.progress {
	float: left;
	width: 10%;
	cursor: pointer;
	position: relative;
}

.progress:nth-of-type(odd) {
	top: 1em;
}

/* QUIZ FOOTER ==================================== */

.quizGrass{
	background: url( ../media/ui/grass_bit.png );
	height: 8em;
}

.quizBack{
	cursor: pointer;
	position: relative;
	top: 0.5em;
	left: 6em;
}

/* OUTCOME ==================================== */

.outcome {
	min-width: 16em;
	max-width: 48em;
	margin: 0 auto;
}

.outcomeHeader{}

.outcomeLogo{
	display: inline;
	margin: 0;
	cursor: pointer;
}

.social{
	cursor: pointer;
	width: 48px;
	float: right;
	margin-right: 0.25em;
}

.outcomeBody{
	background: url( ../media/ui/wood_background.png) center no-repeat;
	background-position: 50% 1em;
	margin-top: 1em;
}

.outcomeFeedback{
	width:40%;
	float: left;
	padding-top: 2em;
	position: relative;
}

.youare , .feedback {
	display: block;
	margin: 0 auto;
	padding-left: 4em;
}

.feedback{
	cursor: pointer;
	position: relative;
	left: 2em;
	top: -2em;
}

.feedbackMobile{
	display: none;
}


.outcomeAnimal{
	width:28%;
	float: left;
	margin: 0 auto;
}

.animalImage{}

.animalImageMobile{
	display:none;
}


.outcomeSign{
	float:left;
	width:28%;	
	position: relative;
	top: 8em;
}

.outcomeGrass{
	position: relative;
	top: -4em;
	background: url( ../media/ui/grass_bit.png );
	height: 8em;
}

.replay{
	cursor: pointer;
	display: block;
	margin: 0 auto;
	position: relative;
	top: 2em;
	left: 1em;
}

.outcomeSocialMobile{
	display: none;
}

/* DOWNLOAD ==================================== */

.downloadBackg {
	background-image: url( ../media/download/background.png );
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1020;
}

.downloadButton{
	margin: 8em auto;
	width: 15em;
	z-index: 1024;
	cursor: pointer;
	display: block;
}

/* MEDIA ==================================== */

@media screen and (max-width: 44em) {

	body{
		font-size: 0.875em;
	}

	.answer{ 
		width: 100%;
		margin: 0;
	}

	.progress {
		margin: 1px;
	}

	.selected {
		padding: 0.25em;
		border-radius: 0;
	}

	.feedback{
		display: none;
	}

	.feedbackMobile{
		display: block;
		cursor: pointer;
		position: relative;
		top: -8em;
		width: 12em;	/* Resize bug? */
	}

	.outcomeBody{
		margin-top: -2em;
	}

	.outcomeAnimal{
		width: 100%;
	}
	.outcomeGrass{
		top: -6em;
	}

	.animalImage{
		display: none;
	}

	.outcomeSign{
		display: none;
	}
	.outcomeFeedback{
		display: none;
	}

	.animalImageMobile{
		display: block;
		margin: 0 auto;
	}

	.outcomeSocialMobile{
		display: block;
		position: relative;
		top: -6em;
	}

	.outcomeHeader .social{
		display: none;
	}

	.replay{
		top: -11em;
		left: 5em;
	}
}

/* DEBUG ==================================== 

.quizHeader,
.intro,
.introPanel,
.introStart,
.alignWrapper,
.question_answers,
.qa,
.question,
.answer,
.progressBar ,
.progress,
.quizGrass,
.outcome , 
.outcomeHeader ,
.outcomeBody ,
.outcomeFeedback ,
.outcomeAnimal,
.outcomeSign ,
.outcomeGrass ,
.outcomeSocialMobile ,
.feedback,
.grass, 
.logo ,
.youare
{
	outline: 1px solid rgba(0,0,0,0.1);
}
*/