/* -------------------------------------------------------------- 
  
   Boilerplate Screen Styles
   * Version:   0.5 (2007-11-19)
   
-------------------------------------------------------------- */

@import "lib/reset.css";
@import "lib/typography.css";
@import "lib/forms.css";
@import "lib/plugins.css";


/*
-------------------------------------------------------------- */
  
body {background: url(/workspace/images/futurehat-bg.jpg) #222;}


.container {display: inline-block; width:960px; margin:0 auto; clear:both;}
.container:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html .container { height: 1%; }
.container { display: block; }

.left {width:590px; padding:0; float:left;}
.right {width:350px; margin:0 0 0 10px; padding:0; float:left;}

.sub {color:#aaa; font-weight:500; font-size:1.2em; line-height: 1.2em; margin-bottom:10px;}
.copy {color:#f0f0f0; font-size:1.1em;}
.define {padding:10px; background:url(/workspace/images/bg-find.png);}

a.feed {color:#FF441F; font-weight:bold;}
.more_link {display:block; float:right; font-size:1.3em; line-height:1.5em; color:#fff; padding:12px}

.link_block ul{margin:0; list-style:none;}
.link_block ul li a {display:block; padding:5px; border:5px solid #1a1a1a; margin:10px 0; background:#333; font-size:1.1em; font-weight:bold; color:#999;}
blockquote, .blocklist {background:#222; border:1px dashed #333; margin:10px; padding:10px 20px; -moz-border-radius:5px;}
.blocklist li {margin:5px 0 0 0; padding:5px; border-bottom:2px solid #333}
.blocklist li.last {border:none;}

.nav {height: 40px; margin: 0;}
.nav ul{list-style:none; padding:0;}
.nav li {display:block; float:left;}
.nav li a {color:#64829e; display:block; height:20px; width: 100px; text-align: center; padding:10px 0px; font-size:1.2em; font-style: italic; letter-spacing: .08em;}
.nav li a:hover {background:#455361; color:#fff; text-decoration: none;}
#header .nav {background:#191919; margin: 0;}
#header .nav li.active a {background: url(/workspace/images/futurehat-bg.jpg); color:#fff;}
#message .left{padding:0 5px; width:580px;}
#message h2 {color:#fff; font-size:2.6em; line-height:1.3em; margin:65px 0 10px 0;;}
#message .right {float:right;}
#logo {padding-top: 40px; text-align: center;}

#work, #info {padding:40px 0 0 0;}
#work #look {padding:5px; width:580px; height:326px; background:#1a1a1a; overflow: hidden;}
#work #look .sample {width:580px; height:326px; position: absolute;}
#work #look .active {z-index: 5;}
#work #learn .desc{padding:0 0 0 10px;}
#work #learn .copy {height: 218px; font-size: 1.3em;}
#work #learn #find {background:url(/workspace/images/bg-find.png); height:49px; position: relative; margin:0;}
#work #learn #find #find_point {position:absolute; margin:0px 0 0 -22px; width:22px; height:49px; z-index: 999;}
#work #learn #find ul {list-style:none; margin:0;}
#work #learn #find ul li {float:left;}
#work #learn #find ul li a {display:block; color:#333; background:#8b9baa; padding:10px 15px; font-size:1.3em; margin:10px; line-height:.5em;}
#work #learn #find ul li.active a {background:#cdd4db;}

#info #about {width:590px;}
#info #about h3 {margin:0 0 20px 0;}
#info #about p.copy {width:340px;}
#info #about ul li {color:#64829e; font-size:1.4em; font-weight:bold; list-style:disc; margin:5px 0;}
#info .right#contact {background:;}
#info #contact h3 {color:#ccc;}
#info #contact fieldset {margin:10px 0; padding:0; border:0;}
#info #contact input {}
#info #contact input,#info #contact textarea {background:url(/workspace/images/bg-find.png); border:none; color:#999; font-size:1.2em; margin:0 0 5px 0; padding:10px; width:330px;}
#info #contact textarea {height:120px;}
#info #contact .active {color:#333; background:#f5f5f5;}
#info #contact .changed {color:#333; background: #ddd;}
#info #contact .more_link {padding:6px 12px 10px; background:none; color:#fff; text-align:right; padding-right:0; cursor:pointer;}

#footer {background: url(/workspace/images/bg-footer.png); color:#fff; height:88px; padding:12px 0 0 0; margin-top:10px; }
#footer a {color:#fff;}
#footer ul {list-style:none; margin:0;}
#footer ul li {float:left; border-left:2px solid #fff; padding:0 5px;}
#footer ul li.first {border:none;}
#footer #info_list {float:right;}

#portfolio #logo {margin:30px 40px 100px 0;}
#portfolio .right {float: right;}
#portfolio .nav {width:600px;}
#portfolio .nav ul{margin:20px 0;}
#portfolio .nav ul li a{font-style: normal;}
#portfolio .nav ul li.active {background:#ccc;}
#portfolio .nav ul li.active a {color: #333;}
#portfolio .work {margin:0 0 0 0; padding:0;}
#portfolio .work .job {background:#fff; border:5px solid #1a1a1a; width:260px; height:180px; overflow:hidden; float:left; margin:20px 50px 20px 0; list-style:none;}
#portfolio .work .job .wrapper {width: 260px; height:180px; margin-top:155px;}
#portfolio .work .job .inside {height:170px; width: 250px; background:url(/workspace/images/bg-job_desc.png); padding: 5px;}
#portfolio .work .job h3 {font-size:1.4em;}
#portfolio .work .job p.sub {font-size:1.1em; font-weight:bold;}
#portfolio .work .job p.desc {color:#fff; height:80px; padding:5px 0 5px 0; clear:both;}
#portfolio .work .job p.job_links {margin:0; float: right;}
#portfolio .work .job p.job_links a {background:#f5f5f5; display:block; float: left; padding:3px 5px; margin:0 3px 0 0; font-size:.9em;}
#portfolio .work .job p.job_links a.live {background:#64829e; color: #fff; }
#portfolio .work .job .skills {margin:5px 0 0 0; clear:both;}
#portfolio .work .job .skills li {list-style:none; color:#ccc; float:left; font-size:.9em; font-weight:bold; padding:0 4px 0 0;}
#portfolio .work .job .skills li.label {color:#fff;}
#portfolio .work .job .skills li a {color:#aaa;}
#portfolio #art {clear:both; width:310px; height:600px;}
#portfolio .pageNav {clear:both; padding:0 50px;}
#portfolio .pageNav a {display:block; padding:5px; width:100px; text-align:center; background:#eee;}
#portfolio .pageNav .prev {float:left;}
#portfolio .pageNav .next {float:right;}

#proofs {padding:0;}
#proofs .sample.large {width:580px; line-height:0; border:5px solid #1a1a1a;}
#proofs .sample {margin-bottom:10px;}
.sample.small {border:5px solid #1a1a1a; width:275px; height:180px; float:left; overflow:hidden;}
.sample.small.startRow {margin-right:20px;}
#work .left {width:590px;}
#work #desc {padding: 0 0 0 10px;}
#work #desc h2 {font-size:2.6em; line-height:1.3em; margin:0;}
#work #desc h6 {border-bottom:1px solid #333; margin:0 0 5px 0; color:#666;}
#work #desc .sub {font-weight: bold;}
#work a.liveSite {display:block; padding:10px; background:#222; font-size:1.3em; font-weight:bold;}
#work a.liveSite:hover {background:none;}
#testimonial .quote{font-size:1.3em; padding:30px; margin:10px 0; color:#fff; background:#1a1a1a; font-style:italic;}
#testimonial .author{color:#666; font-weight:bold; margin:0; text-align:right;}
#skills {margin:20px 0 0 0;}
#skills h3 {color:#ccc; padding:0 0 10px 0; margin:0;}
#skills ul {margin:0; padding:0; list-style:none;}
#skills ul li a {display:block; padding:5px 10px; margin:0 0 5px 0; background:#222; font-size:1.2em; font-weight:bold;}
#skills ul li a:hover{background:none;}

#blog #days {width:630px;}
#blog .dayContainer {margin:20px 0 0 0;}
#blog .info {border-bottom:5px solid #1a1a1a;}
#blog .info .date {background:#1a1a1a; width:60px; padding:10px 20px 5px; margin:0; color:#aaa; font-size:1.1em; font-weight:bold; text-align:center;}
#blog .assetList {list-style:none; margin:20px 0;}
#blog .item {clear:both; margin:0 0 20px 0;}
#blog .item .assetInfo {background:#454545; float:left; width:90px; height:20px; padding:5px; margin:0 20px 0 0; font-size:1.1em; font-weight:bold; text-align:center; -moz-border-radius:5px;}
#blog .item .assetInfo a {}
#blog .item .asset {padding:7px 0; margin:0 0 0 120px;}
#blog .item .assetIcon {float:left; margin:0 5px 0 0;}
#blog .item h3 {font-size:1.4em; margin:2px 0;}
#blog .item .body {margin:20px 0; color:#f0f0f0; font-size:1.1em;}
#blog .item .tools {}
#blog .item .tools .tags {background:#1a1a1a; padding:11px 10px 0 10px;}
#blog .item .tools h6 {margin:0; font-size:1em; float:left; color:#f0f0f0;}
#blog .item .tools ul {margin:0; list-style:none;}
#blog .item .tools ul li {clear:none; float:left; padding:0 10px; margin:0;}
#blog .item .tools ul li a {font-weight:bold; color:#666;}
#blog .item .tools .share {-moz-border-radius:5px; float:right; background:#181818; padding:9px 10px 10px 10px; color:#666; font-weight:bold; width:80px; text-align:center;}

#blog .comments {margin:20px 0 0 0;}
#blog .comments h6 {margin-bottom:20px;}
#blog .comments ul {margin:0; list-style:none;}
#blog .comments dl dt {background:#1a1a1a; padding:10px;}
#blog .comments dl dt .comm-date{font-weight:normal;}
#blog .comments dl dd {display:block; margin:0; padding:20px 10px 10px 10px;}
#blog .comments dl dd p {margin:0 0 1em 0; color:#ddd;}
#blog .post fieldset {border:none; width:295px; padding:0; float:left;}
#blog .post fieldset ul{list-style:none; margin:0;}
#blog .post input {background:#555; font-size:1.3em; border:0; width:250px; padding:5px; margin:5px 0;}
#blog .post textarea {background:#555; font-size:1em; border:0; margin:5px 0; width:300px; height:163px;}
#blog .post .btn {padding:5px; background: url(/workspace/images/bg-contact.jpg); color:#fff; font-weight:bold; margin:0; border:3px solid #ccc; float:right; width:150px; }
#blog.single .item {width:630px; margin:20px 0 0 0;}
#blog.single .item .icon{padding:6px;}
#blog.single .item h2 {margin:0;}
#blog.single .item .time {display:block; padding:5px 10px; background:#333; -moz-border-radius:5px;}

#sidebar {margin:0 0 0 20px; width:300px;}
#blog #sidebar h2 {font-size:3em; margin:10px 0 0 0;}
#blog #sidebar .sub {font-size:.86em; font-weight:bold;}
#blog #sidebar h6 {margin:10px 0;}
#blog #sidebar #inspiration h6{padding:0 0 0 25px; background:url(/workspace/images/icon-inspiration.png) no-repeat 0 2px}
#blog #sidebar #inspiration ul {border:5px solid #151515; list-style:none; margin:0; height:253px;}
#blog #sidebar #inspiration ul li {overflow: hidden; position: absolute; background:#151515; height:253px}
#blog #sidebar #inspiration ul li img {width:290px;}
#blog #sidebar #inspiration ul li h3{font-size:1em; padding:5px; margin-right:35px; width:250px; line-height:20px;}
#blog #sidebar #inspiration a.button {position:absolute; display:block; width:30px; height:30px; background:#333;}
#blog #sidebar #inspiration a.next { z-index:10; margin:228px 0 0 265px}

#services {margin-top:20px;}
#services h3 {margin-bottom:10px; padding:10px 0; border-bottom:5px solid #333;}
#services #process h4 {margin:0;}

#jargon {}

.rotator .active {z-index: 5;}