/* GENERAL STYLES */
@import "reset.css";
html { background: url(/images/document.jpg) 0 0 repeat; height: 100%; width: 100%; }
body { background: url(/images/body.jpg) 0 0 repeat-x #f5f5f5; color: #444444; font: normal 12px/24px "Lucida Grande", Verdana, sans-serif; margin: 0 auto; min-width: 1020px; padding: 0; width: 100%; }
/*---------------------------
=Header Section
---------------------------*/
#header { background: url(/images/header.png) 420px bottom no-repeat; height: 133px; margin: 0 auto; position: relative; width: 960px; }
#brand a { background: url(/images/brand.png) 0 0 no-repeat; display: block; height: 57px; left: 0; overflow: hidden; position: absolute; text-indent: -10000px; top: 43px; width: 315px; }
#navigation { float: right; }
#navigation li { float: left; margin: 0 0 0 12px; padding: 43px 0 0 0; }
#navigation li.active { background: url(/images/nav_active.gif) center -1px no-repeat; }
#navigation li a { color: #cecece; display: block; font: normal 22px/57px "Lucida Grande", Verdana, sans-serif; padding: 0 12px 0 12px; text-transform: uppercase; }
#navigation li a:hover, #navigation li.active a { background: #2e2e2e; border: 3px solid #3f3f3f; line-height: 51px; padding: 0 9px 0 9px; }
#navigation li.active a { color: #ffffff; }
#header form { background: url(/images/nav_active.gif) center -1px no-repeat; padding: 12px 0 0 0; position: absolute; right: 0; top: -100px; }
#header fieldset { background: #2e2e2e; border: 3px solid #3f3f3f; padding: 12px 16px; }
#header label { clear: both; color: #cecece; display: block; float: left; font: 10px/24px "Lucida Grande", Arial, sans-serif; margin: 0 0 1em 0; padding: 0 8px 0 0; text-align: right; text-transform: uppercase; word-spacing: .05em; width: 85px; }
#header input[type='text'], #header input.text { border: 1px solid #b3b3b3; font: 10px/10px "Lucida Grande", Arial, sans-serif; margin: 0 0 1em 0; padding: 3px 6px; }
#header input.submit { background: #ffffff; border: 1px solid #b3b3b3; clear: both; cursor: pointer; float: left; font: 10px/10px "Lucida Grande", Arial, sans-serif; margin: 0 0 0 93px; padding: 4px 4px 1px 4px; text-transform: uppercase; }
/*---------------------------
=Maincontent Section
---------------------------*/
#maincontent-wrapper { height: auto; margin: 0 auto; padding: 60px 0 90px 0; position: relative; width: 960px; }
body#work #maincontent { width: 960px; }
#maincontent { float: left; height: auto; margin: 0 auto; padding: 0; position: relative; width: 640px; }
#maincontent h2 { color: #bdbdbd; font: normal 44px/44px "Times New Roman", Times, serif; line-height: 44px; margin: 0 0 .5em 0; text-transform: uppercase; vertical-align: bottom; }
#maincontent p { font: normal 12px/22px "Lucida Grande", Arial, sans-serif; margin: 0 0 1.5em 0; word-spacing: .05em; }
#maincontent a { background: #e4e4e4; color: #444444; padding: 1px; }
#maincontent a[rel=external] { background: url(/images/external-icon.png) right center no-repeat #e4e4e4; color: #444444; padding: 1px 20px 1px 1px; }
#maincontent a[rel=external]:hover { background: url(/images/external-icon.png) right center no-repeat #cccccc; color: #111111; padding: 1px 20px 1px 1px; }
#maincontent a:hover { background: #cccccc; }
#maincontent-wrapper hr { background: #ebebeb; color: #ebebeb; height: 1px; left: 0; margin: 0; padding: 0; position: absolute; top: 97px; width: 960px; }
#train { bottom: 0; cursor: pointer; display: block; left: 0; margin: 0; position: absolute; }
#maincontent-wrapper a#music_link { background: none; border: 0; bottom: 0; clear: both; display: block; height: 0; left: 0; line-height: 14px; margin: 0; overflow: hidden; padding: 0; position: absolute; text-transform: uppercase; width: 100px; }
#maincontent-wrapper a#music_link img { margin: 0 20px 0 0; }
#maincontent dl dt { clear: both; color: #00ccff; font: 24px/24px "Lucida Grande", Verdana, sans-serif; margin: 0 0 1em 0; padding: 0 0 0 615px; }
#maincontent dl dd { margin: 0 0 25px 0; padding: 0 0 93px 615px; position: relative; }
#maincontent dl dd h3 { color: #2b2b2b; font: 14px/14px "Lucida Grande", Verdana, sans-serif; margin: 0 0 .5em 0; }
#maincontent dl dd img { border: 3px solid #b3b3b3; left: 0; position: absolute; top: -48px; }
#maincontent dl dd p { line-height: 16px; }
#maincontent dl dd p em.comment { color: #aaa; font-style: italic; }
body#work #maincontent dl dd a { background: none; display: block; }
body#work #maincontent dl dd a.no-block { background: url(/images/external-icon.png) right center no-repeat #e4e4e4; display: inline; }
body#work #maincontent dl dd a.no-block:hover { background: url(/images/external-icon.png) right center no-repeat #cccccc; }
body#work #maincontent dl dd a.visit { background: #b3b3b3; color: #ffffff; cursor: pointer; display: block; float: left; font: 16px/32px "Lucida Grande", Arial, sans-serif; height: auto; margin: .5em 0 0 0; padding: 0 8px 0 8px; text-transform: uppercase; width: auto; }
body#work #maincontent dl dd a.visit:hover { background: #444444; }
#tooltip { background: #000; color: #ffffff; display: none; padding: 4px; position: absolute; text-transform: uppercase; }
#contact_form fieldset { padding: 1em 0 0 0; }
#maincontent label { clear: both; color: #111111; display: block; float: left; margin: 0 0 1em 0; padding: 0 8px 0 0; text-align: right; text-transform: uppercase; word-spacing: .05em; width: 85px; }
#maincontent input[type='text'], #maincontent input.text, #maincontent input#input_name, #maincontent input#input_email { border: 1px solid #b3b3b3; margin: 0 0 1em 0; padding: 3px 6px; }
#maincontent textarea { border: 1px solid #b3b3b3; margin: 0 0 1em 0; padding: 3px 6px; width: 360px; }
#maincontent input.submit { background: #ffffff; border: 1px solid #b3b3b3; cursor: pointer; font: 12px/12px "Lucida Grande", Arial, sans-serif; margin: 0 0 0 93px; padding: 6px 6px 3px 6px; text-transform: uppercase; }
#maincontent a.navGenerator { background: #ffffff; border: 1px solid #b3b3b3; clear: both; cursor: pointer; display: block; float: left; font: 12px/12px "Lucida Grande", Arial, sans-serif; margin: 0 0 6px 0; padding: 6px 6px 3px 6px; text-transform: uppercase; }
#maincontent input.submit:hover, #maincontent a.navGenerator:hover { background: #eeeeee; }
#maincontent span.lineCount { background: #AF0000; color: #ffffff; padding: 3px; }
.more-work h3 { color: #00ccff; font: 24px/24px "Lucida Grande", Arial, sans-serif; margin: 0 0 .5em 0; padding: 0; }
.more-work ul { list-style: inside disc; margin: 0 0 2em 0; }
/*---------------------------
=Sidebar Section
---------------------------*/
#sidebar { float: right; padding: 15px 0 0 0; position: relative; width: 223px; z-index: 500; }
#sidebar h2 { color: #00ccff; font: 24px/24px "Lucida Grande", Arial, sans-serif; margin: 0 0 1em 0; padding: 0; }
#sidebar a { background: none; display: block; margin: 0; padding: 0; }
#sidebar ul { margin: 0; padding: 0; }
#sidebar ul li { display: block; margin: 0 0 1em 0; padding: 0; }
#sidebar a:hover { background: none; }
#sidebar ul li a { border: 3px solid #b3b3b3; display: block; height: 100px; margin: 0; overflow: hidden; padding: 0; position: relative; width: 211px; vertical-align: top; }
#sidebar ul li a strong { background: #b3b3b3; bottom: -24px; color: #ffffff; display: block; font-weight: normal; position: absolute; text-align: center; width: 211px; }
#sidebar ul li a:hover strong { background: #444444; }
#sidebar ul li a img { height: 100px; margin: 0; overflow: hidden; padding: 0; width: 211px; vertical-align: top; }
#sidebar a:hover { border: 3px solid #444444; }
#sidebar a.view_all { background: #b3b3b3; color: #ffffff; display: block; float: left; font: 16px/28px "Lucida Grande", Arial, sans-serif; height: auto; margin: .5em 0 0 0; padding: 0 8px 0 8px; text-transform: uppercase; width: auto; }
#sidebar a.view_all:hover { background: #444444; }
/*---------------------------
=Footer Section
---------------------------*/
#footer { margin: 0 auto; position: relative; width: 960px; }
#footer p { background: url(/images/brace_right.gif) right 0 no-repeat; color: #eeeeee; padding: 10px 0 20px 0; position: absolute; text-transform: uppercase; top: 20px; width: 960px; }
#footer p a { color: #00ccff; }
#footer p a:hover { color: #6FE3FF; }
#footer p em { background: url(/images/brace_left.gif) 0 0 no-repeat; display: block; float: right; margin: 0; padding: 10px 0 10px 24px; position: absolute; right: 24px; top: 2px; }
/*---------------------------
=Classes
---------------------------*/
.clear { clear: both; }
img.left{ border: 3px solid #666666; display: block; float: left; margin: 0 18px 6px 0; }
span.error { color: red; font-style: italic; vertical-align: top; }