@charset "utf-8";

/*smartphone - any orientation*/
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {

	#quiz {
		position: absolute !important;
		top: 0px !important;
		left: 0px !important;
		padding: 5px !important;
	}

	.quiz_answer_enabled:hover {
		color: inherit;
		background: none;
	}
}

/*iPhone 5 in portrait (2G-4S is max-device-width 480px)*/
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/*@media only screen
and (max-width : 320px) {*/

	#quiz_title {
		height: 10% !important;
	}

	#quiz_title img {
		width: auto !important;
		height: 100% !important;
	}

	#quiz_tracker {
		padding: 5px 0px !important;
		width: 100% !important;
	}

	#quiz_tracker div {
		padding: 0px 1px !important;
	}

	#quiz_left {
		width: 50% !important;
		display: block !important;
		float: none !important;
		padding: 0px !important;
		margin: 0px auto !important;
	}

	#quiz_right {
		display: block !important;
		float: none !important;
		width: 100% !important;
		padding: 0px !important;
		margin: 5px 0px 0px 0px !important;
	}

	/*#quiz_question_number {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		float: left !important;
	}

	#quiz_question, #quiz_feedback {
		position: relative !important;
		overflow: hidden !important;
		padding: 3px 0px 5px 7px !important;
	}*/

	#quiz_question_number {
		top: -33px !important;/*-90*/
		left: 10px !important;/*5*/
	}

	#quiz_q_and_a {
		margin-left: 0px !important;
		font-size: 14px !important;
		line-height: 15px !important;
	}

	.quiz_container {
		border: 5px solid #00a7ae !important;
		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		border-radius: 15px;
		padding: 10px 5px 10px 10px !important;
		min-height: 174px !important;
		height: 174px !important;
	}

	#quiz_audio_toggle {
		margin: 0px 14px 15px 0px !important;
	}
}



/*iPhone 5 in landscape (2G-4S is max-device-width 480px)*/
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/*@media only screen
and (min-width : 321px) { */

	#quiz {
		overflow: auto !important;
	}

	#quiz_title {
		height: 10% !important;
	}

	#quiz_title img {
		width: auto !important;
		height: 100% !important;
	}

	#quiz_tracker {
		padding: 3px 0px !important;
		width: 65% !important;
	}

	#quiz_left {
		width: 35% !important;
	}

	#quiz_right {
		width: 65% !important;
	}

	#quiz_question_number {
		left: -35px !important;
	}

	#quiz_q_and_a {
		margin-left: 0px !important;
		font-size: 14px !important;
		line-height: 15px !important;
		min-height: 152px !important;
	}

	.quiz_container {
		border: 5px solid #00a7ae !important;
		-webkit-border-radius: 15px !important;
		-moz-border-radius: 15px !important;
		border-radius: 15px !important;
		padding: 10px 5px 10px 10px !important;
	}

	#quiz_popup_container {
		margin-top: 5px !important;
		width: 55% !important;
		font-size: 20px !important;
		line-height: 23px !important;
	}

}



/* iPad portrait 768 1024 */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {

	html, body{
		position: fixed !important;
		bottom: 0 !important;
	}

	.quiz_answer_enabled:hover {
		color: inherit;
		background: none;
	}

	#quiz {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
	}

	#quiz_title {
		height: 10% !important;
	}

	#quiz_tracker {
		padding: 20px 0px 0px 0px !important;
	}

	#quiz_left {
		width: 50% !important;
		display: block !important;
		float: none !important;
		padding: 0px !important;
		margin: 20px auto !important;

	}

	#quiz_right {
		display: block !important;
		float: none !important;
		width: 80% !important;
		padding: 0px !important;
		margin: auto !important;
		height: 100% !important;/*bleeds container off screen*/
	}

}



/* iPad landscape 768 1024 */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {

	html, body{
		position: fixed !important;
		bottom: 0 !important;
	}

	.quiz_answer_enabled:hover {
		color: inherit !important;
		background: none !important;
	}

	#quiz {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
	}

}