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: 760px; padding: 90px 0 40px 0; line-height: 1.6; margin: 0 auto;}
#home #content {width: 100%; float: none; margin-right: 0; overflow: auto;}
#home #content h1 {margin-left: 20px;}

a {outline: none; text-decoration: none;}

h1 {margin: 0; color: #666; background: #fff; padding: 4px 10px; font-weight: normal; margin: 0 0 30px; font-family: 'TitilliumText14L250wt'; line-height: 1; font-size: 220%;}
h2 {font-size: 150%; margin: 0; color: #666; background: #fff; padding: 4px 10px; font-weight: normal; margin: 30px 0 0; font-family: 'TitilliumText14L250wt'; line-height: 1.1;}
h3 {font-family: 'TitilliumText14L250wt'; font-weight: normal; font-size: 120%; margin: 10px 0 4px; line-height: 1;}
h4 {font-family: 'TitilliumText14L250wt'; font-weight: normal; font-size: 100%; margin: 10px 0 0; line-height: 1;}
hr {height: 2px; border: 2px dotted #ddd; border-width: 2px 0 0; margin: 15px 0;}

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

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

.text {width: 300px;}
textarea {width: 460px; height: 200px;}
.text, textarea {padding: 4px; border: 1px solid #ccc;}
label {float: left; width: 80px; text-align: right; margin-right: 14px;}
.submit {font-family: 'TitilliumText14L250wt'; font-size: 120%; border: 0; text-transform: lowercase; color: #fff;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
behavior: url(../inc/PIE.htc);}
.submit:hover {cursor: pointer;}

#close {display: none; position: fixed; top: 50%; right: 50%; margin: -260px -490px 0 0; z-index: 4000; padding: 0; cursor: pointer !important;}
#close2 {display: none; position: fixed; top: 50%; right: 50%; margin: 220px 440px 0 0; z-index: 4000; padding: 0; color: #aaa; cursor: pointer !important; font-size: 90%;}
#close2:hover {color: #666;}
#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: left; 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 {position: fixed; top: 10px; left: 80px; z-index: 3000; 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: 34px; right: 10px;}
#nav, #nav li {margin: 0; padding: 0; list-style: none;}
#nav li, #nav a {float: left;}
#nav a {font-family: 'TitilliumText14L250wt'; margin-left: 20px; text-decoration: none; font-size: 120%;}
#nav a:hover, #home #nav #nav-home a, #expertise #nav #nav-expertise a, #story #nav #nav-story a, #thoughts #nav #nav-thoughts a, #contact #nav #nav-contact a {color: #fff;}

#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;}

/* blog styles */
#thoughts #content {width: 100%; overflow: auto;}
#blogmain {position: relative; color: #666; margin-right: 10px;}
#blogmain h1, #blogmain h2, #blogmain p {padding: 0; background: none;}
#blogmain .post, #blogmain .widget-area {background: #fff; padding: 10px;}
h1.entry-title {margin-bottom: 0;}
.entry-meta, .entry-utility {font-family: 'TitilliumText14L250wt'; font-size: 95%;}
.listwrap .post, .listwrap .widget-area {width: 300px; float: left; margin: 0 0 20px 20px; position: relative;}
#thoughts #content h1.page-title {background: none; margin-left: 20px !important;}
#blogmain .widget-area {color: #aaa;}
#blogmain .widget-area ul, #blogmain .widget-area ul li {margin: 0; padding: 0; list-style: none;}
#blogmain .widget-area ul li {margin-bottom: 15px;}
.widget_search label {display: none;}
.widget_search .text {width: 220px;}
.comments-link, .commentnum {width: 42px; height: 33px; float: left; overflow: hidden;}
.comments-link a, .commentnum {display: block; padding-top: 3px; height: 30px; font-weight: bold; text-align: center; background: url(../img/ic-bubble.png) no-repeat; color: #fff;}
.commentnum {margin: -4px 8px 0 0; padding-top: 3px; height: 30px;}
.comments-link a:hover {color: #fff;}
.tag-links {float: right; width: 200px; padding-left: 48px; border-left: 1px solid #ddd; overflow: auto;}
.postwrap .tag-links {width: 552px; border-left: 0; float: none; display: block;}
.tag-links .icon {width: 33px; height: 33px; float: left; margin: 2px 0 0 -40px; background: url(../img/ic-tags.png) no-repeat;}

.commentlist {list-style: none; margin: 2em 0; padding: 0;}
.commentlist li {margin-bottom: 2em; margin-top: 3em; border-top: 2px dotted #ddd;}
.commentlist ul, .commentlist li {list-style: none;}

.commentdata, .comment-awaiting-moderation {font-size: 80%; color: #999;}
.comment-awaiting-moderation {color: #900;}
.commentdata cite {font-style: normal;}
.comment-body {border-bottom: 2px dotted #ddd;}

#thoughts #content .postwrap .post {margin: 0 0 40px 0; background: #fff; padding: 10px;}
.postwrap .widget-area {position: absolute; top: 0; left: 0; width: 300px;}

#thoughts #content .postwrap, #thoughts #content .err404wrap {width: 630px; margin: 0 auto; padding-left: 340px;}
#thoughts #comments {background: #fff; padding: 10px;}

#commentformwrap {padding: 10px;}
#commentformwrap h3, #comments-title {margin: 0; font-size: 140%;}
#comments-title {margin-top: 10px;}
#commentform .required {float: left; margin-left: -12px;}
#commentform .comment-notes .required {float: none; margin: 0;}
#commentform .form-allowed-tags {display: none;}
#commentform .submit {display: block; margin: 0 auto;}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    #footerouter {position: relative;}
}

@media only screen and (max-device-width: 480px) {
    #footerouter {position: relative;}
}

@media only screen and (max-device-height: 500px) {
    #footerouter {position: relative;}
}