/* Screens on the frontpage, styles for SPECIFIC orientations

<div id="iPhoneCaseXX" class="iPhoneCase Portrait Full / Portrait Header / RotateLeft Full / RotateLeft Header / RotateRight Full / RotateRight Header">
	<div class="iPhoneScreen">
  	  [ <div class="HeaderContainer">...</div> ]
		<div class="ScreenshotContainer">
				<img class="Screenshot" alt="" />
		</div>
	<div>
</div> */

/* iPhoneCase */

.iPhoneCase.Portrait {
	height: 600px;
	width: 300px;
}	

.iPhoneCase.RotateLeft, .iPhoneCase.RotateRight {
	height: 300px;
	width: 600px;
}

/* iPhoneScreen */

.iPhoneCase.Portrait .iPhoneScreen {
	left: 15px;
	height: 404px;
	top: 98px;
	width: 270px;
}

.iPhoneCase.RotateLeft .iPhoneScreen, .iPhoneCase.RotateRight .iPhoneScreen {
	left: 98px;
	height: 270px;
	top: 15px;
	width: 404px;
}

/* Header */

.HeaderContainer { height: 18px; } 			/*     <--    */

/* Screenshots */

.iPhoneCase.Portrait.Full .Screenshot {
	height: 404px;
	width: 270px;
}

.iPhoneCase.Portrait.Header .Screenshot {
	height: 386px;
	width: 270px;
}

.iPhoneCase.RotateLeft.Full .Screenshot, .iPhoneCase.RotateRight.Full .Screenshot {
	height: 404px;
	width: 270px;	
}

.iPhoneCase.RotateLeft.Header .Screenshot, .iPhoneCase.RotateRight.Header .Screenshot {
	height: 404px;
	width: 252px;	
}

.iPhoneCase.RotateLeft .Screenshot {
	transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}

.iPhoneCase.RotateRight .Screenshot {
	transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
}

.iPhoneCase.RotateLeft.Full .Screenshot, .iPhoneCase.RotateRight.Full .Screenshot {
	margin: -67px 0 0 67px;
}

.iPhoneCase.RotateLeft.Header .Screenshot, .iPhoneCase.RotateRight.Header .Screenshot {
	margin: -76px 0 0 76px;
}