html {}

body {
	overflow: hidden; /* Hide scrollbars */
	margin: 0;
	padding: 0;
	background: url(images/background0.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#canvas {
	visibility: hidden;
	margin: 1em 0 0 0;
	border: 1em solid transparent;
	padding: 0;
	-webkit-border-image: url(images/canvas_border.png) 120 130 stretch; /* SAFARI 5*/
	-o-border-image: url(images/canvas_border.png) 120 130 stretch; /* OPERA 13 */
	border-image: url(images/canvas_border.png) 120 130 stretch;
}

#particles {
	visibility: hidden;
	position: absolute;
	width: 1200px; /* set to same width & height as the canvas */
	height: 720px;
	left: 0;
	right: 0;
	top: 2em;
	margin: 0 auto;
}

#fog {
	visibility: hidden;
	position: absolute;
	width: 1200px; /* set to same width & height as the canvas */
	height: 720px;
	left: 0;
	right: 0;
	top: 2em;
	margin: 0 auto;
	opacity: 0.05;
}

div#loading { 
	
	font-family: courier, serif;
	color: white;
	font-size: 1.25em;
	
	text-align: center;
	vertical-align: middle;
	line-height: 720px;
	
	visibility: visible;
	position: absolute;
	left: 0;
	right: 0;
	top: 0.5em;
	margin: 0 auto;
	width: 1200px; /* set to same width & height as the canvas */
	height: 720px;
	background: url(images/background_texture.jpg);
	background-size: 1200px 720px;
	background-repeat: no-repeat;
	background-position: center;
	
	border: 1em solid transparent;
	padding: 0;
	-webkit-border-image: url(images/canvas_border.png) 120 130 stretch; /* SAFARI 5*/
	-o-border-image: url(images/canvas_border.png) 120 130 stretch; /* OPERA 13 */
	border-image: url(images/canvas_border.png) 120 130 stretch;
	
}

div#loading img {
	
	width: 175px; 
	height: 175px;
	display: block;
	position: absolute; 
	opacity: 1; 
	top: 375px; 
	left: 515px; 
	
}

div#mobile_controls {
	visibility: hidden;
	position: relative;
}

@media only screen and (min-device-width: 480px) and (max-device-width: 1280px) and (orientation: landscape) {
	div#mobile_controls {
		visibility: visible;
		position: relative;
	}
	
	div#mobile_controls img {
		position: absolute;
		width: 60px;
		height: 60px;
		cursor: pointer;
	}

	#key_up { top: 0px; left: 50%; transform: translate(-400%, 0%); }
	#key_left { top: 0px; left: 50%; transform: translate(-500%, 0%); }
	#key_right { top: 0px; left: 50%; transform: translate(-300%, 0%); }
	#key_down { top: 0px; left: 50%; transform: translate(-400%, 100%); }

	#key_w { top: 0px; left: 50%; transform: translate(0%, 0%); }
	#key_a { top: 0px; left: 50%; transform: translate(-100%, 100%); }
	#key_s { top: 0px; left: 50%; transform: translate(0%, 100%); }
	#key_d { top: 0px; left: 50%; transform: translate(100%, 100%); }
	
	#key_space { width: 132px !important; top: 0px; left: 50%; transform: translate(125%, 0%); }
	
	#key_i { top: 0px; left: 50%; transform: translate(550%, 0%); }
	#key_save { top: 0px; left: 50%; transform: translate(700%, 0%); }
	#key_load { top: 0px; left: 50%; transform: translate(800%, 0%); }
}	

/* TABLETS - PORTRAIT MODE */
@media only screen and (min-device-width: 480px) and (max-device-width: 1280px) and (orientation: portrait) {
	
	div#mobile_controls {
		visibility: visible;
		position: relative;
	}
	
	div#mobile_controls img {
		position: absolute;
		width: 60px;
		height: 60px;
		cursor: pointer;
	}

	#key_up { top: 0px; left: 50%; transform: translate(-200%, 0%); }
	#key_left { top: 0px; left: 50%; transform: translate(-300%, 0%); }
	#key_right { top: 0px; left: 50%; transform: translate(-100%, 0%); }
	#key_down { top: 0px; left: 50%; transform: translate(-200%, 100%); }

	#key_a { top: 0px; left: 50%; transform: translate(100%, 0%); }
	#key_s { top: 0px; left: 50%; transform: translate(200%, 0%); }
	#key_d { top: 0px; left: 50%; transform: translate(300%, 0%); }
	#key_x { top: 0px; left: 50%; transform: translate(250%, 100%); }
	#key_m { top: 0px; left: 50%; transform: translate(500%, 0%); }
	#key_i { top: 0px; left: 50%; transform: translate(600%, 0%); }
	
}