/*** GENERAL STYLES ***/

html, body {height: 100%;}
body {background: #000 url(../images/bkg.gif) top center; text-align: center; margin: 0; padding: 0;}
body, th, td, h1, h2, h3, h4, h5, h6, select, input, textarea {font-family: arial, helvetica, sans-serif; font-size: 11px; color: #fff;}
body, th, td, h1, h2, h3, h4, h5, h6 {line-height: 17px;}
form, h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0;}

img, table, fieldset {border: 0;}
ul, ul li {list-style: none; margin: 0; padding: 0;}
p {margin: 0 0 1.5em 0;}
a {color: #fff; cursor: pointer; cursor: hand;}
a:hover {color: #fff;}

.hide {display: none;}
.small {font-size: 10px;}
.large {font-size: 12px;}
.spacer {float: none; clear: both; height: 1px; overflow: hidden;}


/*** STRUCTURAL STYLES ***/

#top {height: 100px; background: #000;}
#top h2 {position: relative; width: 950px; height: 80px; background: url(../images/top.gif); margin: 0 auto;}
#top h2 a {display: block; width: 950px; height: 80px; overflow: hidden; line-height: 200px;}

#outer {position: relative; width: 750px; margin: 30px auto; text-align: left; padding: 0 0 30px 200px;}

#nav {position: absolute; left: 0; top: 0; width: 170px; height: 92px; background: url(../images/nav.gif); padding: 14px 0 0 0;}
#nav a {display: block; width: 170px; height: 20px; overflow: hidden; text-indent: -80px;}
#nav a:hover, #nav .on a {background: url(../images/nav.gif);}

#navp a:hover, #navp.on a {background-position: -170px -14px;}
#navs a:hover, #navs.on a {background-position: -170px -34px;}
#nava a:hover, #nava.on a {background-position: -170px -54px;}
#navc a:hover, #navc.on a {background-position: -170px -74px;}

h3 {font-size: 13px; margin-bottom: 30px; text-transform: uppercase; letter-spacing: 2px;}
p, dd {color: #e5e5e5;}

.cbox {background: #2b2b2b url(../images/cbox.gif) bottom no-repeat;}
.cboxpad {padding: 30px; background: url(../images/cboxpad.gif) top no-repeat; height: 200px; min-height: 200px;}
	html>body .cboxpad {height: auto;}
.cbox p {line-height: 17px; font-size: 12px;}
.cbox p strong {color: #fff;}

#me {float: right; margin: 0 0 30px 30px;}
#extras {position: relative; top: 10px; height: 100px; background: url(../images/extras.gif);}
#resume, #work {position: absolute; left: 90px; top: 35px; width: 220px;}
#work {left: 450px;}
#extras h3 {display: none;}
#extras li {padding-left: 10px; background: url(../images/bullet.gif) 0 6px no-repeat; margin-bottom: 2px;}

.cbox h2 {width: 430px; height: 12px; overflow: hidden; line-height: 40px; border-bottom: 1px solid #555; background: url(../images/services.gif) no-repeat; margin-top: 35px;}
#development {background-position: 0 -36px;}
#other {background-position: 0 -72px;}
dl {width: 430px; margin: 15px 0; padding: 0; font-size: 13px; line-height: 20px;}
dt {float: left; clear: left; margin: 0 8px 0 0; padding: 0; font-weight: bold; color: #fff;}
dd {margin: 0; padding: 0;}

#favorites {float: right; position: relative; width: 220px; height: 320px; background: url(../images/favorites.gif);}
#favorites h3 {display: none;}
#project, #partner {width: 180px; position: absolute; left: 21px; top: 75px; line-height: 17px;}
#partner {top: 201px;}

.pbox {position: relative; height: 190px; background: url(../images/pbox.gif); padding: 30px 30px 0 380px; margin-bottom: 20px;}
.pimg {position: absolute; left: 20px; top: 20px; width: 320px; height: 180px; z-index: 4;}
.plink {position: absolute; left: 20px; top: 20px; width: 320px; height: 180px; overflow: hidden; line-height: 500px; background: url(../images/open.gif) right top no-repeat; z-index: 5;}
.pbox h3 {margin-bottom: 15px;}
.pbox p {margin: 0; padding: 5px 0 5px 76px; line-height: 15px; background: url(../images/pboxheads.gif) 0 0 no-repeat;}
.pbox strong {display: none;}
.pbox p.style {background-position: 0 -70px;}
.pbox p.agency {background-position: 0 -140px;}
.pbox p.mywork {background-position: 0 -210px;}
.pbox p.neato {background-position: 0 -280px;}
.pbox p.link {background-position: 0 -350px;}
.pbox p.link a {color: #eee; text-decoration: none; padding-right: 10px; background: url(../images/pboxlink.gif) right .75ex no-repeat;}
.pbox p.link a:hover {text-decoration: underline;}

#pleft {position: absolute; left: 0; top: 136px; width: 170px; text-align: center; font-size: 10px;}
#pbott {position: relative; float: left; padding: 0 57px 0 64px;}
.pagination {height: 26px; line-height: 26px; overflow: hidden;}
.pagination a {float: left; width: 28px; height: 26px; text-align: center; background: url(../images/pagination.gif); margin-right: 7px; text-decoration: none;}
.pagination a:hover, .pagination a.on {background-position: -28px 0;} 
.pagination .prevlink, .pagination .nextlink {position: absolute; top: 0; width: 57px; height: 26px; background: url(../images/prevnext.gif); line-height: 100px; margin: 0; float: none;}
.pagination .prevlink {left: 0;}
.pagination .nextlink {right: 0; background-position: -57px 0;}
.pagination .prevlink:hover {background-position: 0 -26px;}
.pagination .nextlink:hover {background-position: -57px -26px;}
.pagination .prevlink.off {background-position: 0 -52px !important;}
.pagination .nextlink.off {background-position: -57px -52px !important;}

#contactform {width: 350px; padding: 30px 0 40px 120px; margin: 0;}
#contactform label {display: block; font-weight: bold; text-transform: uppercase;}
#contactform input, #contactform textarea {width: 100%; border: 1px solid #a0a0a0; margin: 3px 0 8px 0; color: #000;}
#contactform textarea {height: 100px;}
#contactsubmit {float: right; width: 57px; height: 26px; background: url(../images/send.gif); overflow: hidden; line-height: 100px; cursor: pointer; cursor: hand;}
#contactsubmit:hover {background-position: 0 -26px;}

#footer {clear: both; text-align: left; color: #444; line-height: 70px; font-size: 10px;}

#fade {display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; filter: alpha(opacity=80); -moz-opacity: .8; opacity: .8; z-index: 10;}
#largeimg {display: none; position: absolute; left: 0; top: 0; width: 100%; padding-top: 20px; text-align: center; z-index: 20;}
#largeimg div {position: relative; margin: 0 auto; width: 800px; height: 600px; border: 10px solid #fff; background: #000;}
#largeimg .close {position: absolute; right: 0; top: 0; width: 800px; height: 600px; background: url(../images/close.gif) right top no-repeat; overflow: hidden; line-height: 1500px;}
#largeimg .prev {position: absolute; left: 0; bottom: 0; width: 19px; height: 17px; background: url(../images/prev.gif) no-repeat; overflow: hidden; line-height: 50px;}
#largeimg .next {position: absolute; right: 0; bottom: 0; width: 19px; height: 17px; background: url(../images/next.gif) no-repeat; overflow: hidden; line-height: 50px;}