/* ===== CSS Reset ===== */
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; }
table { border-collapse:collapse;border-spacing:0; }
/* ===== Basic elements ===== */
h1{
position: absolute;
bottom: 13px;
left: 0;
}
h1 a{
/* Uses image replacement */
background: url(../images/branding/logo.png) no-repeat;
width: 324px;
height: 81px;
display: block;
}
h2{
font-size: 20px;
line-height: 30px;
font-weight: bold;
text-transform: lowercase;
color: #afaca0;
}
h3{
font-size: 28px;
line-height: 32px;
font-weight: bold;
text-transform: lowercase;
letter-spacing: -0.5px;
margin: 25px 0 5px;
}
h4{}
h5{}
ul{}
ol{}
li{
padding-left: 14px;
background: url(../images/bullet/default.png) no-repeat 2px 6px;
font-size: 14px;
line-height: 21px;
margin: 10px 0;
}
p{
font-size: 20px;
line-height: 28px;
margin: 6px 0 16px;
}
p.intro{
font-size: 30px;
line-height: 40px;
margin-bottom: 15px;
}
p strong{
font-weight: bold;
}
p em{
font-style: italic;
}
a{
color: #ca6f12;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
.list{
margin: 12px 0 30px;
}
/* ===== Global structure ===== */
body{
background: #ebeae7 url(../images/background/waves/default.jpg) no-repeat top;
color: #878370;
font: 12px/16px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
padding: 0 20px;
overflow-x: hidden;
}
#container{
width: 940px;
margin: 0 auto;
}
#header{
height: 150px;
border-bottom: 2px solid #d1a17f;
position: relative;
color: #FFF;
text-transform: lowercase;
margin-bottom: 20px;
}
#header #nav{
position: absolute;
bottom: 0;
right: 0;
letter-spacing: -0.25px;
}
#header #nav li{
float: left;
padding: 0;
background: none;
font-size: 28px;
line-height: 28px;
font-weight: bold;
margin: 0 0 0 20px;
}
#header #nav li:first-child{
margin-left: 0;
}
#header #nav li.first{
margin-left: 0;
}
#header #nav li a{
float: left;
display: block;
color: #FFF;
padding-bottom: 26px;
}
#header #nav li a:hover,
.whoweare #whoweare a,
.whatwedo #whatwedo a,
.howtoreachus #howtoreachus a{
padding-bottom: 16px !important;
border-bottom: 10px solid #d1a17f;
text-decoration: none;
}
#content{
position: relative;
}
#footer{
border-top: 1px solid #bdbbb1;
padding: 25px 10px 70px;
background: url(../images/footer/dots.png) no-repeat bottom left;
position: relative;
}
#footer .org{
font-weight: bold;
}
#footer #social-media{
position: absolute;
top: 26px;
right: 10px;
}
#footer #social-media li{
margin: 0 0 8px;
font-size: 12px;
line-height: 15px;
padding: 0;
background: none;
text-align: right;
}
#footer #social-media li:last-child{
margin-bottom: 0;
}
#footer #social-media li.last{
margin-bottom: 0;
}
#footer #social-media a{
color: #878370;
padding-right: 23px;
}
#footer #social-media #fb a{
background: url(../images/button/facebook.gif) no-repeat right;
}
#footer #social-media #tw a{
background: url(../images/button/twitter.gif) no-repeat right;
}
#footer #social-media #em a{
background: url(../images/button/email.gif) no-repeat right;
}
/* ===== Specific content modules ===== */
/* Error page */
.error #content{
margin: 33px 10px 0;
}
.error #content h2{
/* Uses image replacement */
width: 391px;
height: 253px;
background: url(../images/header/oops.png) no-repeat;
}
.error #content p{
width: 600px;
margin: 15px 0 100px;
font-size: 30px;
line-height: 40px;
}
/* Homepage billboard */
#billboard{
/* Clearfixed */
margin: 0 0 30px;
padding: 335px 0 30px;
border-bottom: 1px solid #bdbbb1;
position: relative;
}
#billboard.active{
padding-top: 369px;
}
#intro{
width: 650px;
float: left;
margin: 15px 0 0 10px;
font-size: 30px;
line-height: 40px;
}
#highlights{
position: absolute;
top: -20px;
left: 0;
height: 311px;
width: 418px;
border-bottom: 2px solid #d4d2cc;
padding: 35px 0 0 522px;
}
#billboard.active #highlights{
width: 940px;
height: 369px;
padding: 0;
}
#highlights h2{ /* Hidden elements */ }
#highlights li{
padding: 0;
background: 0;
margin: 0 0 12px;
width: 360px;
height: auto;
}
#billboard.active #highlights li{
width: 940px;
height: 369px;
margin: 0;
position: absolute;
top: 0;
left: 0;
}
#highlights li h3{
margin: 0;
font-size: 14px;
line-height: 18px;
color: #fff;
text-transform: none;
letter-spacing: 0;
}
#highlights li p,
#highlights li div{
font-size: 14px;
line-height: 20px;
color: #FFF;
display: inline;
}
#billboard.active #highlights li p,
#billboard.active #highlights li div{
margin: 0;
font-weight: bold;
font-size: 24px;
text-transform: lowercase;
}
#highlights a{
color: #FFF;
text-transform: lowercase;
font-weight: bold;
}
#billboard.active #highlights a{
color: #CA6F12;
}
#highlights .more a:after{
content: '\A0\BB';
}
#highlights #slide-1{
position: absolute;
top: 32px;
left: 10px;
width: 475px;
height: 286px;
background: url(../images/billboard/threespot_degredation.png) no-repeat;
text-indent: -999em;
overflow: hidden;
padding: 0;
}
#billboard.active #slide-1{
background: url(../images/billboard/threespot.png) no-repeat;
}
#highlights #slide-1 h3,
#highlights #slide-1 p,
#highlights #slide-1 .more{
position: absolute;
visibility: hidden;
}
#highlights-prev a,
#highlights-next a{
/* Uses image replacement */
display: block;
width: 50px;
height: 58px;
position: absolute;
top: 165px;
background: url(../images/billboard/arrows.png) no-repeat;
}
#highlights-prev a{
left: 0;
background-position: 0 0;
}
#highlights-prev a:hover{
background-position: 0 -58px;
}
#highlights-next a{
right: 0;
background-position: -50px 0;
}
#highlights-next a:hover{
background-position: -50px -58px;
}
#highlights-nav{
text-align: center;
position: absolute;
bottom: 12px;
width: 100%;
}
#highlights-nav li{
display: inline-block;
position: static !important;
height: auto !important;
width: auto !important;
}
#highlights-nav li a{
/* Image replacement */
width: 21px;
height: 20px;
display: block;
overflow: hidden;
background: url(../images/billboard/dots.gif) no-repeat 0 0;
}
#highlights-nav li.active a,
#highlights-nav li a:hover{
background-position: -21px 0;
}
#missives{
float: right;
margin-top: 25px;
width: 222px;
padding-left: 18px;
border-left: 2px solid #bdbbb1;
color: #706d5f;
}
#missives h2{
position: relative;
top: -10px;
margin-bottom: -15px;
}
#missives li{
font-weight: bold;
margin-top: 10px;
font-size: 14px;
line-height: 18px;
}
#missives a{
color: #706d5f;
}
#missives a:after{
content: '\A0\BB';
}
/* Homepage portfolio promo */
#portfolio-promo{
border-top: 1px solid #bdbbb1;
margin: 30px 0 0;
padding: 30px 650px 30px 10px;
position: relative;
min-height: 193px;
}
#portfolio-promo .portfolio{
position: absolute;
top: 30px;
right: 0;
}
#portfolio-promo .portfolio li{
float: left;
margin: 0 0 0 20px;
}
#portfolio-promo .portfolio li:first-child{
margin-left: 0;
}
#portfolio-promo .portfolio li.first{
margin-left: 0;
}
#portfolio-promo h2,
#portfolio-promo p,
#portfolio-promo .more{
border-left: 2px solid #bdbbb1;
padding-left: 15px;
}
#portfolio-promo h2{
font-size: 30px;
line-height: 32px;
color: #878370;
letter-spacing: -1px;
}
#portfolio-promo p{
font-size: 18px;
line-height: 24px;
padding: 7px 0 14px 15px;
margin: 0;
}
#portfolio-promo .more{
font-size: 18px;
font-weight: bold;
padding: 0 0 17px 15px;
text-transform: lowercase;
}
#portfolio-promo .more a:after{
content: '\A0\BB';
}
/* Homepage blog promo */
#blog-promo{
/* Clearfixed */
border-top: 1px solid #bdbbb1;
padding: 28px 10px 21px;
}
#blog-promo h2{
/* Uses image replacement */
width: 344px;
height: 70px;
background: url(../images/header/three-things.png) no-repeat;
float: left;
}
#blog-promo p{
float: left;
width: 560px;
font-size: 19px;
line-height: 24px;
text-transform: lowercase;
margin: 6px 0 0 16px;
}
#blog-promo p a:after{
content: '\A0\BB';
}
#slideshow{
position: absolute;
top: 0;
left: 0;
margin: 0 14px;
width: 912px;
}
#slideshow h3{
/* Element hidden */
}
.slide{
position: absolute;
top: 0;
left: 0;
width: 912px;
padding: 0;
margin: 0;
background: none;
text-align: center;
}
.slide h4{
font-size: 14px;
line-height: 14px;
font-weight: bold;
color: #FFF;
padding: 18px 3px 16px;
text-align: left;
}
#slide-close{
position: absolute;
top: 0;
right: 0;
color: #960;
font-size: 14px;
line-height: 14px;
font-weight: bold;
text-transform: lowercase;
padding: 18px 33px 16px 3px;
background: url(../images/button/close.png) no-repeat right;
z-index: 3;
}
#slide-prev,
#slide-next{
position: absolute;
top: 165px;
z-index: 3;
}
#slide-prev.fixed,
#slide-next.fixed{
position: fixed;
}
#slide-prev a,
#slide-next a{
width: 80px;
height: 80px;
display: block;
background: #ebeae7 url(../images/button/slidenav.gif) no-repeat;
}
#slide-prev{
left: 0;
float: left;
padding: 150px 300px 150px 0;
}
#slide-prev a{
background-position: top left;
border-radius: 0 10px 10px 0; -moz-border-radius: 0 10px 10px 0;
-webkit-border-radius: 10px; -webkit-border-top-left-radius: 0; -webkit-border-bottom-left-radius: 0;
}
#slide-next{
right: 0;
float: right;
padding: 150px 0 150px 300px;
}
#slide-next a{
background-position: top right;
border-radius: 10px 0 0 10px; -moz-border-radius: 10px 0 0 10px;
-webkit-border-radius: 10px; -webkit-border-top-right-radius: 0; -webkit-border-bottom-right-radius: 0;
}
/* Map on 'How To Reach Us */
#map{
/* Clearfixed */
margin-bottom: 25px;
padding-left: 10px;
}
#map_canvas{
width: 580px;
height: 399px;
float: left;
background: #ebeae7 !important;
}
#map_canvas #hmtctl{
display: none !important;
}
#infowindow{
margin: 10px;
}
#infowindow button{
margin-left: 5px;
}
#infowindow-threespot{
/* Uses image replacement */
background: url(../images/map/overlay-logo.gif) no-repeat;
width: 143px;
height: 35px;
margin-bottom: 10px;
}
#infowindow-addr{
margin: 10px 0;
}
#infowindow-dirs{
font-weight: bold;
margin-bottom: 3px;
}
#threespots{
width: 350px;
float: left;
background: #ebeae7;
height: 399px;
overflow: auto;
}
#threespots.active{
height: auto;
min-height: 399px;
overflow: visible;
}
#threespots.active ul{
margin-bottom: -1px;
}
#threespots.newie li{
overflow: hidden;
}
#threespots h3{
margin: 0;
font-size: 18px;
line-height: 18px;
color: #878370;
padding: 12px 0;
background: url(../images/map/expand.png) no-repeat 311px -34px;
border-bottom: 2px solid #bdbbb1;
}
#threespots.active h3{
cursor: pointer;
}
#threespots.active .hidden h3{
border-bottom: 0;
background-position: 311px 17px;
}
#threespots.active .hidden h3:hover{
border-bottom: 0;
background-position: 326px -75px;
}
#threespots.active h3:hover{
color: #FFF;
background-color: #bdbbb1;
background-position: 326px -125px;
width: 320px;
padding: 13px 15px;
position: relative;
left: -15px;
z-index: 2;
margin: -1px 0;
}
#threespots.newie h3:hover{
background: url(../images/map/expand.png) no-repeat 326px -33px !important;
color: #878370 !important;
text-decoration: underline !important;
padding-bottom: 12px !important;
margin-bottom: 0 !important;
}
#threespots.newie li.hidden h3:hover{
background-position: 326px 18px !important;
padding-bottom: 13px !important;
margin-bottom: -1px !important;
}
#threespots li{
padding: 0;
margin: 0 15px;
background: none;
border-bottom: 1px solid #bdbbb1;
}
#threespots li:last-child{
border-bottom: 0;
}
#threespots li.last{
border-bottom: 0;
}
#threespots.active li:last-child{
border-bottom: 1px solid #bdbbb1;
}
#threespots.active li.last{
border-bottom: 1px solid #bdbbb1;
}
.page #threespots li li{
font-size: 16px;
color: #9d9a8c;
padding: 7px 10px 7px 30px;
margin: 0;
border-bottom: none;
background: url(../images/bullet/default.png) no-repeat 12px 16px !important;
}
#threespots.active li li{
background: url(../images/map/dot2.png) no-repeat 7px 11px !important;
}
#threespots.active li li:first-child{
padding-top: 14px;
background: url(../images/map/dot1.png) no-repeat 7px 18px !important;
}
#threespots.active li li.first{
padding-top: 14px;
background: url(../images/map/dot1.png) no-repeat 7px 18px !important;
}
#threespots.active li li:last-child{
padding-bottom: 14px;
background: url(../images/map/dot3.png) no-repeat 7px 11px !important;
}
#threespots.active li li.last{
padding-bottom: 14px;
background: url(../images/map/dot3.png) no-repeat 7px 11px !important;
}
/* Non-map parts of 'How To Reach Us' */
#about{
/* Clearfixed */
border-bottom: 1px solid #bdbbb1;
padding: 0 0 35px 10px;
margin-bottom: 50px;
}
#location{
width: 580px;
float: left;
}
#location p{
font-size: 24px;
font-weight: bold;
color: #706d5f;
text-transform: lowercase;
margin-bottom: 8px;
}
#location .adr{
font-size: 36px;
line-height: 40px;
color: #9d9a8c;
}
#location #metro{
font-size: 14px;
line-height: 20px;
color: #706d5f;
padding-left: 70px;
min-height: 61px;
background: url(../images/map/metro.png) no-repeat left;
margin: 30px 0;
}
#contact{
width: 280px;
float: right;
font-size: 18px;
line-height: 24px;
color: #706d5f;
padding-left: 18px;
border-left: 2px solid #bdbbb1;
}
#contact dt{
font-weight: bold;
color: #bdbbb1;
text-transform: lowercase;
margin-top: 15px;
}
#contact dt:first-child{
margin-top: 0;
}
#contact dt.first{
margin-top: 0;
}
#contact a{
color: #706d5f;
}
#gps{
font-weight: bold;
font-size: 14px;
color: #878370;
}
/* Our Services */
#services{
margin: 40px 0 0 0;
position: relative;
z-index: 2;
}
#services h3{
margin: 0 0 12px;
padding-bottom: 12px;
border-bottom: 1px solid #bdbbb1;
}
#services ul{
/* Clearfixed */
background: #d1bd71;
}
#services li{
float: left;
margin: 0;
padding: 0;
background: none;
border-right: 1px solid #FFF;
width: 187px;
text-align: center;
position: relative;
}
#services li:last-child{
border-right: 0;
width: 188px;
}
#services li.last{
border-right: 0;
width: 188px;
}
#services li ul{
display: none;
}
#services h4{
font-size: 20px;
line-height: 22px;
height: 64px;
width: 167px;
padding: 10px;
color: #FFF;
text-transform: lowercase;
display: table-cell;
vertical-align: middle;
}
#services #toggle{
color: #bdbbb1;
position: absolute;
top: 12px;
right: 0;
font-weight: bold;
font-size: 16px;
text-transform: lowercase;
}
#services #toggle.show{
color: #bb9545;
}
#services #service-overlay{
background: #960;
position: absolute;
z-index: 10000;
width: 265px;
padding: 15px 20px;
}
#services #service-overlay ul{
display: block;
background: #960;
width: auto;
height: auto;
}
#services #service-overlay li{
border: none;
width: auto;
float: none;
text-align: left;
padding-right: 25px;
font-size: 18px;
text-transform: none;
font-weight: normal;
margin: 8px 0 0;
padding: 0 0 0 14px;
background: url(../images/bullet/whatwedo.png) no-repeat 2px 9px;
}
#services #service-overlay h4{
width: auto;
height: auto;
display: block;
text-align: left;
font-size: 24px;
line-height: 24px;
margin: 0 0 10px;
padding: 0;
}
/* Selected Work */
#case-studies{
position: relative;
margin-top:40px;
z-index: 1;
}
#case-studies h3{
border-bottom:1px solid #BDBBB1;
margin:0 0 12px;
padding-bottom:12px;
}
#case-studies .block{
float: left;
width: 940px;
}
#case-studies .row{
/* Clearfixed */
}
#case-studies ul{
position: relative;
width: 940px;
}
#case-studies li{
float: left;
margin-right: 14px;
}
#case-studies .active li{
margin-right: 21px;
}
#case-studies .active li.last{
margin-right: 0 !important;
}
#case-studies .active li:last-child{
margin-right: 0 !important;
}
#case-studies .active .block{
position: absolute;
float: none;
top: 0;
left: 0;
}
#s-nav{
position: absolute;
top: 13px;
right: 0;
font-size: 16px;
font-weight: bold;
color: #878370;
text-transform: lowercase;
}
#s-nav a.disabled{
color: #bdbbb1;
cursor: default;
}
#s-nav a.disabled:hover{
text-decoration: none;
}
#s-next{
margin-right: 10px;
}
#s-prev{
margin-left: 10px;
}
/* Client listing */
#clients{
/* Clearfixed */
margin-top: 40px;
}
#clients ul{
width: 940px;
}
#clients h3{
border-bottom:1px solid #BDBBB1;
margin:0 0 12px;
padding-bottom:12px;
}
#clients div{
width: 293px;
float: left;
margin-right: 27px;
}
#clients div:last-child{
margin: 0;
width: 292px;
float: left;
outline: none;
}
#clients div.last{
margin: 0;
width: 292px;
float: left;
outline: none;
}
#clients li{
padding-left: 0;
background: none;
font-size: 18px;
line-height: 24px;
}
#clients a:after{
content: '\A0\BB';
}
/* ===== Reusable elements ===== */
/* Generic page of content */
.page{}
/* Page header/masthead */
.page #masthead{}
.page #masthead div{
margin: 0;
padding: 0;
}
.page #masthead h2{
/* Uses image replacement */
margin: 85px 0 75px;
background-repeat: no-repeat;
background-position: left;
font-size: 82px;
line-height: 82px;
color: #FFF;
font-weight: normal;
letter-spacing: -3px;
}
.jobposting #masthead h2{
margin: 50px 10px 40px;
}
.whatwedo #masthead h2{
margin: 50px 0 15px;
}
#case-study.whatwedo #masthead h2 {
margin-top: 0;
}
.howtoreachus #masthead h2{
margin: 50px 0 57px 10px;
}
.jobposting #masthead .intro p{
font-size: 22px !important;
line-height: 32px !important;
margin-bottom: 30px;
padding-left: 10px;
}
.jobposting #masthead #supertitle{
/* Clearfixed */
border-bottom: 1px solid #D1A17F;
margin-top: -20px;
}
.jobposting #masthead #supertitle #breadcrumb{
padding: 20px 20px 20px 10px;
float: left;
}
.jobposting #masthead #supertitle #breadcrumb a{
/* Uses image replacement */
display: block;
float: left;
width: 31px;
height: 78px;
background: url(../images/button/backarrow.png) no-repeat;
}
.jobposting #masthead #supertitle #title{
width: 832px;
float: left;
font-size: 44px;
line-height: 44px;
color: #FFF;
margin: 0;
background-position: left;
background-repeat: no-repeat;
top: 45px;
left: 0;
position: relative;
}
/* Page main content well */
.page #main{
width: 600px;
float: left;
padding: 0 0 45px 10px;
}
.page #main li{
background-position: 2px 9px;
font-size: 15px;
line-height: 22px;
z-index: 99;
}
.page #main li.top{
z-index: 100;
}
.jobposting #main p{
font-size: 15px;
line-height: 22px;
}
.howtoreachus .page #main{
width: 940px;
padding-left: 0;
}
.whatwedo .page #main{
width: 940px;
padding-left: 0;
}
/* Page sidebar */
#sidebar{
width: 300px;
float: right;
}
#sidebar :first-child{
margin-top: 0 !important;
}
#sidebar .first{
margin-top: 0 !important;
}
/* 'Callout'-style sidebar block */
#sidebar .callout{
background: #F0F;
color: #FFF;
padding: 18px 20px 25px;
border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;
margin: 25px 0;
}
#sidebar .callout h3{
margin-top: 0;
}
#sidebar .callout ul{
margin-top: 10px;
}
#sidebar .callout li{
font-size: 16px;
line-height: 20px;
margin: 13px 0;
}
#sidebar .callout a{
color: #FFF;
}
/* 'List'-style sidebar block */
#sidebar .list{
border-left: 2px solid #bdbbb1;
margin: 30px 0;
padding: 0 0 10px 18px;
}
#sidebar .list h3{
font-size: 20px;
line-height: 20px;
color: #afaca0;
position: relative;
top: -5px;
margin-bottom: 8px;
}
#sidebar .list li{
font-size: 14px;
line-height: 18px;
font-weight: bold;
margin: 10px 0;
}
/* 'The Facts' sidebar block (inherits from .list) */
#sidebar #facts{
position: relative;
}
.has-displayTable #sidebar #facts{
height: 175px;
}
#sidebar #facts.active{
padding: 0 0 30px 18px;
}
#sidebar #facts h3{
font-size: 24px;
}
#sidebar #facts ul{
position: relative;
}
#sidebar #facts li{
padding: 0;
margin: 0;
background: none;
display: none;
}
.has-displayTable #sidebar #facts li{
position: absolute;
top: 0;
left: 0;
}
#sidebar #facts li:first-child{
display: block;
}
#sidebar #facts li.first{
display: block;
}
#sidebar #facts li:last-child{
margin-bottom: 0;
}
#sidebar #facts li.last{
margin-bottom: 0;
}
#sidebar #facts h4{
font-size: 18px;
line-height: 20px;
text-transform: lowercase;
position: relative;
top: 6px;
width: 217px;
}
#sidebar #facts .amt{
font-size: 120px;
line-height: 120px;
display: block;
vertical-align: middle;
padding-right: 12px;
}
.has-displayTable #sidebar #facts .amt{
display: table-cell;
}
#sidebar #facts .unit{
display: block;
vertical-align: middle;
font-size: 15px;
line-height: 20px;
font-weight: normal;
}
.has-displayTable #sidebar #facts .unit{
display: table-cell;
}
#sidebar #facts #facts-nav{
position: absolute;
bottom: 6px;
left: 15px;
}
#sidebar #facts #facts-nav li{
display: block;
float: left;
position: static;
margin: 0;
}
#sidebar #facts #facts-nav a{
/* Image replacement */
width: 21px;
height: 20px;
display: block;
overflow: hidden;
background: url(../images/billboard/dots.gif) no-repeat -21px 0;
}
#sidebar #facts #facts-nav li.active a,
#sidebar #facts #facts-nav a:hover{
background-position: 0 0;
}
/* Twitter feed */
#twitter{
background: #FFF;
margin: 30px 10px;
padding: 14px 15px 17px 80px;
position: relative;
border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px;
}
#twitter.activated{
padding-right: 50px;
}
#twitter h2{
position: absolute;
top: 0;
left: 0;
font-size: 18px;
line-height: 20px;
padding: 15px 0 0 15px;
}
#twitter li{
background: none;
font-size: 18px !important;
line-height: 22px !important;
margin: 15px 0 0;
padding: 15px 0 0;
border-top: 1px solid #e9e8e4;
}
#twitter li:first-child{
margin-top: 0;
padding-top: 0;
border: none;
}
#twitter li.first{
margin-top: 0;
padding-top: 0;
border: none;
}
#twitter li a{
font-weight: bold;
}
#twitter #toggle{
/* Uses image replacement */
position: absolute;
bottom: 15px;
right: 15px;
display: block;
height: 20px;
width: 20px;
background: url(../images/button/toggle.png) 0 0;
}
#twitter #toggle:hover{
background-position: -20px 0;
}
#twitter.open #toggle{
background-position: 0 -20px;
}
#twitter.open #toggle:hover{
background-position: -20px -20px;
}
.howtoreachus #twitter{
clear: both;
margin: -5px 10px;
}
.howtoreachus #twitter a{
color: #CA6F12;
}
/* List of portfolio items */
.portfolio{}
.portfolio li{
background: #ca6f12;
padding: 145px 15px 10px;
width: 269px;
position: relative;
}
.portfolio li.hover{
background: #9f3407;
}
.portfolio li h3,
.portfolio li h4{
font-size: 16px;
line-height: 16px;
font-weight: bold;
color: #FFF;
margin: 0;
text-transform: none;
}
.portfolio li h3 a,
.portfolio li h4 a{
color: #FFF;
}
.portfolio li .image{
position: absolute;
top: 0;
left: 0;
}
.portfolio li .role{
font-size: 12px;
font-weight: bold;
color: #e5b789;
line-height: 18px;
}
/* Case study */
#case-study{}
#case-study #masthead{
margin-top: 80px;
border-top: 1px solid #e1d2ab;
position: relative;
}
#case-study h2{
color: #FFF;
font-weight: normal;
text-transform: none;
font-size: 36px;
line-height: 36px;
position: absolute;
top: -58px;
left: 20px;
}
#case-study #selected-works{}
#case-study #selected-works h3{
position: absolute;
top: -66px;
right: 13px;
font-size: 14px;
line-height: 24px;
margin: 0;
}
#case-study #selected-works h3 a{
height: 24px;
padding: 15px 35px 15px 70px;
display: block;
float: right;
color: #f2eadc;
background: url(../images/button/casestudies.gif) no-repeat top right;
opacity: 0.575;
}
#case-study #selected-works h3 a:hover{
opacity:0.99;
text-decoration: none;
}
#case-study #selected-works h3 a.open{
background-position: bottom right;
}
#case-study #selected-works ul{
background: #ebeae7 url(../images/background/study_list.png) repeat-x top;
display: none;
padding: 1px 5px;
}
#case-study #selected-works ul .col{
width: 200px;
float: left;
padding: 10px 15px;
}
#case-study #selected-works .active a{
color: #878370;
}
#case-study #selected-works li{
background: none;
padding-left: 0;
margin: 0;
line-height: 18px;
padding: 10px 0;
border-bottom: 1px solid #D4D2CC;
}
#case-study #selected-works li:last-child{
border-bottom: 0;
}
#case-study #selected-works li.last{
border-bottom: 0;
}
#case-study #study-header{
position: relative;
}
#case-study #images{
position: absolute;
bottom: 0;
right: 0;
}
#case-study #images.active #screens{
position: static !important;
}
#case-study #images.active h3{
position: absolute;
visibility: visible;
bottom: 0;
right: 0;
background: #a56a16;
border-top: 1px solid #dccfa1;
width: 258px;
padding: 1px;
text-align: right;
margin: 0;
font-size: 14px;
line-height: 15px;
letter-spacing: 0;
}
#case-study #images.active h3 a{
display: block;
padding: 10px 20px 12px;
}
#case-study #images.active h3.loading{
background-image: url(../images/placeholder/loading.gif);
background-repeat: no-repeat;
background-position: 68px 6px;
}
#case-study #images #screens{
background: #a56a16;
border-top: 1px solid #dccfa1;
width: 258px;
padding: 1px;
}
#case-study #images li{
margin: 10px 20px 12px;
text-align: right;
background: none;
font-size: 13px;
line-height: 15px;
font-weight: bold;
}
#case-study #images a{
color: #d2b58b;
text-transform: lowercase;
}
#case-study #images a:hover{
text-decoration: none;
color: #FFF;
}
#case-study #images a:after{
content: '\A0\A0\203A';
font-weight: normal;
font-size: 19px;
position: relative;
top: 2px;
}
#case-study #headline{
font-size: 44px;
line-height: 44px;
margin: 30px 10px 20px;
color: #b99140;
background-repeat: no-repeat;
}
#case-study #main{
width: 630px;
margin: -6px 0 0 10px;
float: left;
padding-bottom: 35px;
}
#case-study #main p{
margin: 0 0 20px;
}
#case-study #sidebar{
float: right;
width: 261px;
padding-bottom: 35px;
}
#case-study #sidebar h3{
margin-bottom: -6px;
}
#case-study #sidebar li{
font-weight: normal;
font-size: 16px;
line-height: 20px;
margin: 8px 0;
background-position: 2px 8px;
}
#case-study #sidebar h4{
font-size: 16px;
line-height: 20px;
color: #bb9545;
margin: 16px 0 8px;
text-transform: lowercase;
}
/* ===== Alternate color schemes ===== */
/* 'Who we are' section (blueish scheme) */
body.whoweare{
background-image: url(../images/background/waves/whoweare.jpg);
}
.whoweare a{
color: #6e8f92;
}
.whoweare #header,
.whoweare #header #nav li a:hover,
.whoweare #whoweare a,
.whoweare .jobposting #masthead #supertitle{
border-bottom-color: #94b5b9;
}
.whoweare p.intro,
.whoweare div.intro {
color: #296d7a;
}
.whoweare #sidebar .callout{
background: #6e8f92;
}
.whoweare #sidebar .callout li{
background-image: url(../images/bullet/whoweare_callout.png);
}
.whoweare #sidebar .list li{
background-image: url(../images/bullet/whoweare_list.png);
}
/* 'What we do' section (yellowish scheme) */
body.whatwedo{
background-image: url(../images/background/waves/whatwedo.jpg);
}
.whatwedo #header,
.whatwedo #header #nav li a:hover,
.whatwedo #whatwedo a{
border-bottom-color: #d0b98f;
}
.whatwedo #sidebar .list li{
background-image: url(../images/bullet/whatwedo.png);
}
.whatwedo p.intro{
color: #960;
}
.whatwedo a{
color: #bb9545;
}
.whatwedo .portfolio li{
background: #bb9545;
}
.whatwedo .portfolio li.hover{
background: #960;
}
.whatwedo .portfolio li .role{
color: #ddcaa2;
}
/* 'How to reach us' section (greyish scheme) */
body.howtoreachus{
background-image: url(../images/background/waves/howtoreachus.jpg);
}
.howtoreachus #header,
.howtoreachus #header #nav li a:hover,
.howtoreachus #howtoreachus a{
border-bottom-color: #b2b0a7;
}
.howtoreachus a{
color: #706d5f;
}
#listener{
position: fixed;
top: 0;
right: 0;
height: 1px;
width: 1px;
text-indent: -999em;
overflow: hidden;
}
/* ===== Utility rules ===== */
/* Image replacement */
h1 a,
#twitter #toggle,
#blog-promo h2,
.jobposting #masthead #supertitle #breadcrumb a,
#slide-prev a,
#slide-next a,
#highlights-prev a,
#highlights-next a,
#highlights-nav li a,
#sidebar #facts #facts-nav a,
#infowindow-threespot,
.error #content h2{
text-indent: -999em;
overflow: hidden;
}
/* Hidden elements */
#accessibility,
#highlights h2,
#case-study #images h3,
#case-study #images.active #screens,
#slideshow h3{
position: absolute;
visibility: hidden;
}
/* Clearfix */
#billboard:after,
#blog-promo:after,
.page:after,
.jobposting #masthead #supertitle:after,
#case-study #selected-works ul:after,
#case-study #content:after,
#sidebar #facts li:after,
#map:after,
#about:after,
#services ul:after,
#case-studies .row:after,
#case-studies ul:after,
#clients:after{
clear: both;
display: block;
content: ".";
height: 0;
visibility: hidden;
}