body { color: #888; background: #f2f2f2; font-family: Georgia, sans-serif;}
#header, #nav { position: absolute;}
#header { background: #f2f2f2; width: 169px; height: 622px; left: 0; top: 26px; z-index: 20;}
#page, #posts { position: relative; padding: 120px 0 20px 169px; z-index: 1;}
#page { height: 528px;}

h1, h1 a { position: absolute; left: 15px; width: 24px; height: 32px; }
h1 a { left: 0;}
h1 img { position: absolute; top: 0; left: 0;}

#nav { width: 145px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 7px 0 4px 0; margin: 94px 0 0 15px;}
#nav li { float: left; margin-bottom: 3px;}
#nav li a { float: left; width: 145px; height: 12px; background-position: 0 0; background-repeat: no-repeat; text-indent: -5000px; overflow: hidden;}
.about #about a, .projects #projects a, .testimonials #testimonials a, .contact #contact a, .blog #blog a,
#nav li a:hover { background-position: 0 -12px;}

#about a { background-image: url(/images/site/nav_about.png);}
#projects a { background-image: url(/images/site/nav_projects.png);}
#testimonials a { background-image: url(/images/site/nav_testimonials.png);}
#contact a { background-image: url(/images/site/nav_contact.png);}
#blog a { background-image: url(/images/site/nav_blog.png);}
.blog #blog > a { padding-bottom: 7px; margin: 0 0 7px 0; border-bottom: 1px solid #ddd;}

#blog { padding-top: 7px; margin-top: 4px; border-top: 1px solid #ddd;}
#blog ul { width: 145px; float: left; overflow: auto;}
.blog #blog p { margin-bottom: 6px;}
.blog #blog li.last { margin-bottom: 0;}
.blog #blog li a { background: none; margin: 0; text-indent: 0; font-size: 0.6875em; text-transform: uppercase; font-style: italic; letter-spacing: 0.05em;}
.blog #blog li a.active { color: #555;}
.blog #nav { border-bottom: 0;}

.about #page, .about #footer { width: 994px;}
.contact #page, .projects-index #page, .testimonials #page,
.contact #footer, .projects #footer, .testimonials #footer { width: 1083px;}

.col { width: 258px; float: left;}
#page img { float: left; margin-left: 9px;}
#page .col { margin: 0 18px 0 9px;}
#page .caption { margin: 0 9px 0 0;}
#page .col img { margin: 0 0 1em 0;}
img.clear, .video.clear { clear: left;}

.col { background: #f2f2f2;}

#slideshow { width: 792px; height: 528px; float: left; overflow: hidden;}
#slideshow img { top: 0; left: 0;}
.about #slideshow { width: 700px;}
#scroll #slideshow { background: #fff; height: 528px; float: left; overflow: hidden;}

#projects-list { margin-left: 9px;}
#projects-list li { width: 170px; height: 170px; float: left; margin: 0 9px 9px 0; position: relative;}
#projects-list li img, #testimonial-list li img { position: absolute; top: 0; left: 0; width: 170px; height: 170px; margin: 0; z-index: 10;}
#projects-list li dt, #projects-list li dd, #testimonial-list li dt, #testimonial-list li dd { color: #fff; font-size: 0.6875em; line-height: 1.272em; font-style: italic; text-transform: uppercase; letter-spacing: 0.075em;}
#projects-list li dt a, #testimonial-list li dt a { color: #fff; text-decoration: none;}
#projects-list li dl, #testimonial-list li dl { background: #000; position: absolute; width: 152px; height: 152px; padding: 9px; z-index: 11; opacity: 0.8;}
#projects-list li dl.hover, #testimonial-list li dl.hover { position: absolute;}
#projects-list li a:visited img { display: none;}

#testimonial-list li { width: 258px; float: left; margin: 0 9px 9px 0; position: relative;}
#testimonial-list li img { width: 258px;}
#testimonial-list li dl { width: 240px;}
#testimonial-list li div { width: 258px; height: 170px; float: left; margin-bottom: 9px;}

#scroll li { float: left; margin: 0 9px 0 0;}
#scroll img { margin: 0;}
.hitstate { width: 200px; height: 528px; top: 120px; position: absolute; background: url(/images/site/blank.gif) 0 0; z-index: 100;}
#prev { left: 178px; }
#next { right: 0;}
.button { background-color: #fff; background-position: 50% 50%; background-repeat: no-repeat; position: absolute; top: 249px; width: 55px; height: 30px; text-indent: -5000px;}
#prev .button { background-image: url(/images/site/hb_prev.gif); left: 18px; display: none;}
#next .button { background-image: url(/images/site/hb_next.gif); right: 18px;}
.hover { cursor: pointer;}

#project_nav { float: left; width: 200px; padding-top: 213px;}
#project_nav a { background-color: #fff; background-position: 50% 0; background-repeat: no-repeat; width: 132px; height: 30px; float: left; margin-bottom: 6px; text-indent: -5000px; overflow: hidden;}
#project_nav a:hover { background-position: 50% 100%; }
#prev_project a { background-image: url(/images/site/hb_prev_project.gif);}
#next_project a { background-image: url(/images/site/hb_next_project.gif);}
#start a { background-image: url(/images/site/hb_start.gif);}

body.blog, .blog #header, .blog #footer, .blog div.text, #blog ul { background-color: #f0ede5;}
.blog #header { position: fixed;}
#posts { width: 835px; float: left; margin-left: 5px;}
.entry { width: 835px; float: left;}
.entry img, .text, .video { float: left; margin: 0 5px 10px 5px;}
.video iframe { height: 324px;}
.text { width: 157px; height: 310px; padding: 7px 0; overflow: hidden;}
.blog .text.extended { width: 314px; height: auto; padding: 0 10px 0 0;}
#images { width: 324px; float: left; margin: 0 5px;}

.entry h2 { font-size: 0.9375em; line-height: 1.2em; text-transform: uppercase; font-style: italic; font-weight: normal;}
.entry h2 a { color: #555;}
.entry .date { font-size: 0.625em; line-height: 1.4em; text-transform: uppercase; font-style: italic;}
.entry .date span, .postbox dd span { text-transform: lowercase;}
.entry .author:before { content: "--"; display: block; margin: -9px 0 1px 0;}
.entry p { font-size: 0.6875em; line-height: 1.1em; font-style: normal;}
.text.extended .date { margin-bottom: 2em;}
hr:after { content: '--'; display: block; font-size: 0.6875em; margin-top: -1em;}

#footer { background-color: #f2f2f2; float: left; margin: 80px 0 0 160px; overflow: hidden;}
#footer p { font-size: 0.6875em; text-transform: uppercase; font-style: italic;}
p#copyright { color: #ccc; float: right;}

.blog #footer { width: 658px; padding-top: 7px; margin: 0 5px; border-top: 1px solid #999;}
#pagination { float: left;}
.blog p#copyright { color: #aaa;}

#post_categories { width: 668px; clear: left;}
#related { width: 658px; float: left; border-top: 1px solid #999; margin: 0 5px;}
#related ul.postbox { width: 668px; float: left; margin: 0 -5px;}

.postbox li, h2.category { width: 157px; height: 157px; float: left; margin: 0 5px 10px 5px; position: relative;}
.postbox li { cursor: pointer;}
.postbox dl { color: #fff; background-color: #000; width: 127px; height: 137px; padding: 10px 15px; top: 0; left: 0; position: absolute; z-index: 10;}
.postbox dl.hover { position: absolute; z-index: 10;}
.postbox img { width: 157px; height: 157px; top: 0; left: 0; position: absolute;}
h2.category span { width: 137px; height: 137px; padding: 10px; top: 0; left: 0;}

h2.category { color: #fff; background-color: #808285; font-weight: normal; text-align: center;}
h2.category span { text-align: center; display: table-cell; vertical-align: middle;}

.postbox dt, h2.category { font-size: 0.875em; line-height: 1.1428em; text-transform: uppercase; font-style: italic;}
.postbox dd { font-size: 0.75em; line-height: 1.333em; text-transform: uppercase; font-style: italic;}
.postbox dd:before { content: "–"; display: block;}
.postbox dt a,
.postbox dt a:hover { color: #fff;}

input { font-family: georgia, serif;}
.textfield input { color: #777; width: 18em; font-size: 1em; background: #fff; border: 0; margin: 10px 0 0 0; padding: 5px 2px;}
#submit input { color: #999; background: #ddd; border: 0; padding: 5px; cursor: pointer;}

p, .projects-show dt, .projects-show dd { font-size: 0.75em; font-style: italic; line-height: 1.25em; margin-bottom: 1em;}

.col h2 { color: #666; font-size: 0.75em; line-height: 1.0833em; font-weight: normal; font-style: italic;}
.about h2 { margin-bottom: 1em;}
#related h3 { font-size: 0.6875em; line-height: 1.2727em; font-style: italic; text-transform: uppercase; margin: 7px 0 10px 0;}
.col h3 { font-size: 0.75em; line-height: 1.25em; font-weight: normal; font-style: italic;}
.projects .col p, .projects-show dt, .projects-show dd { margin: 0;}
.projects .col p:before, #projects-list li dt:after, #testimonial-list li dt:after, .projects-show dt:before { content: '--'; display:block; }
.projects .caption p:first-child:before { content: '';}
.col p a { border-bottom: 1px solid #aaa;}

a, a:link { color: #888; text-decoration: none;}
a:hover { color: #555;}
.more a { text-transform: uppercase;}
.more a:hover { color: #555;}