body {
	background: black;
	background: -webkit-gradient(linear, 0 0, 100 480, from(rgb(0,0,0)), to(rgb(96,96,120)));
	margin: 0px 0px 0px 0px;
	text-align: center;
}

body div {
	margin: 1px auto 1px auto;
}

* {
	-webkit-user-select: none;
}

div.error {
	color: #eeeeee;
}

img {
	display:block;
	border:none;
	padding:none;
	margin: 0 auto 0 auto;
	opacity: 0.0;
}

.controls {
	opacity: 0.0;
	z-index: -1;
	-webkit-transition: opacity .4s ease-out;
}

.controls.active {
	opacity: 1.0;
	z-index: 99;
	-webkit-transition: opacity .4s ease-out;
}

ul#controls {
	display: block;
	position: absolute;
	top: 50px;
	left: 10px;
	width: 270px;
	background: rgba(255,255,255,0.8);
	background: -webkit-gradient(linear, 0 0, 100% 100%, from(rgba(255,255,255,0.8)), to(rgba(180,180,180,0.8)));
	border: 1px solid white;
	-webkit-box-shadow: 3px 3px 7px rgba(5,5,0,0.5);
	
	-webkit-border-top-left-radius: 5px 5px;
	-webkit-border-bottom-left-radius: 5px 5px;
	-webkit-border-top-right-radius: 5px 5px;
	-webkit-border-bottom-right-radius: 5px 5px;
	color: #111111;
	text-align: left;
	list-style: none;
	font: 18px/24px Helvetica, sans-serif;
	text-indent: -22px;
	font-style: italic;
	margin: 4px 0 4px 0;
	padding: 0 4px 0 24px;
}

ul#controls li {
	padding-top: 2px;
	padding-bottom: 2px;
}

@media screen and (device-width: 480px) {
	body div {
		width:480px;
	}
	
	img {
		max-height:300px;
		max-width:480px;
	}
}

@media screen and (device-width: 320px) {
	body div {
		width: 320px;
	}
	
	img {
		max-width: 320px;
		max-height:356px;
	}
}

@media screen and (device-width: 1024px) {
	body div {
		width: 1024px;
	}
	
	img {
		max-height:748px;
		max-width:1024px;
	}
}

@media screen and (device-width: 768px) {
	body div {
		width: 768px;
	}
	
	img {
		max-height:1004px;
		max-width:768px;
	}
}

#fadingout {
	opacity: 0;
    -webkit-animation-name: fadeout;
	-webkit-animation-duration: .25s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: alternate;
	-webkit-animation-timing-function: ease-out;    
}

#fadingin {
	opacity: 1;
	-webkit-transition: all .5s ease-in;
}

#exitstageleft {
	-webkit-transform: translate(-700px,0);
	-webkit-transition: all 0.3s ease-in-out;
}

#exitstageright {
	-webkit-transform: translate(+700px,0);
	-webkit-transition: all 0.3s ease-in-out;
}

#exittosky {
	-webkit-transform: translate(0,-700px);
	-webkit-transition: all 0.3s ease-in-out;
}

#exittoearth {
	-webkit-transform: translate(0,+700px);
	-webkit-transition: all 0.3s ease-in-out;
}

#exitzoomout {
	-webkit-transform: scale(0.25);
	-webkit-transition: all 0.75s ease-in-out;
}

@-webkit-keyframes fadeout
{		
	0% {
		opacity: 1;
	}
	
	100% {
		opacity: 0;
	}
}

@-webkit-keyframes fadein
{
	0% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
}