html, body {height: 100%; width: 100%;}
body {margin: 0; padding: 0; font-family: helvetica, sans-serif; font-size: 85%; background: #f2f2f2 url(../img/bg-grid.gif) top right;}

@font-face {
	font-family: 'TitilliumText14L250wt';
	src: url('TitilliumText250wt-webfont.eot');
	src: local('☺'), url('TitilliumText250wt-webfont.woff') format('woff'), url('TitilliumText250wt-webfont.ttf') format('truetype'), url('TitilliumText250wt-webfont.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}

#contentwrap {margin: 60px 0 70px; min-height: 500px; overflow: auto;}
#content {width: 960px; float: right; padding: 90px 0 40px 0; line-height: 1.6; margin-right: 10px;}

a {outline: none;}

h1 {margin: 0; color: #666; background: #fff; padding: 4px 10px; font-weight: normal; margin: 0 0 30px 200px; font-family: 'TitilliumText14L250wt'; line-height: 1.1; font-size: 220%;}
h2 {font-size: 150%; margin: 0; color: #666; background: #fff; padding: 4px 10px; font-weight: normal; margin: 30px 0 0 200px; font-family: 'TitilliumText14L250wt'; line-height: 1.1;}
h3 {font-weight: normal; font-size: 130%; margin: 10px 0 4px; line-height: 1;}
h4 {font-weight: normal; font-size: 100%; margin: 10px 0 0; line-height: 1;}

p {color: #666; background: #fff; padding: 4px 10px; margin: 15px 0 15px 200px;}

.smaller {font-size: 90%;;}

#close {display: none; position: fixed; top: 50%; right: 50%; margin: -277px -480px 0 0; background: #fff; z-index: 4000; padding: 4px 10px; color: #666;  cursor: pointer !important;}
#close:hover {background: #aaa; color: #fff; cursor: pointer !important;}
#bodymask {position: fixed; top: 0; left: 0; height: 100%; width: 100%; background: #000; z-index: 3999; opacity: .70; -moz-opacity: .70; filter:alpha(opacity=70); display: none;}
#projectwrap {position: fixed; top: 50%; left: 50%; width: 960px; height: 500px; background: #fff; z-index: 4000; display: none; margin: -250px 0 0 -480px;}
#project {margin: 0; color: #666; background: #fff url(../img/projectnavbg.gif) 139px 450px no-repeat; padding: 10px; position: relative; height: 480px; overflow: hidden;}
#project h2 {font-family: helvetica, sans-serif; text-align: left; margin: 0; padding: 0; background: none;}
#project h3 {opacity: .50; -moz-opacity: .50; filter:alpha(opacity=50);}
#project p {text-align: left; margin: 20px 0 0; padding: 0; background: none; opacity: .70; -moz-opacity: .70; filter:alpha(opacity=70);}
#project ul, #project li {margin: 0; padding: 0; list-style: none;}
#project .details {position: absolute; top: 10px; left: 10px; z-index: 100; width: 160px; margin: 0; text-align: right; padding: 10px;}
#project .details ul {margin-right: -10px; position: relative;}
#project .details li {background: url(../img/li-details.png) 3px right no-repeat; padding-right: 10px; position: relative; font-size: 90%;}
.white, .white h2, .white p, .white a, .white a:hover {color: #fff;}
.thumbs {float: right;}
.thumbs li {width: 750px; height: 480px; overflow: hidden; position: relative;}
.thumbs img {position: absolute; top: 0; left: 0;}
.thumbs div.ribbon {width: 730px; height: 20px; position: absolute; bottom: 0; left: 0; background: #000; padding: 5px 10px; opacity: .40; -moz-opacity: .40; filter:alpha(opacity=40);}
.thumbs div.text {color: #fff; width: 730px; height: 20px; position: absolute; bottom: 0; left: 0; text-align: right; padding: 5px 10px;}
.frame {position: absolute; top: 0; left: 0; width: 960px; height: 500px; background: url(../img/bg-projectframe.png) no-repeat;}

.miniproject {width: 300px; height: 200px; float: right; margin: 0 0 20px 20px; position: relative; cursor: pointer;}
.miniproject h2 {font-family: helvetica, sans-serif; background: none; margin: 0; font-size: 95%; padding: 10px;}
.expand {position: absolute; top: 0; right: 10px; display: none; font-size: 140%;}
.miniproject:hover .expand {display: block;}
.mask {position: absolute; background: #fff; top: 33px; left: 0; height: 167px; width: 300px; opacity: .30; -moz-opacity: .30; filter:alpha(opacity=30);}
.miniproject:hover .mask {opacity: 0; -moz-opacity: 0; filter:alpha(opacity=0);}
.miniframe {position: absolute; background: url(../img/bg-miniproject.png) no-repeat; top: 33px; left: 0; height: 167px; width: 300px;}

#headerouter {position: fixed; top: 0; left: 0; z-index: 3000; height: 72px; width: 100%; background: url(../img/bg-shimtop.png) bottom left repeat-x;}
#headerwrap {height: 60px; width: 100%;}
#header {width: 960px; height: 50px; float: right;}
#logo {margin: 10px 0 0 53px; width: 141px; height: 41px;}
#logo a {display: block; width: 141px; height: 41px; text-indent: -4000px; background: url(../img/logo.png) no-repeat;}

#nav {position: absolute; top: 37px; right: 0;}
#nav, #nav li {margin: 0; padding: 0; list-style: none;}
#nav li, #nav a {float: left;}
#nav a {height: 18px; background: url(../img/nav.png) no-repeat; text-indent: -4000px; margin-left: 20px;}
#nav #nav-home a {width: 77px; background-position: 0 0;}
#nav #nav-expertise a {width: 109px; background-position: -77px 0;}
#nav #nav-process a {width: 99px; background-position: -186px 0;}
#nav #nav-story a {width: 78px; background-position: -285px 0;}
#nav #nav-scratchpad a {width: 124px; background-position: -363px 0;}
#nav #nav-contact a {width: 94px; background-position: -487px 0;}

#home #nav #nav-home a, #nav #nav-home a:hover {background-position: 0 -18px;}
#expertise #nav #nav-expertise a, #nav #nav-expertise a:hover {background-position: -77px -18px;}
#process #nav #nav-process a, #nav #nav-process a:hover {background-position: -186px -18px;}
#story #nav #nav-story a, #nav #nav-story a:hover {background-position: -285px -18px;}
#scratchpad #nav #nav-scratchpad a, #nav #nav-scratchpad a:hover {background-position: -363px -18px;}
#contact #nav #nav-contact a, #nav #nav-contact a:hover {background-position: -487px -18px;}

#footerouter {position: fixed; bottom: 0; left: 0; z-index: 3000; height: 38px; width: 100%; background:  url(../img/bg-shimbot.png) repeat-x;}
#footerwrap {margin-top: 12px; height: 26px; width: 100%;}
#footer {width: 100%; height: 60px; float: right; position: relative; font-size: 90%;}
#footer a:hover {color: #fff;}
#footer ul, #footer li {margin: 0; padding: 0; list-style: none;}
#footer #copyright {float: right; margin-top: 6px;}
#footer #copyright li {float: left; padding: 0 .6em;}
#footer #copyright li.first {border-left: 0;}

#blocks, #blocks li {margin: 0; padding: 0; list-style: none;}
#blocks {width: 40px; height: 60px; position: fixed; top: 0; left: 0; z-index: 3000;}
#blocks a {display: block; width: 40px; height: 15px; background: url(../img/blocks.gif) no-repeat; text-indent: -4000px;}
#blocks #blk-fresh a {background-position: 0 0;}
#blocks #blk-bold a {background-position: 0 -15px;}
#blocks #blk-pure a {background-position: 0 -30px;}
#blocks #blk-classic a {background-position: 0 -45px;}

#blocks #blk-fresh a:hover {background-position: -40px 0;}
#blocks #blk-bold a:hover {background-position: -40px -15px;}
#blocks #blk-pure a:hover {background-position: -40px -30px;}
#blocks #blk-classic a:hover {background-position: -40px -45px;}

#prevBtn, #nextBtn {display: block; text-indent: -8000px; width: 17px; height: 20px; position: absolute; left: 142px; bottom: 14px; z-index: 4000;}
#nextBtn {left: 168px;}
#prevBtn a, #nextBtn a {display: block; width: 17px; height: 20px; background: url(../img/arrowbutton.gif) no-repeat 0 -20px;}
#nextBtn a {background-position: -17px -20px;}
#prevBtn a:hover {background-position: 0 0;}
#nextBtn a:hover {background-position: -17px 0;}