body {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	overflow: hidden;
}
/*
 * MAIN
 */
#container {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	position: absolute;
	top: 0px;
	left: 0px;
	overflow: hidden;
	background-color: black;
	z-index: 0;
}
#stats {
	z-index: 100000;
}
#screen {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	position: absolute;
	top: 0px;
	left: 0px;
	overflow: hidden;
}
#canvas {
	z-index: 2;
	position: absolute;
	top: 0px;
	left: 0px;
}
/*
 * SEAWALL
 * a large 3 section gradient
 */
#seaWall {
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#seaWall #seaWallGradient {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 400%;
	background: #4ba2d1; /* Old browsers */
	background: -moz-linear-gradient(top,  #4ba2d1 0%, #2989d8 22%, #252fc4 28%, #162d89 47%, #180E59 53%, #000000 72%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4ba2d1), color-stop(22%,#2989d8), color-stop(28%,#252fc4), color-stop(47%,#162d89), color-stop(53%,#180E59), color-stop(72%,#000000)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #4ba2d1 0%,#2989d8 22%,#252fc4 28%,#162d89 47%,#180E59 53%,#000000 72%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #4ba2d1 0%,#2989d8 22%,#252fc4 28%,#162d89 47%,#180E59 53%,#000000 72%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #4ba2d1 0%,#2989d8 22%,#252fc4 28%,#162d89 47%,#180E59 53%,#000000 72%); /* IE10+ */
	background: linear-gradient(to bottom,  #4ba2d1 0%,#2989d8 22%,#252fc4 28%,#162d89 47%,#180E59 53%,#000000 72%); /* W3C */
}
/*
INSTRUCTIONS
*/

#instructions {
	width: 170px;
	height: 75px;
	position: absolute;
	background-color: white;
	z-index: 10000;
	left : 70%;
	margin-left: -100px;
	bottom: 10px;
	-moz-border-radius: 5px; /* Firefox */
	-webkit-border-radius: 5px; /* Safari, Chrome */
	border-radius: 5px; /* CSS3 */
	opacity: 0;
}

#instructions .instructions{
	position: absolute;
	left: 5px;
	top: 5px;
	height: 50px;
	width: 160px;
	opacity : 0;
}

#instructions #speakerIcon {
	width: 20px;
	height: 20px;
	position: absolute; 
	left: 0px;
	top: 10px;
}

#instruction1 #instructionArrow{
	position: absolute;
	left: 5px;
	top: 5px;
	height: 50px;
	width: 10px;
	font-size: 20px;
	font-family: 'Sintony', sans-serif;
	color: black;
}
#instruction2 #instructionArrow{
	position: absolute;
	left: 5px;
	top: 5px;
	height: 50px;
	width: 10px;
	font-size: 20px;
	font-family: 'Sintony', sans-serif;
	color: black;
}
#instructions #body {
	position: absolute;
	left: 30px;
	font-size: 11px;
	width: 125px;
	font-family: 'Sintony', sans-serif;
	color: black;
}

#instruction3 #body {
	left: 0px;
	width: 100%;
	text-align: center;
}

#instructions #buttonContainer {
	position: absolute;
	bottom: 0px;
	left: 7px;
}

#instructions .button {
	width: 40px;
	height: 15px;
	margin: 5px;
	float: right;
	border: 1px solid black;
	font-size: 10px;
	font-family: 'Sintony', sans-serif;
	color: black;
	text-align: center;
	cursor: pointer;
}

#instructions .button:hover {
	background-color: #4ba2d1;
	color: white;
}

#instructions .button:active {
	background-color: black;
	color: white;
}

#instructions .buttonDisabled{
	border: 1px solid gray;
	color: gray;
	cursor: default;
}

/*
 * LOADING SCREEN
 */
#loadingScreen {
	width: 100%;
	height: 100%;
	position: absolute;
	opacity: 1;
	top: 0px;
	left: 0px;
	z-index: 10000;
	background: #4ba2d1;
	background: -moz-linear-gradient(top,  #4ba2d1 0%, #2989d8 75%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4ba2d1), color-stop(75%,#2989d8)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #4ba2d1 0%,#2989d8 75%,#252fc4); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #4ba2d1 0%,#2989d8 75%,#252fc4); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #4ba2d1 0%,#2989d8 75%,#252fc4); /* IE10+ */
	background: linear-gradient(to bottom, #4ba2d1 0%,#2989d8 75%,#252fc4); /* W3C */
	overflow: scroll;
}
#loadingScreen #title {
	width: 100%;
	margin-top: 290px;
	font-size: 60px;
	font-family: 'Sintony', sans-serif;
	color: white;
	text-align: center;
}
#loadingScreen #iconHeader {
	position: absolute;
	margin-top: 25px;
	width: 250px;
	height: 250px;
	left: 50%;
	margin-left: -125px;
}
#loadingScreen #explaination {
	width: 680px;
	position: absolute;
	top: 390px;
	left: 50%;
	margin-left: -340px;
	font-size: 16px;
	font-family: 'Sintony', sans-serif;
	color: white;
	text-align: left;
}
#loadingScreen a {
	color: #180E59;
	text-decoration: none;
}
#loadingScreen a:hover {
	color: white;
}
#loadingScreen #loadingBar {
	width: 500px;
	height: 8px;
	position: absolute;
	top: 630px;
	left: 50%;
	margin-left: -250px;
	margin-top: -25px;
	border: #ffffff solid 1px;
	-moz-border-radius: 2px; /* Firefox */
	-webkit-border-radius: 2px; /* Safari, Chrome */
	border-radius: 2px; /* CSS3 */
	overflow: hidden;
}
#loadingScreen #loadedArea {
	width: 0%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: white;
	-moz-border-radius: 1px; /* Firefox */
	-webkit-border-radius: 1px; /* Safari, Chrome */
	border-radius: 1px; /* CSS3 */
}
#loadingScreen #startButton {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	padding-top: 4px;
	font-size: 24px;
	font-family: 'Sintony', sans-serif;
	color: #180E59;
	text-align: center;
	cursor: pointer;
}
/*
 * NOT SUPPORTED
 */

#notSupported {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index: -1000;
	opacity : 0;
}
#notSupported #title {
	width: 100%;
	height: 100px;
	position: absolute;
	top: 20%;
	left: 0px;
	margin-top: -50px;
	font-size: 72px;
	font-family: 'Sintony', sans-serif;
	color: white;
	text-align: center;
}

#notSupported #explaination {
	width: 600px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -300px;
	font-size: 20px;
	font-family: 'Sintony', sans-serif;
	color: white;
	text-align: left;
}

#notSupported a {
	color: #4ba2d1;
	text-decoration: none;
}

/*
 * COCKPIT
 */
#cockpit {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 1000;
}
#cockpit #background {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 10;
}
#cockpit .arrow {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: -1;
}
#cockpit #upArrowTouch {
	position: absolute;
	left: 56.1%;
	top: 84.5%;
	width: 3%;
	height: 8%;
	z-index: 1000;
	opacity: 0;
}
#cockpit #downArrowTouch {
	position: absolute;
	left: 58.8%;
	top: 87.1%;
	width: 3.5%;
	height: 8%;
	z-index: 1000;
	opacity: 0;
}
#cockpit #consoleContainer {
	position: absolute;
	left: 41%;
	bottom: 4%;
	z-index: 0;
	width: 16%;
	height: 20%;
	-webkit-perspective: 200;
	-moz-perspective: 200;
	perspective: 200;
}
#cockpit #console {
	background-color: black;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	-webkit-transform: rotateX(50deg);
	-webkit-transform-origin-y: 100%;
	transform: rotateX(50deg);
	transform-origin-y: 100%;
	-moz-transform: rotateX(50deg);
	-moz-transform-origin-y: 100%;
}
#console  #zoneIndicatorBulb {
	position: absolute;
	left: 0px;
	right: 0px;
	width: 100%;
	height: 100%;
}
#console #depthIndicatorNumbers {
	font-family: 'Sintony', sans-serif;
	font-size: 8px;
	width: 100%;
	color: white;
}
#console #depthIndicator {
	left: 10%;
	position: absolute;
	bottom: 20%;
	width: 30px;
	height: 50%;
	overflow: hidden;
}