@charset "UTF-8";

body, html{ height: 100%; line-height: 1; }
body{ color: #00674e; font: 14px/1.6 Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; background: #fff; text-align: center; }

p{ margin-bottom: 10px; }
a{ color: #ec6919; }
h1, h2, h3, h4, h5, h6{ line-height: 1.3em; }
h1{ color: #ec6919; font-size: 27px; font-weight: normal; margin-bottom: 18px; }
h2{ font-size: 18px; font-weight: normal; border-bottom: 1px solid #00674e; margin-bottom: 10px; }
h3{ font-size: 12px; margin-bottom: 10px; }
h3 span{
	color: #A0BC9A;
}
h4{ color: #ec6919; font-size: 10px; margin-bottom: 5px; }

#hd, #ct, #ft{ position: relative; margin: 0 auto; width: 1000px;  text-align: left;  }

#hd{ height: 175px; }
#bg{ width: 100%; background: #fff url(../img/bg.png) repeat-x; }
#ct{ overflow: hidden; width: 970px; padding: 10px 15px 35px 0; }
#ft{ padding: 30px 10px; color: #fff; overflow: hidden; }
#ft a{color: #fff; text-decoration:none;}
#ft a:hover{color:#FFF; text-decoration:underline;}
#ft .contact{ float: right; text-indent: -9999em; background: url(../img/btn-contact.png) no-repeat; margin-right: 45px; width: 110px; height: 112px; }
#ft .address{ float: right; }

#logo{ position: absolute; top: 15px; left: 10px; display: block; width: 147px; height: 147px; background: url(../img/logo.png) no-repeat; text-indent: -9999em; }

#nav-bg{ position: absolute; top: 73px; }
#nav{ position: absolute; top: 80px; right: 15px; list-style-type: none; }
#nav li{ float: left; display: inline; height: 40px; margin-right: 10px; }
#nav li a{ display: block; text-decoration: none; height: 40px; background: url(../img/nav-sprite4.png) no-repeat; text-indent: -9999em; }

#nav #home{ width: 43px; background-position: 0 0; }
#nav #home.current,
#nav #home:hover{ background-position: 0 -40px; }

#nav #about{ width: 76px; background-position: -51px 0; }
#nav #about.current,
#nav #about:hover{ background-position: -51px -40px; }

#nav #bios{ width: 34px; margin-left: 23px; background-position: -643px 0; }
#nav #bios.current,
#nav #bios:hover{ background-position: -643px -40px; }

#nav #clients{ width: 67px; background-position: -136px 0; }
#nav #clients.current,
#nav #clients:hover{ background-position: -136px -40px; }

#nav #cap{ width: 107px; background-position: -212px 0; }
#nav #cap.current,
#nav #cap:hover{ background-position: -212px -40px; }

#nav #process{ width: 63px; background-position: -330px 0; }
#nav #process.current,
#nav #process:hover{ background-position: -330px -40px; }

#nav #big{ width: 86px; background-position: -412px 0; }
#nav #big.current,
#nav #big:hover{ background-position: -412px -40px; }

#nav #work{ width: 45px; background-position: -506px 0; }
#nav #work.current,
#nav #work:hover{ background-position: -506px -40px; }

#nav #contact{ width: 69px; background-position: -561px 0; }
#nav #contact.current,
#nav #contact:hover{ background-position: -561px -40px; }

#nav #blog{ width: 37px; background-position: -697px 0; }
#nav #blog.current,
#nav #blog:hover{ background-position: -697px -40px; }

.home .col1{ width: 533px; padding-right: 55px; }
.home .col2{ width: 375px; }
.home #news .date{ margin-bottom: 3px; line-height: 1em; }

.about #squares{ margin-bottom: 12px; }
.about #squares .square{ position: relative; background: #d9e5e1; width: 244px; height: 113px; padding-top: 61px; float: left; background: url(../img/about-squares-sprite.png) no-repeat; text-indent: -9999em; cursor: pointer; }
.about #squares .square.end{ width: 229px; }
.about #squares .square.bottom{ height: 93px; }
.about #squares .square.two{ background-position: -244px 0; }
.about #squares .square.three{ background-position: -488px 0; }
.about #squares .square.four{ background-position: -732px 0; }
.about #squares .square.five{ background-position: 0 -174px; }
.about #squares .square.six{ background-position: -244px -174px; }
.about #squares .square.seven{ background-position: -488px -174px; }
.about #squares .square.eight{ background-position: -732px -174px; }

.about #squares h1{ color: #00674e; }
.about #squares h1 span{ font-size: 16px; display: block; }
.about #squares .copy{ position: absolute; text-indent: 0; top: 10px; left: 0; z-index: 999; display: none; text-align: left; font-size: 16px; color: #fff; padding: 25px; width: 432px; background: url(../img/bg-trans-green.png) repeat; }

/* ie7 forced these out of #square to be positioned manually */
.about #squares .copy.see{ left: 244px; }
.about #squares .copy.believe,
.about #squares .copy.do{ left: 488px; }

.about #squares .copy.how{ top: 184px; }
.about #squares .copy.been,
.about #squares .copy.are,
.about #squares .copy.done{ top: 184px }

.about #squares .copy.been{ left: 244px; }
.about #squares .copy.are,
.about #squares .copy.done{ left: 488px; }

.about #squares .copy h2{ font-size: 16px; border-bottom: none; margin-bottom: 5px; font-weight: bold; }
.about #squares .copy p{ line-height: 1.7em; }

.clients .col{ font-size: 18px; }
.clients .col h2{ font-weight: bold; }
.clients .col1{ background: #00674e; color: #fff; padding: 10px; width: 216px; margin-right: 54px; }
.clients .col2{ width: 659px; }
.clients .col2 table{ width: 100%; }
.clients .col2 table td{ width: 33%; }

.work #tabs{ float: right; overflow: hidden; margin-bottom: 13px; }
.work #tabs li{ float: left; display: inline; margin-left: 15px; }
.work #tabs a{ display: block; font-weight: bold; font-size: 16px; text-decoration: none; height: 12px; line-height: 12px; text-indent: -9999em; background: url(../img/work-nav-sprite.png) no-repeat; }
.work #tabs li.tv a{ width: 20px; }
.work #tabs li.tv .current,
.work #tabs li.tv a:hover{ background-position: 0 -17px; }
.work #tabs li.interactive a{ width: 100px; background-position: -34px 0; }
.work #tabs li.interactive .current,
.work #tabs li.interactive a:hover{ background-position: -34px -17px; }
.work #tabs li.print a{ width: 45px; background-position: -150px 0; }
.work #tabs li.print .current,
.work #tabs li.print a:hover{ background-position: -150px -17px; }
.work #tabs li.radio a{ width: 44px; background-position: -209px 0; }
.work #tabs li.radio .current,
.work #tabs li.radio a:hover{ background-position: -209px -17px; }

.work #player-inline{ text-align: center; }

.contact h1#contact{ display:block;width:561px;height:109px;text-indent:-9999em;background:url(../img/hd-contact.png) top left no-repeat;}
.contact .col1{ width: 533px; padding-right: 55px; }
.contact .col2{ width: 375px; }
.contact #content td{ font-family:helvetica,arial,sans-serif;font-size:16px;vertical-align:top; }
.contact #content p{ font-family:helvetica,arial,sans-serif;font-size:16px; }
.contact #content .address, .contact #content .phone, .contact #content .email, .contact #content .email td{ color:#f58029; }

.process #tabs li a{ width: 159px; height: 29px; background: url(../img/process-tabs-sprite.png) 0 0 no-repeat; }
.process #tabs .process:hover,
.process #tabs .process.current{ background-position: 0 -29px; }
.process #tabs .capabilities{ background-position: -158px 0; }
.process #tabs .capabilities:hover,
.process #tabs .capabilities.current{ background-position: -158px -29px; }
.process h2{ font-size:24px; color:#00674e; border:0; letter-spacing:-1px; font-weight:bold; }
.process #tabs-wrapper{ margin-top:40px; }
#process-nav{ float:left; width:320px; }
#process-nav p{ margin:0 0 7px 0; padding:0; line-height:21px; }
#process-nav p a{ color:#f57b20; text-decoration:none; font-size:21px; }
#process-nav .process-nav-arrow { display:none; }
#process-content{ float:left; width:605px; min-height:375px; margin-left:5px; border:1px solid #00674e; background-color:#e0eae7; padding:15px; }
#process-content li{ list-style:disc; color:#00674e; margin:5px 20px; }
.process .capability-col{ float:left; width:315px; margin-right:10px; background-color:#e0eae7; height:400px; }
.process .capability-col h2{ background:url(../img/process/capabilities-headers.png) 0 0 no-repeat #00674e; text-indent:-9999em; }
.process .capability-col h2.current{ background-position:0 -34px; }
.process .capability-col h2.customized{ background-position:0 -67px; }
.process .capability-col.last{ margin-right:0; }
.process .capability-col li{ list-style:disc; color:#00674e; margin:5px 20px; }

.big #tabs li a{ display: block; padding: 0 15px; height: 29px; background: url(../img/big-ideals-tabs-sprite.png) 0 0 no-repeat; }
.big #tabs .foodlion a{ padding-left: 30px; width: 79px; background-position: -3px 0; }
.big #tabs .foodlion a:hover,
.big #tabs .foodlion .current{ background-position: -3px -29px; }
.big #tabs .mitsu a{ width: 173px; background-position: -124px 0; }
.big #tabs .mitsu a:hover,
.big #tabs .mitsu .current{ background-position: -124px -29px; }
.big #tabs .ga a{ width: 152px; background-position: -324px 0; }
.big #tabs .ga a:hover,
.big #tabs .ga .current{ background-position: -324px -29px; }
.big #tabs .heartgard a{ width: 92px; background-position: -505px 0; }
.big #tabs .heartgard a:hover,
.big #tabs .heartgard .current{ background-position: -505px -29px; }
.big #tabs .mainheim a{ width: 75px; background-position: -625px 0; }
.big #tabs .mainheim a:hover,
.big #tabs .mainheim .current{ background-position: -625px -29px; }
.big #tabs .barnsley a{ width: 159px; background-position: -728px 0; }
.big #tabs .barnsley a:hover,
.big #tabs .barnsley .current{ background-position: -728px -29px; }
.big #panes .bg{ background: url(../img/bg-big-ideal-ct.png) 50px 0 no-repeat; overflow: hidden; }
.big .idea{ position: relative; float: left; display: inline; margin-top: 161px; padding: 0 20px 0 70px; width: 339px; font-size: 24px; background: url(../img/bg-idea-box.png) 50px 0 repeat-y; line-height: 1.3em; text-align: center; }
.big .bottom-bar{ position: absolute; left: 50px; bottom: 0; }
.big .ideal{ float: left; display: inline; margin-top: 113px; margin-left: 29px; padding: 20px; width: 435px; font-size: 28px; color: #fff; background: #ec6411; line-height: 1.3em; text-align: center; }
.big .ideal i, .big .ideal em{ display: block; font-size: 33px; font-weight: bold; }
.big .see{ clear: both; margin-top: 9px; height: 85px; background: url(../img/bg-big-ideal-see-work.png) 560px 0 no-repeat; }
.big .see2{ clear: both; margin-top: 9px; height: 176px; background: url(../img/bg-big-ideal-see-study-work.gif) 560px 0 no-repeat; }
.big #panes h1{ font-size: 21px; }
.big #panes .work{ list-style-type: none; float: right; margin-top: 58px; margin-right: 425px; }
.big #panes .work li{ float: left; display: inline; margin-right: 10px; }
.big #panes .work li a{ display: block; text-decoration: none; height: 12px; line-height: 12px; background: url(../img/big-ideals-cats-sprite.png) no-repeat; text-indent: -9999em; }
.big #panes .work .tv{ width: 20px; background-position: 0 0; }
.big #panes .work .tv:hover{ background-position: 0 -20px; }
.big #panes .work .print{ width: 47px; background-position: -34px 0; }
.big #panes .work .print:hover{ background-position: -34px -20px; }
.big #panes .work .interactive{ width: 103px; background-position: -90px 0; }
.big #panes .work .interactive:hover{ background-position: -90px -20px; }
.big #panes .work .radio{ width: 45px; background-position: -208px 0; }
.big #panes .work .radio:hover{ background-position: -208px -20px; }
.big #panes .work .social{ width: 54px; background-position: -267px 0; }
.big #panes .work .social:hover{ background-position: -267px -20px; }
.big #panes .work .collateral{ width: 98px; background-position: -335px 0; }
.big #panes .work .collateral:hover{ background-position: -335px -20px; }
.big #panes .work .ohh{ width: 30px; background-position: -447px 0; }
.big #panes .work .ohh:hover{ background-position: -447px -20px; }
.big #tab-top-pics img{ display: none; }

#keg{ overflow: hidden; margin-bottom: 12px; }
#keg img{ float: left; }
#keg p{ float: right; background: #d9e5e1; width: 258px; margin-bottom: 0; height: 16px; padding: 17px; font-size: 10px; text-transform: uppercase; }
#keg-name{ font-size: 13px; }

#music{ border: 1px solid #8f8f8f; overflow: hidden; padding: 5px; }
#music li{ float: left; width: 170px; margin-right:10px; color: #000; font-size: 11px; }
#music li.alt{ background-color:#f4f7fb; }

#tweets{ margin-bottom: 12px; }
#tweets .tweet_list, .query .tweet_list { -webkit-border-radius: .5em; list-style-type: none; margin: 0; padding: 0; background-color: #d9e5e1; }
#tweets .tweet_list .awesome, .tweet .tweet_list .epic, .query .tweet_list .awesome, .query .tweet_list .epic { text-transform: uppercase; }
#tweets .tweet_list li, .query .tweet_list li { overflow-y: auto; overflow-x: hidden; padding: .5em; }
#tweets .tweet_list .tweet_even, .query .tweet_list .tweet_even { background-color: #fff; }
#tweets .tweet_list .tweet_avatar, .query .tweet_list .tweet_avatar { padding-right: .5em; float: left; }
#tweets .tweet_list .tweet_avatar img, .query .tweet_list .tweet_avatar img { vertical-align: middle; }

#flickr{ overflow: hidden; }
#flickr h3{ width: 55px; height: 153px; float: left; background: url(../img/hd-flickr.png) no-repeat; text-indent: -9999em; }
#flickr-pics{ width: 320px; float: right; }
#flickr-pics a{ display: block; width:75px; height:77px; float: left; margin-left: 5px; background: #fff; }

.main-pic{ display: block; margin-bottom: 20px; }
.main-pic-tabbed{ display: block; border: 1px solid #00674e; border-bottom: none; }

.tabs{ background-color:#00674e; height: 29px; width: 964px; margin-bottom: 20px; }
.tabs li{ float:left; display: inline; }
.tabs li a{ display: block; background-color: #00674e; text-indent: -9999em; }
.tabs li a:hover{ background-color: #f57b20; }

.squares{ clear: both; overflow: hidden; margin-bottom: 100px; }
.squares div{ position: relative; float: left; padding: 9px 9px 9px 11px; width: 227px; height: 156px; background: url(../img/bg-work-square.png) 0px -21px no-repeat; }
.squares div .info{ position: absolute; background: #dfeae7; padding: 50px 0px 25px 10px; width: 217px; height: 79px; }
.squares div .info h3{ margin-bottom: 0; }
.squares div .info h3,
.squares div .info a{ color: #00674e; font-weight: bold; font-size: 16px; }
.squares div .info a{ display: block; margin-top: 10px; }
.squares div .info small{ font-size: 14px; }
.squares div img{ display: block; }

/* ie6 made this a little more awkward */
.squares div.top,
.squares div.top-left{ padding-top: 0; height: 156px; background-position: 0px -30px; }
.squares div.left,
.squares div.top-left{ padding-left: 0; background-position: -3px -21px; }
.squares div.top-left{ background-position: -3px -30px !important; }
.squares div.right{ padding-right: 0; }
.squares div.bottom{ padding-bottom: 0; }

#player-inline{ padding: 10px; }

.col{ float: left; }
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}

.bio-detail { margin:20px; color:white; text-align:left; }
.bio-detail h2 {
  font:normal bold normal 24px/1.2em "Helvetica";
  border:none;
}
.bio-detail h3 { padding: 5px; font-size: 16px; font-weight:normal; background-color:#808080; }
.bios .squares .info { height:81px; }

#casestudy {
	position:absolute;
	top:928px;
	left:380px;
}