/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}


/* if portrait mode is detected, rotate the entire page -90 degrees to hint rotating to landscape */
@media (orientation: portrait) {
	body {
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		transform: rotate(-90deg);
	}
}

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

	/* should be optimised for this anyway, but just in case */

}

/* ==========================================================================
   RETINA DISPLAY
   ========================================================================== */
@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

	/* anything in the sprite can be targetted with the retina class */
	.retina {
		background-image: url(img_2x/sprite.png) !important;
		background-size: 257px 550px !important;
	}

	/* body default */
	body { background-image: url(img_2x/bg_default.gif); background-size: 539px 539px !important; }

	/* body themes */
	body.login.persiangreen { background-image: url(img_2x/bg_persiangreen.gif)}
	body.login.limegreen { background-image: url(img_2x/bg_limegreen.gif)}
	body.login.buddhagold { background-image: url(img_2x/bg_buddhagold.gif) }
	body.sepia {background-image: url(img_2x/bg_sepia.gif)}
	body.black { background-image: url(img_2x/bg_black.gif) }

	/* 404, 500, no connection */
	body.not_found {
		background-image: url(img_2x/404-dishes.png), url(img_2x/bg_default.gif);
		background-size: 356px 202px, 539px 539px !important;
	}
	body.server_error {
		background-image: url(img_2x/500-devices.png), url(img_2x/bg_default.gif);
		background-size: 394px 182px, 539px 539px !important;
	}
	body.no_connection {
		background-image: url(img_2x/no_connection.png), url(img_2x/bg_default.gif);
		background-size: 259px 167px, 539px 539px !important;
	}

	/* top right tabs for answers pane */
	#answer_wrapper .tab {
		background-image: url(img_2x/tabs_answers.png) !important;
		background-size: 105px 55px  !important; /* @TODO - update this when you add new tabs */
	}
	#stimulus_wrapper .tab {
		background-image: url(img_2x/tabs_stimulus.png) !important;
		background-size: 105px 55px  !important; /* @TODO - update this when you add new tabs */
	}

	/* footer elements */
	footer  {
		background-image: url(img_2x/bg_footer.gif);
		background-size: 149px 149px;
	}
	footer a.back {
		background-image: url(img_2x/btn_back.png);
		background-size: 18px 19px;
	}
	footer a.restart {
		background-image: url(img_2x/btn_restart.png);
		background-size: 37px 38px;
	}
	footer a.next span{
		background-image: url(img_2x/btn_next.png);
		background-size: 62px 70px;
	}
	footer a.finish span{
		background-image: url(img_2x/btn_finish.png);
		background-size: 62px 70px;
	}

	/* resources elements */
	nav.resources ul li a span {
		background-image: url(img_2x/document_icons.png);
		background-size: 150px 141px;
	}

	/* error message */
	.error_wrapper .error_messages{
		background-image: url(img_2x/bg_error.png);
		background-size: 29px 27px;
	}

}