/* ------------------------------------------------------------------------
	Shell
------------------------------------------------------------------------- */

	#container {
		float: left;
		height: 100%;
		min-height: 420px;
		overflow: hidden;
		position: absolute;
		width: 320px;
	}
		body.landscape #container { width: 480px; }

	.in-viewport {
		float: left;
		position: absolute;
		width: 320px;
	}
		body.landscape .in-viewport { width:480px; }
		
	.out-of-viewport {
		float: left;
		position: absolute;
		width: 320px;
	}
		body.landscape .out-of-viewport { left:480px; width: 480px; }
		
	.loader {
		background: #000 url(/ot_mobile/backgrounds/ajax-loader.gif) center 100px no-repeat;
		display: none;
		left: 0;
		opacity: 0.5;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 10;
	}
	

/* ------------------------------------------------------------------------
	Sliding
------------------------------------------------------------------------- */

body.portrait .slideInRight {
	-webkit-animation-name: 'slideInRight';
	-webkit-animation-duration: 1s;
}
body.landscape .slideInRight {
	-webkit-animation-name: 'slideInRightWide';
	-webkit-animation-duration: 1s;
}

@-webkit-keyframes 'slideInRight' {
	from{ left: -320px; }
	to{ left: 0; }
}
@-webkit-keyframes 'slideInRightWide' {
	from{ left: -480px; }
	to{ left: 0; }
}

body.portrait .slideInLeft {
	-webkit-animation-name: 'slideInLeft';
	-webkit-animation-duration: 1s;
}
body.landscape .slideInLeft {
	-webkit-animation-name: 'slideInLeftWide';
	-webkit-animation-duration: 1s;
}

@-webkit-keyframes 'slideInLeft' {
	from{ left: 320px; }
	to{ left: 0; }
}
@-webkit-keyframes 'slideInLeftWide' {
	from{ left: 480px; }
	to{ left: 0; }
}

body.portrait .slideOutRight {
	-webkit-animation-name: 'slideOutRight';
	-webkit-animation-duration: 1s;
}
body.landscape .slideOutRight {
	-webkit-animation-name: 'slideOutRightWide';
	-webkit-animation-duration: 1s;
}

@-webkit-keyframes 'slideOutRight' {
	from{ left: 0; }
	to{ left: 320px; }
}
@-webkit-keyframes 'slideOutRightWide' {
	from{ left: 0; }
	to{ left: 480px; }
}

body.portrait .slideOutLeft {
	-webkit-animation-name: 'slideOutLeft';
	-webkit-animation-duration: 1s;
}
body.landscape .slideOutLeft {
	-webkit-animation-name: 'slideOutLeftWide';
	-webkit-animation-duration: 1s;
}

@-webkit-keyframes 'slideOutLeft' {
	from{ left: 0; }
	to{ left: -320px; }
}
@-webkit-keyframes 'slideOutLeftWide' {
	from{ left: 0; }
	to{ left: -480px; }
}