/*** GENERAL STYLES ***/

body {background: #333; 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: 14px; color: #fff;}
select, input, textarea {color: #000;}
body, th, td, h1, h2, h3, h4, h5, h6 {line-height: 20px;}
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: #bbb;}
a:hover {color: #ddd;}

.hide {display: none;}
.alert {color: #c00;}
.small {font-size: 12px;}
.large {font-size: 13px;}
.nowrap {white-space: nowrap;}

.floatleft {float: left;}
.floatright {float: right;}
.imgleft {float: left; margin: 0 30px 20px 0;}
.imgright {float: right; margin: 0 0 20px 30px;}
.imgborder {border: 1px dotted #333; padding: 10px;}
.textleft {text-align: left;}
.textcenter {text-align: center;}
.textright {text-align: right;}

.spacer {float: none; clear: both; height: 1px; overflow: hidden;}
.hr {float: none; clear: both; height: 1px; overflow: hidden; border-bottom: 1px dotted #333; margin: 2em 0;}
.clear {float: none; clear: both;}

.half {width: 50%;}
.third {width: 33%;}
.twothird {width: 60%;}
.quarter {width: 25%;}
.threequarter {width: 70%;}

.ir {display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
a .ir {cursor: pointer;}


/*** TOP STYLES ***/

#outer {position: relative; width: 990px; margin: 0 auto; text-align: left;}

#top {height: 73px;}
#printlogo {display: none;}
#logo {display: block; position: relative; width: 450px; height: 73px; color: #fff; text-decoration: none; font-size: 30px; font-weight: normal; line-height: 300px; overflow: hidden; text-transform: uppercase; text-indent: 20px; letter-spacing: 2px;}
#logo .ir {background: url(../images/logo.gif);}


/*** NAV STYLES ***/


#nav {position: relative; height: 40px; line-height: 40px; background: #4e4e4e; z-index: 10;}
#nav li {position: relative; float: left; z-index: 10;}
#nav a {display: block; width: 10px; white-space: nowrap; color: #fff; text-decoration: none; padding: 0 20px; text-transform: lowercase; font-family: georgia, serif; font-size: 17px;}
	html>body #nav a {width: auto;}
#nav li.on {background: #404040;}
#nav li:hover, #nav a:hover {background: #222;}

#nav ul li:hover ul {display: block;}
#nav ul ul {display: none; position: absolute; left: 0; top: 40px; z-index: 10; padding: 10px 0; background: #222;}
#nav ul ul li {float: none; line-height: 20px;}
#nav ul ul li a {width: 150px; font-family: arial, helvetica, sans-serif; font-size: 14px; line-height: 20px; padding: 3px 20px;}
#nav ul ul li.on a {background: none;}
#nav ul ul li a:hover {background: #404040;}

#corner1, #corner2, #corner3, #corner4 {position: absolute; width: 10px; height: 10px; z-index: 20; overflow: hidden;}
#corner1 {left: 0; top: 0; background: url(../images/corner1.png);}
#corner2 {right: 0; top: 0; background: url(../images/corner2.png);}
#corner3 {left: 0; bottom: 0; background: url(../images/corner3.png);}
#corner4 {right: 0; bottom: 0; background: url(../images/corner4.png);}


/*** STRUCTURAL STYLES ***/

#main {position: relative; background: #000; overflow: hidden; padding: 40px; z-index: 1; zoom: 1;}
#content {float: left; width: 530px;}
#content.wide {float: none; width: 910px;}
#sidebar {float: right; width: 300px; padding-left: 40px; border-left: 1px dotted #333;}


/*** CONTENT STYLES ***/

#content h1 {font-family: georgia, serif; font-size: 20px; font-weight: normal; margin-bottom: 20px; line-height: 20px;}
#content h2 {font-size: 17px; font-weight: normal; margin: 1.5em 0 .5em; color: #999;}
#content h3 {color: #bbb; line-height: 17px; margin-bottom: 3px;}

#content ul {margin: 1.5em 0;}
#content ul li {padding-left: 15px; background: url(../images/bullet.gif) 5px 7px no-repeat; margin-bottom: 8px;}

body.contact #contenttext {float: left; width: 400px;}
#thephoto {margin-bottom: 20px;}
body.index #thephoto {margin: 0;}


/*** HOME STYLES ***/

body.index #sidebar {float: left; padding: 0; border: 0;}
body.index #sidebar .imgright {margin: 0; float: none; width: 600px; height: 450px;}
body.index #content {float: right; width: 270px; padding-top: 40px;}


/*** PORTFOLIO STYLES ***/

#portfolioleft {float: left; width: 440px; padding-right: 30px; border-right: 1px dotted #333;}
#content h2#portfoliocattitle {padding: 0 10px; margin: 0 10px 10px 0; background: #404040; color: #fff; line-height: 30px; text-align: center; letter-spacing: 1px;}
#portfoliogrid {position: relative; overflow: hidden; margin-bottom: 10px;}
#portfoliogrid img {width: 100px; height: 75px; margin: 0 10px 10px 0;}
#portfoliothumbs {position: absolute; left: 0; top: 0;}
#portfolionav {position: relative; text-align: center; font-family: georgia, serif; margin: 0 95px 0 85px; line-height: 25px; height: 25px;}
#prevlink {position: absolute; left: 0; top: 0;}
#nextlink {position: absolute; right: 0; top: 0;}
#zoomlink {float: right; margin: 0 0 10px 50px;}
#portfolioright {float: right; width: 400px;}
#portfoliopreview {width: 400px; height: 300px;}
#portfolioright h1 {margin-bottom: 10px;}

#fade, #container {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 500;}
#fade {background: #000; filter: alpha(opacity=80); -moz-opacity: .8; opacity: .8;}
#thebox {position: relative; border: 10px solid #fff; background: #fff; margin: 20px auto; padding-top: 40px;}
#thebox h2 {position: absolute; left: 0; top: 0; line-height: 40px; font-size: 20px; font-family: georgia, serif; color: #333; font-weight: normal;}
#thebox #boxclose {position: absolute; right: 0; top: 0; line-height: 40px; font-size: 16px; color: #333;}


/*** NEWS STYLES ***/

.backlink {position: absolute; right: 30px; top: 30px; font-size: 13px;}


/*** TABLE STYLES ***/

table {border-collapse: collapse; margin-bottom: 1.5em;}
th, td {border: 1px solid #ccc; padding: 5px 10px;}
thead th, thead td, .thead th, .thead td, td.thead, th.thead {font-weight: bold; background: #eee;}


/*** FORM STYLES ***/

#contactform {float: right; border-left: 1px dotted #333;}
form div {clear: left; padding-top: 5px;}
form label {position: relative; float: left; width: 90px; padding-right: 20px; text-align: right;}
form .note {display: block; padding-left: 200px; margin-bottom: 5px; font-size: 11px;}
form .req {position: absolute; right: 4px; top: 0; color: #888; font-size: 30px; line-height: 30px;}
form .text input, form textarea {width: 350px;}
form textarea {height: 100px;}
form .checkbox input {vertical-align: middle; width: auto !important;}
form .button input {margin-left: 110px; background: #444; border: solid #222; border-width: 0 2px 2px 0; color: #fff; font-family: georgia, serif; font-size: 19px;}
form .button input:hover {background: #666; cursor: pointer;}


/*** FOOTER STYLES ***/

#footer {font-size: 11px; color: #999; padding-top: 40px;}
#footer a {color: #999; text-decoration: none;}
#footer a:hover {color: #ccc; text-decoration: underline;}