body {
	color: #61443e;
	font-family: 'Black Ops One', serif;
	font-size: 13px;
	text-align:center;
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

a { color: #a06851; }

.hidden { display: none; }

#container { width: 100%; }

canvas {
	width: 100%;
	height: 100%;
}

#renderer-info {
	position: absolute;
	bottom: 0px;
	left: 170px;
	color: #f08;
	text-align: left;
	background-color: rgba(0, 0, 0, 0.33);
	font-family: monospace;
}

#instructions {
	position: absolute;
	top: 45%;
	width: 100%;
	color: #a50;
	text-align: center;
	font-size: 18px;
	cursor: pointer;
	display: none;
}

#message {
	position: absolute;
	top: 10%;
	left: 10%;
	width: 40%;
	color: #500;
	text-align: center;
	font-size: 32px;
	-webkit-transform: perspective(500px) rotateY(25deg);
	-moz-transform: perspective(500px) rotateY(25deg);
	-o-transform: perspective(500px) rotateY(25deg);
	transform: perspective(500px) rotateY(25deg);
}

#minor-messages {
	position: absolute;
	top: 40%;
	left: 5%;
	color: #800;
	text-align: left;
	font-size: 16px;
	-webkit-transform: perspective(500px) rotateY(40deg);
	-moz-transform: perspective(500px) rotateY(40deg);
	-o-transform: perspective(500px) rotateY(40deg);
	transform: perspective(500px) rotateY(40deg);
}

#hud {
	position: absolute;
	top: 60%;
	left: 5%;
	color: #555;
	text-align: left;
	font-size: 32px;
	-webkit-transform: perspective(500px) rotateY(40deg);
	-moz-transform: perspective(500px) rotateY(40deg);
	-o-transform: perspective(500px) rotateY(40deg);
	transform: perspective(500px) rotateY(40deg);
}

#deathscreen {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(128, 0, 0, 0.5);
	background: -webkit-radial-gradient(ellipse, rgba(128, 0, 0, 0.25), rgba(0, 0, 0, 1));
	background: -moz-radial-gradient(ellipse, rgba(128, 0, 0, 0.25), rgba(0, 0, 0, 1));
	background: -o-radial-gradient(ellipse, rgba(128, 0, 0, 0.25), rgba(0, 0, 0, 1));
	background: radial-gradient(ellipse, rgba(128, 0, 0, 0.25), rgba(0, 0, 0, 1));
	text-align: center;
}

#deathscreen div {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width:60%;
	height: 64px;
	margin: auto;
	color: #c00;
	font-size: 32px;
}

.full { height: 100%; overflow: hidden; }

#positioner {
	-webkit-animation-duration: 10s;
	-moz-animation-duration: 10s;
	 animation-duration: 10s;
	-webkit-animation-name: creditsroll;
	-moz-animation-name: creditsroll;
	 animation-name: creditsroll;
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	 animation-timing-function: linear;
}

#credits h1 {
	color: #107;
	text-shadow: #329 0 0 40px;
	font-size: 48px;
}

#credits h2 {
	color: #43c;
	text-shadow: #76f 0 0 20px;
}

#credits ul {
	list-style-type: none;
	padding: 0;
	width: 300px;
	margin: auto;
}

#credits a,
#credits li {
	color: #226;
}

@-webkit-keyframes creditsroll {
	from { height: 80%; }
	to { height: 0%; }
}

@-moz-keyframes creditsroll {
	from { height: 80%; }
	to { height: 0%; }
}

@keyframes creditsroll {
	from { height: 80%; }
	to { height: 0%; }
}