@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'FuturaBold';
    src: url('../fonts/futura_bold_bt-webfont.eot');
    src: url('../fonts/futura_bold_bt-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/futura_bold_bt-webfont.woff') format('woff'),
         url('../fonts/futura_bold_bt-webfont.ttf') format('truetype'),
         url('../fonts/futura_bold_bt-webfont.svg#FuturaBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FuturaBook';
    src: url('../fonts/futura_book_bt-webfont.eot');
    src: url('../fonts/futura_book_bt-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/futura_book_bt-webfont.woff') format('woff'),
         url('../fonts/futura_book_bt-webfont.ttf') format('truetype'),
         url('../fonts/futura_book_bt-webfont.svg#FuturaBook') format('svg');
    font-weight: normal;
    font-style: normal;
}

html,body{height:100%}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}

body{margin:0;padding:0;color:#999;font-family:Helvetica,Arial,sans-serif;font-size:12px;background-image:url(../images/bg-site.png);background-color:rgb(0,0,0);font-weight:normal;line-height:16px}
a{color:rgb(204,0,0)}
a:hover{color:rgb(255,230,230)}
p,h1,h2,h3,h4,h5,h6,ul{margin:0;padding:0}

h1,h2,h3,h4,h5,h6{font-family:FuturaBook;font-weight:normal}

#contentBG{background:url(../images/bg-content-area.png) repeat-y;width:990px;margin:0 auto}
#wrapper{width:950px;margin:auto;min-height:100%;position:relative}
#wrapper:after{content:".";display:block;height:0;visibility:hidden;clear:both}

#wrapper header#header{height:90px}
#logo{float:left;width:165px;height:60px;margin:20px 35px 10px 105px;background:url(../images/cap-logo.png) no-repeat;display:block;text-indent:-9999px}
#wrapper header#header nav{float:left;width:565px;margin-top:25px;height:50px;border-left:1px solid #900}
#wrapper header#header nav ul{margin:11px 0 11px 35px;font-family:FuturaBook;float:right}
#wrapper header#header nav .mainNav li{display:inline;margin:10px 14px;font-size:11px;text-transform:uppercase}
#wrapper header#header nav .mainNav li:last-child{margin-right:0}
#wrapper header#header nav .mainNav li a{text-decoration:none}
#wrapper header#header nav .mainNav li a.activeLink{color:rgb(255,255,255)}

#socialContent{font-size:11px;float:left;clear:both;width:770px;margin:50px auto 0 105px}
#socialContent h1{font-size:14px;color:rgb(204,0,0)}

#socialContent section{float:left;width:30%;margin-top:50px;min-height:300px}
#socialContent section#middleColumn{margin:50px 5%}

#socialContent section h1 a{display:block;text-decoration:none;font-size:16px;text-transform:uppercase;color:rgb(51,51,51);margin-bottom:10px}
#socialContent section h1 a:hover{color:rgb(255,255,255);text-decoration:underline}

.socialList{list-style:none}
.socialList li{margin:20px 0 30px}
.socialList li a{text-decoration:none;color:rgb(64,64,64)}
.socialIcon{float:left;background:url(../images/icons-social.png) no-repeat;width:18px;height:18px;margin-right:6px}
.twitterIcon{background-position:-36px 0}
.facebookIcon{background-position:-18px 0}
.googleIcon{background-position:-72px 0}
.linkedInIcon{background-position:-36px -18px}
.tumblrIcon{background-position:-18px -18px}
.wordpressIcon{background-position:-54px 0}
.vimeoIcon{}
.foursquareIcon{background-position:-54px -18px}
.pinterestIcon{background-position:-72px -18px}
.blogIcon{background-position:-54px 0}

#content{clear:both;margin:25px auto 0;width:840px;min-height:300px;position:relative}
#content h1{font-size:15px;color:rgb(204,0,0);margin-bottom:6px}
#content h2{font-size:13px;color:rgb(204,0,0)}

footer{background:url(../images/bg-content-bottom.png) no-repeat;clear:both;width:990px;padding:30px 0;margin:0 auto;color:rgb(153,153,153)}
footer:after{content:".";display:block;clear:both;visibility:hidden;height:0}
footer section{float:right;width:200px;margin:0 20px}

#capInfo{clear:left;float:left;font-size:10px;margin-left:20px}
#footerLogo{float:left;background:url(../images/footer-logo.png) no-repeat;width:82px;height:25px;margin:0 0 8px  20px;display:block;}

footer h1{padding:4px 0;border-bottom:1px solid #900;width:200px;font-size:12px}
footer nav .siteLinks{font-size:10px;list-style:none;float:left;margin-right:25px}
footer nav .siteLinks li{margin:4px 0}
footer .socialLinks{font-size:11px;list-style:none;}
footer .socialLinks li{float:left;width:85px;margin:10px 14px 10px 0;}
footer .socialLinks .socialIcon{margin-top:-2px}
footer .socialLinks a,footer nav .siteLinks a{color:rgb(153,153,153);text-decoration:none}
footer .socialLinks a:hover,footer nav .siteLinks a:hover{color:rgb(204,0,0)}

#contactIcon{background:url(../images/icons-social.png) no-repeat 0 -18px;width:16px;height:16px;margin-right:6px;float:left;clear:both}

/* Portfolio Styles */
#content section{}
#content section .leftArrow,#content section .rightArrow{width:15px;height:150px;background:#909;float:left;cursor:pointer}
.portfolioItem{position:relative;top:0;float:left;width:230px;margin:0 15px;height:150px;border:1px solid #fff}

/* work */
#work-sample-container {
position: relative;
width: 760px;
margin: 0 auto;
}

.image-samples li.first {top:0;left:0}
.image-samples li.second {top:0;left:50%;margin-left:-115px}
.third {top:0;right:0}

.image-samples {
overflow: hidden;
position: relative;
}
.image-samples ul{
list-style: none;
width: 100%;
height:200px;
overflow: hidden;
}
.image-samples li{
position: absolute;
list-style: none;
float: left;
width: 230px;
margin: 10px 5px 15px
}

.image-samples li a { display: block; }
.image-samples ul li img { margin: 0 0 15px 0; }
.scrollButtons {
position: absolute;
bottom: 80px;
border: none;
text-indent: -9999px;
width: 12px;
height: 70px;
display: block;
cursor: pointer;
z-index:32;
background:url(../images/portfolio-nav-sprite.png) no-repeat;
}
.scrollButtons.prev {
left: -30px;
background-position: 0 0;
}
.scrollButtons.next {
right: -30px;
background-position: top right;
}

#project-detail-nav{position:fixed;top:200px;left:50%;background:#000;z-index:201;display:none}

#project-detail-nav .close {
position:absolute;
top:0;
right:0;
display: block;
float: right;
width: 24px;
height: 24px;
margin:-11px -11px 0 0;
background:url(../images/portfolio-nav-sprite.png) right -69px no-repeat;
text-indent:-9999px;
}
#project-detail-nav a:hover { text-decoration: underline; }

ul#project-overview-nav li {
display: inline;
margin-right: 10px;
}
ul#project-overview-nav a {
padding: 10px;
color: #000;
text-decoration: none;
}
ul#project-overview-nav a:hover { background-color: #f6f6f6; }
ul#project-overview-nav a.selected { background-color: #fff; }
ul#project-overview-nav a:focus { outline: none; } 


.project-section{position:relative;margin:30px auto;width:760px;display:block}
.project-section:last-child{margin-bottom:0}
#web{z-index:20}
#print{z-index:18}
.activeSection{z-index:30}

#section-background{position:absolute;top:0;width:100%;height:330px;left:0;background:#000;z-index:29}
.project-section h1,.project-section p{margin-left:5px}
.thumbnailImg{width:230px;height:150px;border:1px solid #fff}
#project-detail-overlay{position:absolute;top:0;left:0;right:0;bottom:-14px;z-index:200;background:#333;opacity:0.9;display:none}
.detailImage{max-width:640px;max-height:460px}
#project-detail-nav nav{float:right;margin:0 17px 0 0}
#project-detail-nav nav a,#project-detail-nav nav a.activeSlide{display:block;background:#c00;text-indent:-9999px;float:left;margin:3px;width:13px;height:8px}
#project-detail-nav nav a.activeSlide{background:#600}
#project-detail-nav p{margin:8px 0}
#project-detail-list{overflow:hidden;margin:20px 20px 4px;list-style:none;text-align:center}
#project-detail-footer{background:#222;clear:both;height:30px}
#project-detail-footer a {display:block;float:left;margin:7px 9px;color:rgb(255,255,255);text-decoration:none}
#project-detail-nav h3{float:left;font-size:15px;color:rgb(204,0,0); clear: left; margin: 16px 20px 10px; }
#project-detail-nav h3.pressHead{float:none}
#project-detail-text{ width: 640px; clear: both; margin: 20px 20px 10px; }
#project-detail-list li a{display:block;width:352px;height:268px}
.detailVideo,#project-detail-list li.detailVideo a{display:block;height:360px;width:640px;position:relative;margin:auto}
#player{display:block;height:150px;width:230px;position:relative;margin:auto}
#project-detail-text h1{font-size:18px;color:rgb(204,0,0)}
#project-detail-text h2{font-size:14px;margin-top:8px}
#project-detail-text h3{font-size:13px;margin-bottom:8px;margin-left:0}
#project-detail-text h5{font-size:11px;margin-bottom:8px}

#slideshow{clear:both;margin:auto;width:790px;height:300px;background:#fff;position:relative}
#slideshowOverlay{position:absolute;top:0;left:0;height:300px;z-index:3; width:225px}
#slideshowOverlayBG{background:#000;opacity:0.7;height:300px;width:100%;position:absolute;z-index:2}
#slideshowText{position:absolute;top:120px;left:25px;width:165px;height:100px;z-index:3;color:#ddd}
#slideshowClient{font-weight:bold;font-size:16px}
p#slideshowCopy{margin-top:6px}
#slideshowImg{width:790px;height:300px;position:absolute;top:0;left:0;z-index:2}
#seeMore{display:block;position:absolute;bottom:30px;background:url(../images/btn-see-more.png);height:20px;width:105px;z-index:3;left:25px}
#getCrackin{display:block;position:absolute;bottom:30px;background:url(../images/btn-get-crackin.png);height:20px;width:105px;z-index:3;left:25px}

#sidebar{float:left;margin:25px 40px 0 75px;width:190px}

#content.contentNarrow p,#content.contentNarrow ul{margin:10px 0px 20px 35px}
#content.contentNarrow ul{margin-left:60px}
#content.contentNarrow{float:left;border-left:1px solid #900;min-height:330px;width:565px;clear:none;margin-bottom:50px}
#content.contentNarrow h1,#content.contentNarrow h2{margin:0 20px 0 35px}



#project-detail-text .viewport { width: 620px; position: relative; }
#project-detail-text .overview { list-style: none; position: absolute; left: 0; top: 0; }
#project-detail-text .thumb .end,
#project-detail-text .thumb { background-color:rgb(204,0,0) }
#project-detail-text .scrollbar { position: relative; float: right; width: 6px; }
#project-detail-text .track { background-color: #aaa; height: 100%; width:6px; position: relative; }
#project-detail-text .thumb { height: 20px; width: 6px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#project-detail-text .thumb .end { overflow: hidden; height: 5px; width: 6px; }
#project-detail-text .disable{ display: none; }

#contact-form-overlay{position:fixed;top:0;left:0;right:0;bottom:-14px;z-index:200;background:#333;opacity:0.9;display:none}
#contact-form{position:fixed;top:200px;left:50%;margin-left:-200px;width:400px;background:#000;z-index:201;display:none}
#contact-form .close{position:absolute;top:0;right:0;display:block;float:right;width:24px;height:24px;margin:-11px -11px 0 0;background:url(../images/portfolio-nav-sprite.png) right -69px no-repeat;text-indent:-9999px}

#contact-form-text h1, #contact-form-text p{margin:8px}
#contact-form-text h1{margin-top:20px}
#contact-form-text fieldset{border:1px solid #666;margin:8px}
#contact-form-text legend{font-family:FuturaBold,Arial;color:rgb(204,0,0)}
#contact-form-text .field{position:relative; margin:12px 8px}
#contact-form-text textarea,#contact-form-text input[type="text"]{background-color:#333;border:1px solid #555;border-radius:6px;padding:3px;color:#fff}
#contact-form-text textarea{width:345px;height:120px}
#contact-form-text label{cursor: text;left: 8px;position: absolute;top: 6px;z-index: 5}

#facebookFeed img{max-height:90px}

#twitter_update_list{list-style:none}
#twitter_update_list li{margin:0 0 15px 0}

#tumblrFeed h2{font-size:12px;font-family:Arial,Helvetica,sans-serif;font-weight:normal;color:rgb(204,0,0);margin-bottom:6px}
#tumblrFeed iframe{max-width:100%}
#tumblrFeed p{margin:4px 0}

.tumblr_regular img{width:100%}

#tumblrFeed article,#facebookFeed article,#twitter_update_list li{padding:15px 10px;border-radius:5px;background-color:#131313;margin-bottom:2px;clear:both}
#facebookFeed img.img{float:left;margin-right:8px}

#facebookFeed article:after,#tumblrFeed article:after,.floatDiv:after{content:".";display:block;height:0px;visibility:hidden;clear:both}

.extendedText{display:none}
.hash{text-align:center}

.pressPopUp h1{font-size:16px;font-weight:bold;color:rgb(207,0,0)}
.pressPopUp h2{font-size:14px;font-weight:bold;margin-top:8px}
.overflow{overflow:hidden}
.italic{font-style:italic}
#project-detail-text ul.listItems li{margin:0 0 8px 20px;list-style:disc}