/* ======================================================================================================================== */
/* =======      ====   ======      =====        ======  ==      ======  =========   =====  ========  ===         ========= */
/* =====   ======   ===   ===  ===   ===  ============  ==   =========  ======   ===   ===  ======  ====  =============== */
/* =====   =====   =====   ==  ====   ==        ======  ===   ========  =====   =====   ===  ====  =====       ========= */
/* =====   =====   =====   ==  ====   ==  ============  ====   =======  =====   =====   ====  ==  ======  ============= */
/* =====   ======   ===   ===  ===   ===  ============  =====   ======  ======   ===   ======    ======  ============= */
/* =======      ====   ======      =====        ======  ==     =======        ===   ==========  ========        ===== */
/* ================================================================================================================= */
/* ===================PHP JS JQUERY CSS HTML CODIFICATION - JADE O'CONNOR ==============     ====      ============ */
/* ===================DESIGN GENIUS - JAMES CULLEN ====================================    optimize    =========== */
/* =====================================================================================     arts    ============ */
/* ===================PLUGINS BY===========================================================  .com   ============ */
/* ===================SCOTT ROBINS===KELVIN LUCK===JON RAASCH===CEDRIC DUGAS=================     ============= */
/* ============================================================================================ ============== */
/* ===== Reset ala Meyer =========== */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}

html { background: rgb(56, 56, 56);} /*default background if js turned off (index.php)*/
body { font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; margin: 0; padding: 0; color: #fff; font-size:12px; line-height: 15px; float:left; background: rgb(56, 56, 56); }

/*======== Typography Basic ======== */
html {font-size:100.01%;}
span {font-size:12px;}
body a {font-size:12px; color:#FFF;}
body a:hover {font-size:12px; text-decoration:underline;}
h1, h2, h3, h4, h5, h6 {font-weight:normal;}
h1 {font-size:24px;font-weight:bold; line-height:44px; margin-bottom:12px; border-top: 1px #FFF solid; border-bottom: 1px #FFF solid;margin-right:16px; }
h2 {font-size:2em; margin-bottom:0.75em;}
h3 {font-size:1.5em; line-height:1; margin-bottom:1em; letter-spacing: -0.5px;}
h4 {font-size:1.2em; line-height:1.25; margin-bottom:1.25em; letter-spacing: -0.5px;}
h5 {font-size:1em; font-weight:bold; margin-bottom:1.5em; letter-spacing: -0.5px;}
h6 {font-size:1em; font-weight:bold; letter-spacing: -0.5px;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
p {/*margin:0 0 1.5em;*/ margin:12px 16px 12px 0; padding:0;}
p img.left {float:left; margin:1.5em 1.5em 1.5em 0; padding:0;}
p img.right {float:right; margin:1.5em 0 1.5em 1.5em;}
a:focus, a:hover {color:#FFF; text-decoration:underline;}
a {color:#FFF; text-decoration:none;}
blockquote {margin:1.5em;color:#333;font-style:italic;}
strong {font-weight:bold;}
/*======= Typography Styling =======*/
.small { font-size:.8em; margin-bottom:1.875em; line-height:1.875em;}
a.small:hover { font-size:.8em; margin-bottom:1.875em; line-height:1.875em;}
.shortwidth { width:425px; margin-top:18px;}
.large {font-size:24px;font-weight:bold; line-height:25px; padding-bottom:13px; margin-right:16px;border-bottom: 1px #fff solid; letter-spacing: -0.5px;}
/* Expander Text Style */.details {font-size:24px;font-weight:bold; line-height:25px; letter-spacing: -0.5px;}
a.large {border-bottom: none; text-decoration:underline;}
a.large:hover {font-size:24px;font-weight:bold; line-height:25px; padding-bottom:13px; margin-right:16px;border-bottom: none; letter-spacing: -0.5px; text-decoration:none;}
.blocktext {font-size:40px;font-weight:bold; line-height:38px; padding:18px 0; margin-right:16px;border-top: 1px #fff solid;border-bottom: 1px #fff solid; }
.hide {display:none;}
.quiet {color:#f5f5f5;}
.loud {font-weight:bold; font-weight:bolder; line-height:187%;}
.highlight {color: rgb(102, 255, 255); font-weight:bold; font-weight:bolder;}
a.highlight:hover {color: rgb(102, 255, 255); font-weight:bold; font-weight:bolder;}
.focusmail {color: rgb(102, 255, 255); font-weight:bold; font-weight:bolder;}
a.focusmail:hover {color: rgb(102, 255, 255); font-weight:bold; font-weight:bolder;}
.title{line-height:12px; font-weight:bold; font-size:12px; display:block; margin:0;}
.date{line-height:12px; font-weight:bold; font-size:12px; display:block;margin:5px 0 16px 0; color: rgb(192, 192, 192);}
/*======== Base Layout ======== */
#content { width: 1010px; padding: 16px 0 0 16px; text-align: left;}
.mainarticle, .section {float:left;}
.nav {width: 190px; padding: 2px 5px;position:fixed; top:16px; left:16px; }
.startnav {background: rgba(56, 56, 56, 0.6); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
* html .startnav {background: rgb(56, 56, 56); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.mainarticle {width:758px; position: relative; top:52px; left:237px; margin-right:5px;}
.mainarticle.thumbs {width:758px;}
/*======== Nav ================ */
ul#menu, ul#menu ul  {list-style-type:none; list-style:none; margin: 0; padding: 0;}
ul#menu a {display: block; text-decoration: none;  line-height:10px;}
ul#menu li {margin-top: 1px; border-top: 1px #FFF solid; list-style:none}
ul#menu li a { background: #transparent; color: #fff; padding: 0.5em;}
ul#menu li a:hover, ul#menu li a.active {text-decoration: underline;  /*color: rgb(102, 255, 255); */}
ul#menu li a.active { text-decoration: none; color: rgb(102, 255, 255); font-weight:bold; font-weight:bolder;}
ul#menu li ul li a { padding-left: 20px; }
ul#menu li ul li a:hover { text-decoration: underline;}
a.logo {color: rgb(56,56,56); font-size:1.2em; line-height:1.5em; margin-bottom:1.7em; background-image:url(../img/imagenow_logo.png); background-repeat:no-repeat; height: 10px; text-indent: -200%;background-position:2px 0;}
a.logo:hover {font-size:1.2em; line-height:1.5em; margin-bottom:1.7em; background-image:url(../img/imagenow_logo.png); background-repeat:no-repeat; background-position:2px -21px;}
ul#menu li.navfirstchild {border-top: 0px;  color: rgb(56, 56, 56); text-indent: -200%;}
ul#menu li.navlastchild  { border-bottom: 1px #FFF solid}
/*======== Index Vcard ======== */
.nav .vcard {margin: 200px 0 15px 5px; line-height:1.5em;}
.nav .org {text-indent: -2000%}
.street-address	{display:inline-block;}
/*======== Work Thumbnails ==== */
.thumbholder {width:240px; height:170px; float:left; margin: 0 12px 12px 0; overflow:hidden;}
.thumbholder img{width:240px; height:150px; float:left; margin: 0 0 5px 0; padding: 0; background:url('../img/ajax-loader.gif') no-repeat center center rgb(56, 56, 56);}
.thumbholder img:hover{ z-index:9999; -moz-box-shadow:0 0 30px #fff inset; -webkit-box-shadow:0 0 30px #fff inset; box-shadow:0 0 30px #999 inset; opacity: 0.5;}
/*======== News =============== */	
.section {border-bottom: 1px #FFF solid; }.section:first-child {border-top: 1px #FFF solid; border-bottom: 1px #FFF solid; }
.section img{display: inline; float:left; margin:11px 16px 11px 0px;}
.section p{padding: 0; margin:0 50px 11px 0;}
.section a.highlight {display:block;}
.pane2{height: 240px; width:290px;}
.navpane{height: 102px; width:195px;}
/*======= News Scroller ======= */
.osX .jScrollPaneTrack {background: url(../img/osx_track.gif) repeat-y;}
.osX .jScrollPaneDrag {background: url(../img/osx_drag_middle.gif) repeat-y;}
.osX .jScrollPaneDragTop {background: url(../img/osx_drag_top.gif) no-repeat; height: 6px;}
.osX .jScrollPaneDragBottom {background: url(../img/osx_drag_bottom.gif) no-repeat; height: 7px;}		
/* IE SPECIFIC HACKED STYLES */
* html .osX .jScrollPaneDragBottom {bottom: -1px;}
.holder {float: left; margin: 11px 0;}
.jScrollPaneContainer {position: relative; overflow: hidden; z-index: 1;}
.jScrollPaneTrack {position: absolute; cursor: pointer; right: 0px; top: 0; height: 100%;}
.jScrollPaneDrag {position: absolute; cursor: pointer; overflow: hidden;}
.jScrollPaneDragTop {position: absolute; top: 0; left: 0; overflow: hidden;}
.jScrollPaneDragBottom {position: absolute; bottom: 0; left: 0; overflow: hidden;}
/*======== Our People ======== */
.peoples span, .peoples a.email {font-weight:bold; line-height:17px;}
.indicator {width: 50px; display: inline-block;}
.peoples {padding:12px 0 ;}
.peoples img{float:right; width:160px; height: 240px; margin:0 0 0 40px; padding:0;}
.peoples p{padding:12px 0 5px 0}
.focusmail {color: rgb(102, 255, 255); font-weight:bold; font-weight:bolder;}
a.focusmail:hover {color: rgb(102, 255, 255); font-weight:bold; font-weight:bolder;}
/*======= Single Project & Case Study ======== */
.project p.highlight, .casestudy p.highlight {margin: 0 12px 0 0; border-bottom: 1px solid #FFF; padding-bottom:13px; color: rgb(102, 255, 255); font-weight:bold;}
.project a, .casestudy a{color: rgb(102, 255, 255); font-weight:bold; }
.mainarticle.project p.large, .mainarticle.casestudy p.large {border-bottom: none; padding-bottom: 0;}
.mainarticle.project  {margin-bottom: 12px; padding-bottom: 12px;}
.mainarticle.project.ident h1 {margin-bottom:0;}
.anchorLink:after {content: ".  "}
/*======== Single project ======== */
img.large  {margin:0; padding:13px 0 0 0; width: 745px; display: block; clear:both; border-bottom: none;}
.navpane{height: 500px; width:195px;}
.navpane li:last-child {border-bottom: 1px solid #FFF;}

/*======== Case Study ============ */
.casestudy img  {margin:0; padding:13px 0 0 0; border-bottom: none; width: 497px; float:left; display:block; }
p.endcase {display:block; clear:both; border-bottom: 1px solid #FFF; margin: 0 12px 0 0; padding:0;}
.side  { width :248px; float:right;}
.side a.highlight {display:block;}
a.noshow {font-size: 1px; line-height:1px; color: rgb(56,56,56); height:1px;  padding: 0 0-5px 0; margin: 0; }
a.noshow:hover {font-size: 1px; line-height:1px; color: rgb(56,56,56);height:1px; padding: 0 0-5px 0; margin: 0;}
a.show, a.show:hover{color: #fff; display:inline-block; font-size:9px;}
a.show.anchorLink {color:rgb(102, 247, 247); display:block; font-size:12px; font-weight:bold; line-height:18px;}
a.show.anchorLink:hover {color:rgb(255, 255, 255); }
a.show.anchorLink:after {content: ""}
/*======== Contact ============== */
.contact img  {margin:0; padding:0 0 13px 0; border-bottom: none; width: 497px; float:left; display:block; }
.side .street-address {display:block;}
.side .org {font-weight: bold; margin-bottom: 14px;}
.side .fn {font-weight: bold; display:block;}
.side .email {margin-bottom: 14px; display:block;}
.side a.highlight.small {display: inline-block;} /* .side a.highlight.small:before {content: "| "} */
.side a.highlight.small:after {content: "..."}
.contact iframe{margin-bottom:12px;}
#slideshow { position:relative; width:497px;}
#slideshow IMG { position:absolute; top:0; left:0; z-index:8; opacity:0.0;}
#slideshow IMG.active {z-index:10; opacity:1.0;}
#slideshow IMG.last-active { z-index:9;}
/*======== Ident & Video Specials == */
.video {padding: 12px 0; }
.video.casestudy  {width: 497px; float:left; display:block; }
.mainarticle.project.ident h1 {margin-bottom:0;}

/*======== About Film ========== */
.large.aboutfilm {border-bottom:none; margin-bottom:0px;}
.clearfix:after {content: "."; visibility: hidden; display: block; height: 0; clear: both; width:760px;}	
.btn{width: 760px; }
a.cat {font-size:24px;font-weight:bold; display:block; line-height:44px;background-image:url(../img/imagebit.png); background-repeat:no-repeat;text-decoration:none; background-position: right 12px;}
.btn a.cat:hover, .firstbtn a.cat:hover{font-size:24px;font-weight:bold; display:block;line-height:44px; background-position: right bottom; text-decoration:none;}
#expand1, #expand2, #expand3, #expand4{display:none;width:760px; margin:0; }
.line{border-top: 1px #FFF solid; padding-top:5px; margin-top: 0px;}
.project p.underline {border-top: 1px #FFF solid; font-size:2px; margin-bottom:-10px;}
.space{padding-bottom:20px;}