.quiz *{

	padding: 0;

	margin: 0;

	box-sizing:border-box;

	-moz-box-sizing:border-box; /* Firefox */

}



.quiz{

	max-width: 694px;

	height: 400px;

	display:block;

	margin-bottom: 20px;

	background: transparent url("/wp-content/interactive/rockcycle/images/types-bg.png") no-repeat;

	position: relative;

	font-family: "Arial", sans;

	border: 1px solid #66CC00;

	-moz-border-radius: 7px;

	-webkit-border-radius: 7px;

	border-radius: 7px;

	overflow:hidden;

	background-clip:padding-box;

	-moz-background-clip:padding-box; /* Firefox */

	font-size: 16px;

}



.frame{

	display:block;

	width: 100%;

	padding-bottom: 2.57%;

	background: transparent url("/wp-content/interactive/rockcycle/images/frame-sprite.png") no-repeat;

	background-size: cover;

	position: absolute;

	z-index: 999;

}

#frame-top{

	top:0;

	left:0;

}



#frame-bottom{

	background-position: 0 100%;

	padding-bottom: 3%;

	bottom:0;

	left:0;

}



.quiz-title{

	display:block;

	position: absolute;

	text-align:center;

	width: 100%;

	margin-top: 16px;

	font-size: 18px;

	font-weight:bold;

}



.audio-container{

	position:absolute;

}



.screen{

	display:block;

	position: relative;

	text-align:center;

}



.screen-content{

	display:inline-block;

	vertical-align: middle;

	width: 100%;

	max-width: 493px;

	margin: auto auto;

	text-align: left;

	border: 2px solid #66CC00;

	background-color: #fff;

	position: relative;

	-moz-border-radius: 20px;

	-webkit-border-radius: 20px;

	border-radius: 20px;

	-moz-box-shadow:    8px 8px 0px 0px rgba(0,0,0,.3);

	-webkit-box-shadow: 8px 8px 0px 0px rgba(0,0,0,.3);

	box-shadow:         8px 8px 0px 0px rgba(0,0,0,.3);

}



.start-content{

/*	display:table;*/

	max-width: 355px;

	min-height: 225px;

	text-align: center;

	margin-top: 60px;

}



.quiz-message{

	/*display: table-cell;

	vertical-align: middle;*/

	padding: 10px;

	font-weight: bold;

	line-height: 25px;

}



.quiz-button{

	display:block;

	width: 123px;

	margin:auto;

	position:relative;

	border: 1px solid #ccc;

	background-color: #666;

	color: white;

	border: 2px solid #66CC00;

	-moz-border-radius: 5px;

	-webkit-border-radius: 5px;

	border-radius: 5px;

	font-size: 24px;

	font-weight: bold;

	z-index: 100;

	background: rgb(153,255,0); /* Old browsers */

	background: -moz-linear-gradient(top,  rgba(153,255,0,1) 0%, rgba(51,153,102,1) 100%); /* FF3.6+ */

	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(153,255,0,1)), color-stop(100%,rgba(51,153,102,1))); /* Chrome,Safari4+ */

	background: -webkit-linear-gradient(top,  rgba(153,255,0,1) 0%,rgba(51,153,102,1) 100%); /* Chrome10+,Safari5.1+ */

	background: -o-linear-gradient(top,  rgba(153,255,0,1) 0%,rgba(51,153,102,1) 100%); /* Opera 11.10+ */

	background: -ms-linear-gradient(top,  rgba(153,255,0,1) 0%,rgba(51,153,102,1) 100%); /* IE10+ */

	background: linear-gradient(to bottom,  rgba(153,255,0,1) 0%,rgba(51,153,102,1) 100%); /* W3C */

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99ff00', endColorstr='#339966',GradientType=0 ); /* IE6-9 */

	-moz-box-shadow:    2px 2px 0px 0px rgba(0,0,0,.3);

	-webkit-box-shadow: 2px 2px 0px 0px rgba(0,0,0,.3);

	box-shadow:         2px 2px 0px 0px rgba(0,0,0,.3);

}





.quiz-button:hover{

	background: rgb(149,196,245); /* Old browsers */

	background: -moz-linear-gradient(top,  rgba(149,196,245,1) 0%, rgba(0,51,102,1) 100%); /* FF3.6+ */

	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(149,196,245,1)), color-stop(100%,rgba(0,51,102,1))); /* Chrome,Safari4+ */

	background: -webkit-linear-gradient(top,  rgba(149,196,245,1) 0%,rgba(0,51,102,1) 100%); /* Chrome10+,Safari5.1+ */

	background: -o-linear-gradient(top,  rgba(149,196,245,1) 0%,rgba(0,51,102,1) 100%); /* Opera 11.10+ */

	background: -ms-linear-gradient(top,  rgba(149,196,245,1) 0%,rgba(0,51,102,1) 100%); /* IE10+ */

	background: linear-gradient(to bottom,  rgba(149,196,245,1) 0%,rgba(0,51,102,1) 100%); /* W3C */

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#95c4f5', endColorstr='#003366',GradientType=0 ); /* IE6-9 */

}

	



.start-button{

	

	top:-20px;

}



.next-button-container{

	display:block;

	width:100%;

	position:absolute;

	bottom: 5px;

	left:0;

	text-align:center;

}



.next-button{

	font-size: 20px;

}



.quiz-content{

	/*min-height: 310px;*/

	max-height: 330px;

	max-width: 485px;

	margin-top: 65px;

	padding: 10px 15px 10px 15px;

}



.stat-container{

	position:absolute;

	top:15px;

	left:5px;

	width: 124px;

	border: 2px solid #66CC00;

	-moz-border-radius: 5px;

	-webkit-border-radius: 5px;

	border-radius: 5px;

	background-color: #fff;

	display:none;

	text-align: left;

	font-size: 8px;

	font-weight:bold;

	text-transform: uppercase;

	padding: 2px;

}



.score-container{

	

}



.counter {

	display: inline-block;

	width: 40px;

	height: 26px;

	border: 1px solid #ccc;

	margin-left: 10px;

	color: #ff0000;

	border: 2px solid #66CC00;

	-moz-border-radius: 10px;

	-webkit-border-radius: 10px;

	border-radius: 10px;

	background-color: #CCFFCC;

	text-align: center;

	font-size: 13px;

}



.timer-container{

	vertical-align: middle;

}



.timer{

	display:inline-block;

	border: 1px solid #ccc;

	width: 83px;

}



.timer-bar{

	background-color: blue;

	height: 5px;

}



.questions{

	list-style: none;

}



.question-container{

	position: relative;

}



.question-container.answered{

	height: 0;

	overflow: hidden;

}



.question{

	display:block;

	width: auto;

	color: #ff0000;

	font-weight: bold;

}



.answers {

	display:block;

	width: 200px;

	font-size: 14px;

	margin-top: 15px;

	font-weight: bold;

}



.answer-container{

	position:relative;

	margin-bottom: 10px;

	background: transparent url("/wp-content/interactive/rockcycle/images/button-sprites.png") no-repeat;

	

}



.answer-container:hover, .answer.disabled.selected{

	background-position: 0 -38px;

}



.answer {

	cursor: pointer;

	margin-left: 25px;

	position: relative;

}



.answer-container.disabled {

	cursor: default;

	opacity: 0;

}



.answer-container.disabled.correct{

	background-position: 0 -37px;

	opacity: 1;

}



.answer-container.disabled .answer{

	cursor: default;

}



.answer-container.disabled .hint-button{

	cursor: default;

	opacity: 0;

}



.answer-container.disabled:hover {

	background-position: 0 0;

}



.answer-container.disabled .hint-button:hover {

	background-position: -200px 0;

}





.hint-button{

	border: none;

	background: transparent url("/wp-content/interactive/rockcycle/images/button-sprites.png") -201px 0 no-repeat;

	color: white;

	cursor: pointer;

	position: absolute;

	top:-2px;

	right: 0;

	text-indent: 100%;

	width: 23px;

	height: 19px;

	overflow: hidden;

}



.hint-button:hover{

	background-position: -200px -36px;

}



.hint-button.disabled{

	cursor: default;

}



.hint-container .hint-button{

	position:relative;

	top:auto;

	left:auto;

}



.quiz-image-container{

	display:block;

	float:right;

	position: relative;

	margin-top: 5px;

	margin-bottom: 5px;

	overflow: hidden;

}



.quiz-image{

	border: 3px solid #66CC33;

	background-color: #000;

	-moz-border-radius: 10px;

	-webkit-border-radius: 10px;

	border-radius: 10px;

	max-height: 173px;

	max-width: 222px;

}



.quiz-image img{

	/*width:100%;

	height: 100%;*/

}



.hint-container{

	display: block;

	width: 100%;

	min-height: 80px;

	margin-top: 5px;

	border: 3px solid #66CC33;

	background-color: #405989;

	text-align: center;

	overflow: hidden;

	-moz-border-radius: 10px;

	-webkit-border-radius: 10px;

	border-radius: 10px;

	color:#FFFFFF;

	font-size: 12px;

	padding: 10px;

	

}



.hint-container.correct{

	background-color: green;

	font-size: 26px;

}



.hint-container.wrong{

	background-color: red;

	font-size: 18px;

}



.feedback-screen{

	text-align:center;

	color: #006600;

	font-size: 18px;

	line-height: 28px;

	

}



.feedback-content{

	margin:auto;

	margin-top: 90px;

	max-width: 348px;

	padding:0;

	text-align: center;

}



.feedback-content a{

	color: #006600;

	font-size: 18px;

}



.feedback-content p{

	margin-bottom: 12px;

}



.feedback-content.time-up{

	padding: 20px;

	font-size: 22px;

	font-weight: bold;

}



@media only screen

and (max-width: 480px){

	



	.quiz{

		background: transparent none;

		width: auto;

		height: auto;

	}

	

	.quiz *{

		border: none;

		-moz-border-radius: 0;

		-webkit-border-radius: 0;

		border-radius: 0;

		-moz-box-shadow:    none;

		-webkit-box-shadow: none;

		box-shadow:         none;

	}

	

	.quiz-title{

		position:relative;

	}

	

	.quiz-button{

		display:block;

		width: 100%;

		position: relative;

		top:auto;

		left: auto;

		bottom: auto;

		margin-top:10px;

	}

	

	.next-button-container{

		position:relative;

		top:auto;left:auto;

	}

	

	.screen{

		display:block;

		margin: 20px auto 20px auto;

		margin-top: 20px;

		width: auto;

	}



	.screen-content{

		margin: auto;

		width: auto;

		padding:0;

		display:block;

		border: none;

		margin: auto;

	}

	

	.stat-container{

		width: auto;

		margin: auto;

		margin-top: 10px;

		height: auto;

		top:0;

		left:0;

		position: relative;

		border: none;

		background-color: #ccc;

		padding: 5px;

	}

	

	.score-container{

		width: 40%;

		display:inline-block;

	}

	

	.counter{

		height: auto;

	}

	

	.timer-container{

		width: 48%;

		display:inline-block;

	}

	

	.quiz-content{

		max-height: none;

	}

	

	.question {

		padding: 10px;

	}

	

	.answers{

		display: block;

		float: none;

		width: 100%;

	}

	

	.answer-container{

		background: none;

		background-position: auto;

		font-size: 16px;

		background: rgb(153,255,0); /* Old browsers */

		background: -moz-linear-gradient(top,  rgba(153,255,0,1) 0%, rgba(51,153,102,1) 100%); /* FF3.6+ */

		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(153,255,0,1)), color-stop(100%,rgba(51,153,102,1))); /* Chrome,Safari4+ */

		background: -webkit-linear-gradient(top,  rgba(153,255,0,1) 0%,rgba(51,153,102,1) 100%); /* Chrome10+,Safari5.1+ */

		background: -o-linear-gradient(top,  rgba(153,255,0,1) 0%,rgba(51,153,102,1) 100%); /* Opera 11.10+ */

		background: -ms-linear-gradient(top,  rgba(153,255,0,1) 0%,rgba(51,153,102,1) 100%); /* IE10+ */

		background: linear-gradient(to bottom,  rgba(153,255,0,1) 0%,rgba(51,153,102,1) 100%); /* W3C */

		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99ff00', endColorstr='#339966',GradientType=0 ); /* IE6-9 */

	}

	

	.answer-container:hover, .answer-container.correct{

		color: #fff;

		background: rgb(149,196,245); /* Old browsers */

		background: -moz-linear-gradient(top,  rgba(149,196,245,1) 0%, rgba(0,51,102,1) 100%); /* FF3.6+ */

		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(149,196,245,1)), color-stop(100%,rgba(0,51,102,1))); /* Chrome,Safari4+ */

		background: -webkit-linear-gradient(top,  rgba(149,196,245,1) 0%,rgba(0,51,102,1) 100%); /* Chrome10+,Safari5.1+ */

		background: -o-linear-gradient(top,  rgba(149,196,245,1) 0%,rgba(0,51,102,1) 100%); /* Opera 11.10+ */

		background: -ms-linear-gradient(top,  rgba(149,196,245,1) 0%,rgba(0,51,102,1) 100%); /* IE10+ */

		background: linear-gradient(to bottom,  rgba(149,196,245,1) 0%,rgba(0,51,102,1) 100%); /* W3C */

		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#95c4f5', endColorstr='#003366',GradientType=0 ); /* IE6-9 */

	}

	

	.answer-container.disabled.correct{

		background-position: 0 0;

	}

	

	.answer-container:hover, .answer.disabled.selected{

		background-position: auto;

	}

	

	.answer {

		margin-left: 0;

		display:block;

		height: 100%;

		padding: 5px;

	}

	

	.hint-button{

		margin-top: 5px;

	}

	

	.quiz-image-container{

		display:block;

		float: none;

		margin: auto;

		overflow: hidden;

		text-align: center;

	}

	

	.quiz-image{

		display: block;

		margin: auto;

		height: 100%;

		width: 100%;

		border: 3px solid #66CC33;

		-moz-border-radius: 10px;

		-webkit-border-radius: 10px;

		border-radius: 10px;

	}

	

	.hint-container {

		width: auto;

	}

}