body, span.left, span.right, span.center, div#footer div { background: #BFBFBF url(/images/gears.png) center top fixed no-repeat; }

body { margin: 0; color: #DFDFDF; font: 13px/20px "Lucida Grande", Arial, sans-serif; }
h1 { font: bold italic 35px/35px Georgia, serif; text-align: center; }
h2 { font: bold italic 25px/25px Georgia, serif; text-align: center; }
h3 { font: bold italic 18px/18px Georgia, serif; padding-bottom: 20px; }
h1, h2, h3 { margin: 0; color: white; }
p, ul { margin: 0; padding-bottom: 30px; }
img { display: block; margin: 0 auto; }
a { font-weight: bold; color: white; }

div { background: #7F7F7F url(/images/background.png); }
div#nav { }
div#nav > div { line-height: 50px; text-align: right; max-width: 800px; padding: 0 20px; margin: 0 auto; }
div#nav div#logo { float: left; font: bold italic 35px/50px Georgia, serif; }
div#nav a { text-decoration: none; }

div#flash_notice, div#flash_alert, div#flash_error {
	color: black; line-height: 30px; text-align: center;  border: solid 1px black; margin-bottom: 40px;
	box-shadow: 0 2px 4px #3F3F3F; -moz-box-shadow: 0 2px 4px #3F3F3F; -webkit-box-shadow: 0 2px 4px #3F3F3F;
}
div#flash_notice { background: #AFA; }
div#flash_alert, div#flash_error { background: #FAA; }

div#title { background: url(/images/header_border.png) center bottom; }
div#title > div { background: url(/images/header_border.png) center top; }
div#title h1 { line-height: 100px; padding: 0; color: black; }

div#header { background: url(/images/header_border.png) center; }
div#header > div { background: url(/images/header.png) center no-repeat; height: 364px; }
div#content > div { max-width: 800px; padding: 40px 20px 0 20px; margin: 0 auto; }
div#content h1 { padding-bottom: 40px; margin-top: -40px; }
div#content h2 { padding: 100px 0 40px 0; }
div#authors { color: #BFBFBF; font-style: italic; text-align: center; padding: 100px 20px 30px 20px; }
div#footer { background: url(/images/footer_border.png) center top repeat-x; }
div#footer > div { max-width: 851px; margin: 0 auto; }
div#footer > div > div { background: url(/images/footer.png) center top repeat-x; height: 300px; }
div#player_movement { width: 565px; margin: 0 auto; }
span.left { display: block; float: left; margin-right: 20px; }
span.right { display: block; float: right; margin-left: 20px; }
span.center { display: inline-block; }

div#game { width: 800px; height: 600px; background: #DFDFDF; border: 1px solid black; overflow: hidden; margin: 0 auto 40px auto; box-shadow: 0 0 5px black; -moz-box-shadow: 0 0 5px black; -webkit-box-shadow: 0 0 5px black; }
div#game * { background: none; }

a.button b { font-size: 150%; }
a.button {
	font-size: 80%; line-height: 130%; font-weight: normal; text-align: left; color: white; text-decoration: none;
	outline: none; display: inline-block; padding: 15px 55px 10px 15px; border: 1px solid black;
	margin: 0 10px 30px 10px;
	border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;
	background: #5F5F5F; background: -webkit-gradient(linear, left top, left bottom, from(#6F6F6F), to(#4F4F4F)); background: -moz-linear-gradient(#6F6F6F, #4F4F4F);
}
a.button:hover {
	background: #6F6F6F; background: -webkit-gradient(linear, left top, left bottom, from(#7F7F7F), to(#5F5F5F)); background: -moz-linear-gradient(#7F7F7F, #5F5F5F);
}
a.button:active {
	background: #4F4F4F; background: -webkit-gradient(linear, left top, left bottom, from(#3F3F3F), to(#5F5F5F)); background: -moz-linear-gradient(#3F3F3F, #5F5F5F);
}
a.button span {
	float: right;
	margin: -2px -42px 0 0;
	display: block;
	width: 26px;
	height: 32px;
	background: url(/images/arrow.png);
}
a.disabled.button, a.disabled.button:hover, a.disabled.button:active {
	opacity: 0.5;
	background: #5F5F5F; background: -webkit-gradient(linear, left top, left bottom, from(#6F6F6F), to(#4F4F4F)); background: -moz-linear-gradient(#6F6F6F, #4F4F4F);
}
div#buttons { text-align: center; }

input[type=text], input[type=password] { width: 300px; background: #CFCFCF; border: 1px solid black; padding: 5px 3px; box-shadow: inset 0 1px 2px #3F3F3F; -moz-box-shadow: inset 0 1px 2px #3F3F3F; -webkit-box-shadow: inset 0 1px 2px #3F3F3F; }
input[type=text]:focus, input[type=password]:focus { outline: none; background: white; }
input[type=submit] {
	color: white;
	font-size: 15px;
	padding: 10px 30px;
	font-weight: bold;
	border: 1px solid black;
	border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;
	background: #5F5F5F; background: -webkit-gradient(linear, left top, left bottom, from(#6F6F6F), to(#4F4F4F)); background: -moz-linear-gradient(#6F6F6F, #4F4F4F);
}
input[type=submit]:hover {
	background: #6F6F6F; background: -webkit-gradient(linear, left top, left bottom, from(#7F7F7F), to(#5F5F5F)); background: -moz-linear-gradient(#7F7F7F, #5F5F5F);
}
input[type=submit]:active {
	background: #4F4F4F; background: -webkit-gradient(linear, left top, left bottom, from(#3F3F3F), to(#5F5F5F)); background: -moz-linear-gradient(#3F3F3F, #5F5F5F);
}

div#new_level { margin-top: 20px; }