/* type */
body { font-family: Helvetica Neue, Arial, Helvetica, sans-serif; font-size:12px; line-height:1.5; }
h2 { font-size:1.5em; line-height:1; margin:0 0 1em 0; }
p {  font-size:1em; line-height:1.5; margin:0 0 1.5em 0;  }
p.note { font-size:.9167em; line-height:1.6364; margin:0 0 1.6364em 0; font-style:italic; }
form label { font-weight:bold; text-align:right; }
form input.text, form textarea { font-family: Helvetica Neue, Arial, sans-serif;  font-size:1em; line-height:1.5;  }
form input.submit { font-family: Helvetica Neue, Arial, sans-serif; font-size:1em; line-height:2.25; font-weight:bold; }
form p.error { font-weight:bold; }
dl { margin:0 0 1.5em 0; }
dl dt { font-size:0.75em; line-height:2; margin:0; text-transform:uppercase; }
dl dd { font-size:1em; line-height:1.5; margin:0; }
a.button { line-height:2.25; font-weight:bold; }
strong { font-weight:bold; }
em { font-style:italic; }

/* layout */
div#header { height:81px; margin:0 0 -18px 0; }
div#header ul.nav { position:absolute; left:50%; top:0; width:198px; height:63px; margin:0 0 0 225px;}
div#header ul.nav li { position:absolute; top:18px; height:27px; }
div#header ul.nav li.work { left:9px; width:55px; }
div#header ul.nav li.about { left:64px; width:57px; }
div#header ul.nav li.contact { left:120px; width:68px; }
div#header ul.nav li a { display:block; width:100%; height:0; padding:27px 0 0 0; overflow:hidden; }
div#header h1 { position:absolute; left:50%; top:0; width:432px; height:0; margin:0 0 0 -432px; padding:63px 0 0 0; overflow:hidden; }

div#about { padding:36px 18px 36px 50%; overflow:hidden; }
div#about img { display:inline; float:left; margin:-18px 18px -18px -432px; }
div#about h2, div#about p { width:612px; margin-left:-198px; }

div#contact { padding:36px 18px 36px 50%; }
div#contact h2, div#contact p { padding:0 0 0 216px; }
div#contact form { width:828px; margin:0 0 0 -414px; }
div#contact form div { clear:both; overflow:hidden; padding:0 0 0.75em 0; }
div#contact form label { display:inline; float:left; width:198px; line-height:2.25em; padding:0 1.5em 0 0; cursor:pointer; }
div#contact form input.text { display:inline; float:left; width:282px; height:1em; padding:0.5em 3px 0.725em 3px;  }
div#contact form textarea { display:inline; float:left; width:282px; height:10.025em; padding:0.5em 3px 0.725em 3px; }
div#contact form input.submit { margin:0 0 0 216px; height:2.25em; cursor:pointer; }
div#contact form p.error { clear:left; }

div.piece { padding:36px 18px 18px 50%; overflow:hidden; clear:both; }
div.piece div.info { display:inline; float:left; width:180px; padding:0 18px 0 18px; margin:0 0 0 -432px; }
div.piece div.info dl { overflow:hidden; }
div.piece div.info dl dt { display:inline; float:left; clear:left; width:54px; }
div.piece div.info dl dd { display:inline; float:left; clear:none; width:126px; }
div.piece ul.screenshots { display:inline; float:left; width:612px; padding:0 18px 0 18px; margin:0 0 0 -216px;  position:relative; }
div.piece ul.screenshots li { display:inline; float:left; margin:0 0 18px 0; padding:0; position:relative; }
div.piece ul.screenshots li img { display:block; margin:0; }

a.button { display:block; padding:0 9px 0 9px; float:left; }

/* colour */
body { background:#222; }
div#header { background:transparent url(images/header.png) repeat-x 0 0; color:#fff; }
div#header h1 { background:transparent url(images/h1.png) no-repeat 0 0; }
div#header ul.nav { background:transparent url(images/buttons.png) no-repeat 0 0;  }
div#header ul.nav li a { background:transparent url(images/buttons.png) no-repeat 0 0; }
div#header ul.nav li.work a { background-position:-9px -18px; }
div#header ul.nav li.about a { background-position:-64px -18px; }
div#header ul.nav li.contact a { background-position:-120px -18px; }
div#header ul.nav li.work a:hover, div#header ul.nav li.work a:active, div#header ul.nav li.work a.selected  { background-position:-9px -81px; }
div#header ul.nav li.about a:hover, div#header ul.nav li.about a:active, div#header ul.nav li.about a.selected { background-position:-64px -81px; }
div#header ul.nav li.contact a:hover, div#header ul.nav li.contact a:active, div#header ul.nav li.contact a.selected { background-position:-120px -81px; }
div#header a:link, div#header a:hover, div#header a:visited, div#header a:visited:hover { border:none; }
div#about, div#contact { background:#222; color:#eee; }

div#work div.piece { background:#fff url(images/work-item.png) repeat-x 0 0; border-bottom:1px solid #ccc; border-top:1px solid #fff;}
div#work ul.screenshots li { /*background:transparent url(images/shadow.png) repeat-x 0 0;*/ }

a:link { color:#666; border-bottom:1px dotted #666; }
a:visited { color:#333; border-bottom:1px dotted #333;  }
a:hover, a:visited:hover { color:#999; border-bottom:1px dotted #999; }

h2 a:link, h2 a:visited, h2 a:hover, h2 a:visited:hover { border-bottom:none; }

div#contact a:link, div#about a:link { color:#fff; border-bottom:1px dotted #fff; }
div#contact a:visited, div#about a:visited { color:#eee; border-bottom:1px dotted #eee;  }
div#contact a:hover, div#about a:hover, div#contact a:visited:hover, div#about a:visited:hover { color:#ccc; border-bottom:1px dotted #ccc; }


a.button:link, a.button:visited { background:#444 url(images/a.button.png) repeat-x 0 bottom; color:#fff; -moz-border-radius: 6px; -webkit-border-radius: 6px; border:none; }
a.button:hover, a.button:visited:hover { background:#666 url(images/a.button.png) repeat-x 0 bottom; color:#fff; border:none; }

input, textarea { border:none; }
input.submit { background:#ddd; color:#333; }
input.submit:hover { background:#fff; color:#333; }
form p.error { color:#f00;}

/* z-index */
div#header { z-index:9; }
div#about { z-index:8; }
div#work { z-index:7; }
div#work { z-index:6; }