html {
	font-family: Segoe UI, Myriad Pro, Tahoma, Arial, sans-serif;
	background: url("images/background.jpg") top no-repeat;
	background-color: #000000;
	color: #FFF;
	margin: 0;
	padding: 0;
}
body {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	padding: 0;
}
html, body {height: 100%}

#container {
	margin: 0 auto;
	width: 1000px;
	min-height: 100%;
}
* html #container {height: 100%}

#content {
	position: absolute;
	top: 50%;
	margin-top: -370px;
	padding: 0;
	width: 1000px;
	height: 700px;
	overflow: hidden;
}

/*** NAV WHEEL ***/
#navWheel {
	margin: 25px auto 0 auto;
	padding: 0;
	width: 360px; height: 360px;
	background: url("images/logoLarge.png") center no-repeat;
}
#navWheel ul {margin: 0; padding: 0}
#navWheel li {
	float: left;
	margin: 0; padding: 0;
	width: 180px; height: 180px;
	list-style: none;
}
#navWheel a {
	display: block;
	margin: 0; padding: 15px;
	width: 150px; height: 150px;
	cursor: pointer;
}
#aboutWheelBtn {background: url("images/navWheelAbout.png") top no-repeat}
#servicesWheelBtn {background: url("images/navWheelServices.png") top no-repeat}
#folioWheelBtn {background: url("images/navWheelFolio.png") top no-repeat}
#contactWheelBtn {background: url("images/navWheelContact.png") top no-repeat}
#aboutWheelBtn:hover, #servicesWheelBtn:hover, #folioWheelBtn:hover, #contactWheelBtn:hover {background-position: bottom}

#navWheelSelection {
	float: left;
	margin: 0 auto; padding: 0;
	width: 1000px;
	font-family: Century Gothic, Segoe UI, Myriad Pro, Tahoma, Arial, sans-serif;
	font-size: 16pt;
	font-weight: bold;
	text-align: left;
	color: #666;
}
#navWheelSelection p {
	margin: 0 auto;
	padding: 0;
	width: 160px;
}


/*** HEADER ***/
#header {float: left; width: 1000px; height: 101px}
#logo {float: left; margin-left: 30px}
#logo img {float: left; margin: 0; padding: 0; border: none}
#logo #logoText {padding-top: 32px; border: none}
/* NAV BAR */
#nav {
	float: right;
	margin: 0; padding: 0;
	margin-right: 30px;
	width: 455px; height: 101px;
	font-family: Century Gothic, Segoe UI, Myriad Pro, Tahoma, Arial, sans-serif;
}
#nav ul {
	display: table-cell;
	margin: 0; padding: 0;
	width: 455px; height: 101px;
	list-style: none;
	vertical-align: bottom;
}
#nav li {
	float: left;
	margin: 0; padding: 0;
	width: 91px; height: 46px;
}
#nav a {
	display: block;
	margin: 0; padding: 0;
	padding-right: 1px;
	width: 90px; height: 46px;
	color: #777;
	text-decoration: none;
	text-align: center;
	font-size: 10pt;
	font-weight: bold;
	line-height: 24px;
	background: url("images/navBtn.png") 0 +26px no-repeat;
}
#nav a:hover {color: #FFF; background-position: 0 -20px}
#nav a#about.current {background: url("images/navBtnAbout.png") 0 +16px no-repeat}
#nav a#services.current {background: url("images/navBtnServices.png") 0 +16px no-repeat}
#nav a#folio.current {background: url("images/navBtnFolio.png") 0 +16px no-repeat}
#nav a#contact.current {background: url("images/navBtnContact.png") 0 +16px no-repeat}
#nav a#about.current, #nav a#services.current, #nav a#folio.current, #nav a#contact.current {color: #FFF; line-height: 9px}
	

/*** HOME ***/
#home, #homeHeaders, #homeHeaders p, #welcome, #recentWork, .recent, #webSpecial, #webSpecialLeft, #webSpecialRight {float: left; margin: 0; padding: 0}
#home {
	width: 1000px; height: 193px;
	margin-top: 50px;
	font-size: 12pt;
	border-top: solid 1px #808080;
	border-bottom: solid 1px #808080;
	background: url("images/black50.png") repeat;
}
#homeHeaders {
	width: 1000px; height: 35px;
	line-height: 35px;
	background: url("images/black50.png") repeat;
}
#homeHeaders p {
	width: 293px;
	margin-left: 30px;
}
#welcome, #recentWork, #webSpecial {
	width: 293px; height: 135px;
	margin-left: 30px;
	font-size: 9pt;
	text-align: justify;
}
/* WELCOME */
#welcome a {color: #FF8800; text-decoration: none}
#welcome a:hover {text-decoration: underline}
/* RECENT WORK */
.recent, .recentLast {
	float: left;
	margin: 0; padding: 0;
	margin-right: 10px;
	width: 91px;
}
.recentLast {margin: 0}
#recentWork a {
	display: block;
	padding-top: 5px;
	width: 91px;
	color: #FFF;
	text-decoration: none;
}
#recentWork a:hover {color: #FF8800}
#recentWork .recent01, #recentWork .recent02, #recentWork .recent03 {
	margin: 0; padding: 0;
	margin-top: 14px;
	width: 91px; height: 110px;
	cursor: pointer;
}
#recentWork .recent01 {background: url("images/recentWork01.jpg") top no-repeat}
#recentWork .recent02 {background: url("images/recentWork02.jpg") top no-repeat}
#recentWork .recent03 {background: url("images/recentWork03.jpg") top no-repeat}
#recentWork .recent01:hover, #recentWork .recent02:hover, #recentWork .recent03:hover {background-position: bottom}
/* WEB SPECIAL */
#webSpecialLeft {
	width: 150px; height: 135px;
	margin-right: 20px;
}
#webSpecialRight {width: 123px; height: 135px}
#webSpecialForm #name, #webSpecialForm #email {
	float: left;
	margin: 0; padding: 0;
	margin-bottom: 2px;
	width: 121px; height: 21px;
	line-height: 21px;
	text-indent: 5px;
	font-size: 10pt;
	color: #666;
	border: solid 1px #333;
	background: url("images/black70.png") repeat;
}
#webSpecialForm #submit {
	float: right;
	margin: 0; padding: 0;
	margin-top: 4px;
	width: 68px; height: 20px;
	font-family: Segoe UI, Myriad Pro, Tahoma, Arial, sans-serif;
	text-align: center;
	font-size: 9pt;
	color: #666;
	cursor: pointer;
	border: none;
	background: url("images/webSpecialBtn.png") top no-repeat;
}
#webSpecialForm #submit:hover {color: #FFF; background-position: bottom}


/*** MAIN ***/
#main, #pageSwatch {float: left; margin: 0; padding: 0}
#main {
	width: 1000px; height: 597px;
	font-size: 9pt;
	border-top: solid 1px #808080;
	border-bottom: solid 1px #808080;
	background: url("images/black50.png") repeat;
}
#pageSwatch {width: 1000px; height: 3px}
#pageSwatch.about {background: #FF0000}
#pageSwatch.services {background: #FF4800}
#pageSwatch.folio {background: #FF8400}
#pageSwatch.contact {background: #FFC600}

/* EMAIL BOX */
#emailBox {
	float: left;
	margin: 0; padding: 0;
	width: 455px; height: 45px;
	font-size: 9pt;
	line-height: 45px;
	text-align: right;
	background: url("images/emailBar.png") top no-repeat;
}
#emailBox a {
	color: #FFF;
	text-decoration: none;
	padding-right: 30px;
}
#emailBox a:hover {color: #FF8800; text-decoration: underline}
#emailBox img {padding-right: 10px}

#emailBox.about, #emailBox.folio {margin-left: 30px}
#emailBox.services, #emailBox.contact {margin-left: 515px}

/* ABOUT PAGE */
#aboutBody, #aboutPhoto {
	float: left;
	margin: 0; padding: 0;
	margin-left: 30px;
	width: 455px;
}
#aboutBody {text-align: justify}
#aboutBody .header {color: #FF8800; font-size: 16pt}
#aboutBody a {color: #FF8800; text-decoration: none}
#aboutBody a:hover {text-decoration: underline}

#aboutPhoto {margin-top: 30px; height: 519px}
#aboutPhoto h2, #aboutPhoto p {margin: 0; padding: 0; text-align: right}
#aboutPhoto h2 {margin-top: 3px; font-size: 12pt}

/* FOLIO PAGE */
#folioArea {
	float: left;
	margin: 30px 0 30px 0; padding: 0;
	width: 1000px; height: 489px;
}
#noFlash {
	display: table-cell;
	margin: 0; padding: 0;
	width: 1000px; height: 489px;
	text-align: center;
	vertical-align: middle;
}
#noFlash img {border: 0}

#clientBox {
	float: left;
	margin: 0; padding: 0;
	margin-left: 30px;
	width: 455px; height: 45px;
	line-height: 45px;
	font-size: 9pt;
	text-align: left;
	background: url("images/clientBar.png") top no-repeat;
}
#clientBox p {margin: 0; padding: 0 0 0 30px}

/* SERVICES PAGE */
#service {
	float: left;
	margin: 30px 0 0 30px; padding: 0;
	width: 293px; height: 519px;
	text-align: justify;
}
#service img {border: none}
#service .header {color: #FF8800; font-size: 16pt}
#service a {color: #FF8800; text-decoration: none}
#service a:hover {text-decoration: underline}

/* CONTACT PAGE */
#contactInfo, #contactFormArea {
	float: left;
	margin: 0; padding: 0;
	margin-left: 30px;
	width: 455px; height: 519px;
}
#contactInfo {text-align: justify}
#contactInfo h2 {margin-bottom: 0; padding-bottom: 0}
#contactInfo .header {color: #FF8800; font-size: 16pt}
#contactInfo a {color: #FFF}
#contactInfo a:hover {color: #FF8800}

#contactFormArea {margin-top: 30px}
#contactForm {
	float: left;
	margin: 0; padding: 30px;
	width: 395px; height: 310px;
	background: url("images/black50.png") repeat;
}
#contactForm label {
	float: left;
	margin: 0; padding: 0;
	margin-right: 10px;
	width: 65px; height: 21px;
	line-height: 21px;
	text-align: right;
}
#contactForm input, textarea {
	float: left;
	margin: 0; padding: 0;
	padding-left: 5px;
	margin-bottom: 10px;
	width: 313px;
	font-family: Segoe UI, Myriad Pro, Tahoma, Arial, sans-serif;
	font: Segoe UI, Myriad Pro, Tahoma, Arial, sans-serif;
	font-size: 10pt;
	line-height: 21px;
	color: #FFF;
	border: solid 1px #333;
	background: url("images/black70.png") repeat;
}
#contactForm input {height: 21px}
#contactForm #submit, #contactForm #reset {
	float: right;
	margin: 0; padding: 0;
	margin-left: 10px;
	width: 96px; height: 23px;
	text-align: center;
	font-size: 10.5pt;
	color: #666;
	cursor: pointer;
	border: none;
}
#contactForm #submit {background: url("images/contactSubmitBtn.png") top no-repeat}
#contactForm #reset {background: url("images/contactResetBtn.png") top no-repeat}
#contactForm #submit:hover, #contactForm #reset:hover {color: #FFF; background-position: bottom}
#status {
	float: left;
	margin-left: 75px;
	width: 320px;
	font-size: 9pt;
	color: #FF8800;
	text-align: center;
}


/*** FOOTER ***/
#footer {
	width: 100%;
	height: 39px;
	margin: 0; padding: 0;
	margin-top: -40px;
	color: #FFFFFF;
	font-size: 10pt;
	text-align: center;
	line-height: 35px;
	border-top: solid 1px #444444;
	background: url("images/black50.png") repeat;
}
#footer p {margin: 0 auto; padding: 0}
#footer a {
	padding-left: 15px;
	padding-right: 15px;
	color: #666;
	text-decoration: none;
	border-left: 1px solid #FFF;
}
#footer a:hover {color: #FFF}
.copyright {
	padding-right: 15px;
}


/*** CLASSES ***/
strong {font-weight: normal}
em {font-style: normal}
.gold {color: #FF8800}
.kerningGold {
	color: #FF8800;
	letter-spacing: -3pt;
}
.kerningWhite {
	color: #FFF;
	letter-spacing: -2pt;
}
.lineBreak {margin-top: 0px; padding-top: 0px}