/*
	Author: Dale Kachele
	Website: http://upperhandcreation.com
*/

/* RESET & BASIC PAGE SETUP */
* { margin: 0; padding: 0; }
html {overflow-y: scroll; }
body { font: 62.5% "Lucida Grande", Verdana, Arial, sans-serif; background: url(../images/body-bg.jpg); margin-top: 50px; }

ul { list-style: none inside; }
p { font-size: 1.5em; line-height: 1.7em; }
a { color: maroon; outline: none; }
a:hover { text-decoration: none; }
a img { border: none; }

/* TOOLBOX */
.floatleft { float: left; }
.floatright { float: right; }
.clear { clear: both; }
.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }
.padded { padding: 8px; }

/* STRUCTURE */
div#page-wrap { background: #FFF; border-color: black; border-style: solid; border-width: 5px; position: relative; width: 891px; margin: 0 auto; }
	div#header { height: 151px; background: url(../images/header.jpg) no-repeat; }
		div#header #logo { padding: 4px 10px 0px 0px; }
	ul#nav li { display: inline; }
		ul#nav li a { display: block; float: left; height: 70px; width: 175px; text-indent: -9999px; }
			ul#nav li a.home { background: url(../images/home.jpg) no-repeat top center;}
			ul#nav li a.services { background: url(../images/services.jpg) no-repeat top center;}
			ul#nav li a.events { background: url(../images/events.jpg) no-repeat top center;}
			ul#nav li a.clients { background: url(../images/clients.jpg) no-repeat top center;}
			ul#nav li a.contact { background: url(../images/contact.jpg) no-repeat top center;}
				ul#nav li a:hover, ul#nav li a:active { background-position: center center; }
			body#home ul#nav li a.home { background-position: bottom center; }
			body#services ul#nav li a.services { background-position: bottom center; }
			body#events ul#nav li a.events { background-position: bottom center; }
			body#clients ul#nav li a.clients { background-position: bottom center; }
			body#contact ul#nav li a.contact { background-position: bottom center; }
	div#list-wrapper { width: 525px; margin: 0 auto; }
	ul.services { width: 250px; list-style-type: none; padding: 0px; }
		ul.services li { margin-bottom: 8px; font-size: 14px; background-image: url(../images/note.png); background-repeat: no-repeat; padding-left: 1.2em; }
	div#content-wrap { border-top-color: #7f7f7f; border-top-style: solid; border-top-width: 1px; margin: 0 auto; width: 891px; }
		div#content { background: url(../images/band.jpg) no-repeat bottom center; margin-top: 15px; padding: 0px 25px 35px 25px; }
		div#content h1 { font-size: 2.2em; margin-bottom: 16px; color: #C33; }
		div#content p { margin-bottom: 1.4em; padding-left: 5px; }
			div#left { width: 590px; }
			div#right { width: 225px; }
	div#footer { background: #666; padding: 8px 0px 8px 0px; }
		div#footer p { font-size: 1.2em; }
		div#footer a { font-size: 1.2em; color: #FFF; text-decoration: none; padding: 0px 8px 0 8px; }
			div#footer a:hover, div#footer a:active { font-size: 1.2em; color: #EEE; text-decoration: underline; }
	div#cleft, div#cright { position: relative; width: 47%; }
	div#cright { float: right; }
	div.client { margin: 0 auto; position: relative; width: 350px; height: 219px; background-position: top center; }
	div.client h2 { text-indent: -9999px; }
	div.bio { text-align: center; width: 75px; height: 56px; color: #333; background-image: url(../images/quote.png); background-repeat: no-repeat; }
	div.bio p { padding-top: 22px; padding-right: 10px; margin:0 auto; }
	div#hah { background: url(../images/clients/holding-air-hostage.jpg) no-repeat }
	div#tce { background: url(../images/clients/the-crash-engine.jpg) no-repeat }
	div#db { background: url(../images/clients/destructo-bunny.jpg) no-repeat }
	div#vm { background: url(../images/clients/veronica-may.jpg) no-repeat }
	object.player { left: 6px; bottom: 2px; position: absolute; text-align: center; margin-right: auto; margin-left: auto; margin-bottom: 0px; margin-top: 0px;}
	div.player { left: 6px; bottom: 4px; position: absolute; text-align: center; margin-right: auto; margin-left: auto; margin-bottom: 0px; margin-top: 0px;}
	div.event { margin-right: auto; margin-left: auto; margin-bottom: 30px; margin-top: 0px; background-color: #f2f2f2; border-color: #999999; border-style: solid; border-width: 2px; width: 90%; }
	div.event h1, div.event p { padding-left: 12px; }
	div.event img { padding: 9px; }
	div.map { width: 300px; float: right;}
	div#partner-wrapper { width: 800px; margin: 0 auto; }
	div.partner { width: 250px; float: right; margin: 0 auto; text-align: center; }
	div#success { margin-left: auto; margin-bottom: 15px; margin-right: auto; margin-top: 2px; border-color: #4c4c4c; border-width: 2px; border-style: solid; width: 600px; background: #eee; color: green; }
	div#success p { padding-top: 20px; padding-bottom: 20px; }
	div#fail { margin-left: auto; margin-bottom: 15px; margin-right: auto; margin-top: 2px; border-color: #4c4c4c; border-width: 2px; border-style: solid; width: 600px; background: #eee; color: red; }
	div#fail p { padding-top: 20px; padding-bottom: 20px; }
	div#process { margin-left: auto; margin-bottom: 15px; margin-right: auto; margin-top: 2px; border-color: #4c4c4c; border-width: 2px; border-style: solid; width: 600px; background: #eee; text-align: center; }
	div#process p { padding-top: 20px; padding-bottom: 20px; }

/* FANCY EFFECTs */
#upperleft { left: -40px; top: -40px; position: absolute; }
#lowerleft { left: -40px; bottom: -40px; position: absolute; }
#upperright { right: -40px; top: -40px; position: absolute; }
#lowerright { right: -40px; bottom: -40px; position: absolute; }