/* * * * doing things a bit differently in this one, all selectors are grouped by major * element and it's children. * * */ /* TODO MAIN NAV HILITES */ /** ========== $general ===========*/ body { margin: 0; padding: 0; font-family: arial, helvetica, sans-serif; text-decoration: none; font-size: 12px; color: #525252; text-align: center; background: #e9e8e8 url(/images/bg_body.gif) top left repeat-x; } div, img, dl, dt, dd, ul, li, p, h1, h2, h3, h4, h5, h6, table tr, td, th, tbody, br { border: 0; margin: 0; padding: 0; } select { margin: 0; padding: 0; } img { display: block; } p { line-height: 1.5em; } .noBottom { margin-bottom: 0; } a { color: #006269; text-decoration: none; overflow: hidden; } a:hover { text-decoration: underline; } a#backLink { float: left; display: inline; margin: 0 15px 0 12px; } a.smallBold { font-size: 11px; font-weight: bold; } .floatLeft { float: left; display: inline; } /** ============= $headers global (there are more specific settings within) =========== */ h1,h3,h4 { color: #3b3b3b; } h1, h2.archiveHeader { margin: 0 0 10px 0; padding: 7px 10px; font-size: 12px; text-transform: uppercase; font-weight: bold; background: #dadad9 url(/img/bg_h1.gif) top left repeat-x; } /** ============= $divs general and structural =========== */ div#wrap { position: relative; width: 918px; margin: 0 auto; text-align: left; background: #fff; } /** homepage tabs thingy */ div#homeTabs { float: left; display: inline; width: 918px; margin: 0 0 30px 0; } div#homeTabsL { float: left; display: inline; width: 857px; } div#homeTabsR { float: right; display: inline; width: 61px; padding-top:60px; } div#homeTabsR ul { float: right; display: inline; } div#homeTabsR ul li { list-style-type: none; margin-bottom: 8px; width: 33px; height: 31px; } div#homeTabsR ul li a, div#homeTabsR ul li a span { display: block; width: 33px; height: 31px; text-indent: -9999px; } div#homeTabsR ul li a#pane1 { background: url(/img/sprite_home_rotator.gif) 0px 0px no-repeat; } div#homeTabsR ul li a#pane2 { background: url(/img/sprite_home_rotator.gif) 0px -37px no-repeat; } div#homeTabsR ul li a#pane3 { background: url(/img/sprite_home_rotator.gif) 0px -73px no-repeat; } div#homeTabsR ul li a#pane4 { background: url(/img/sprite_home_rotator.gif) 0px -111px no-repeat; } div#homeTabsR ul li a#pane1:hover { background-position: -33px 0px; } div#homeTabsR ul li a#pane2:hover { background-position: -33px -37px; } div#homeTabsR ul li a#pane3:hover { background-position: -33px -73px; } div#homeTabsR ul li a#pane4:hover { background-position: -33px -111px; } div#homeTabsR ul li.ui-tabs-selected a#pane1 { background-position: -33px 0px; } div#homeTabsR ul li.ui-tabs-selected a#pane2 { background-position: -33px -37px; } div#homeTabsR ul li.ui-tabs-selected a#pane3 { background-position: -33px -73px; } div#homeTabsR ul li.ui-tabs-selected a#pane4 { background-position: -33px -111px; } .ui-tabs-hide { display: none; } /** sub page layout */ div#mainContent, div#colL, div#colR, div#colRInner, div.padWrap { float: left; display: inline; } div#colL { width: 221px; padding: 7px 0 0 30px; } div#colR { width: 604px; margin: 0 0 0 30px; } div#colRInner, div#colRInner div.padWrap { width: 576px; padding: 12px 14px; } body.sectorLanding div#colRInner, body.archive div#colRInner, body.form div#colRInner, body.careerListing div#colRInner, body.cultureList div#colRInner, body.newsletter div#colRInner { width: 604px; padding: 0; } div#innerL, div#innerR, div#sitemapL, div#sitemapR { float: left; display: inline; } div#innerL { width: 373px; padding: 0 50px 0 0; } div#innerR { width: 150px; } div#sitemapL { width: 285px; } div#sitemapR { width: 285px; } /** ============= $topBar, $footer and children =========== */ div#topBar, div#topBar p, div#footer, div#footer p#footerL { float: left; display: inline; font-size: 10px; font-weight: bold; color: #3b3b3b; } div#topBar, div#footer { width: 894px; padding: 5px 12px; background: #c8c6c6 url(/img/bg_top_bar.gif) top left repeat-x; } div#footer { margin-top: 20px; } div#topBar p { width: 390px; margin-left: 17px; } div#topBar ul { float: right; display: inline; } div#topBar ul li { float: left; display: inline; padding: 0 7px 0 5px; list-style: none; font-size: 10px; background: url(/img/bg_login_links.gif) 100% 1px no-repeat; } div#topBar ul li.last { background: none; } div#topBar ul li a { color: #3b3b3b; text-decoration: none; text-transform: uppercase; font-weight:bold; } div#topBar ul li a:hover, div#footer a:hover { text-decoration: underline; } div#footer p#footerL, div#footer p#footerR { font-weight: normal; } div#footer p#footerR { float: right; display: inline; font-size: 10px; } div#footer a { color: #3b3b3b; text-decoration: none; } /** ============= $header, $nav and children =========== */ div#header, a#logo, ul#nav { float: left; display: inline; } div#header { width: 888px; margin: 0 0 40px 0; padding: 0 0 0 30px; } body.detail div#header { margin: 0 0 20px 0; } a#logo { margin: 27px 16px 0 0; } ul#nav { margin: 25px 0 0 0; } ul#nav li { float: left; list-style:none; } ul#nav li a { display: block; height: 37px; text-indent: -9999px; background: url(/img/nav_sprite.gif) 0 0 no-repeat; } ul#nav li#company a { width: 114px; background-position: 0px 0px; } ul#nav li#services a { width: 150px; background-position: -114px 0px; } ul#nav li#careers a { width: 76px; background-position: -263px 0px; } ul#nav li#sustain a { width: 114px; background-position: -341px 0px; } ul#nav li#news a { width: 61px; background-position: -454px 0px; } ul#nav li#contact a { width: 105px; background-position: -516px 0px; } /* hovers */ ul#nav li#company a:hover { background-position: 0px -37px; } ul#nav li#services a:hover { background-position: -114px -37px; } ul#nav li#careers a:hover { background-position: -263px -37px; } ul#nav li#sustain a:hover { background-position: -341px -37px; } ul#nav li#news a:hover { background-position: -454px -37px; } ul#nav li#contact a:hover { background-position: -516px -37px; } /** main nav drops */ ul#nav li ul { float: left; display: inline; background: #f2f2f2; } ul#nav li ul li { display: block; } ul#nav li ul li a { display: block; width: 145px !important; height: auto; padding: 7px 14px 7px 14px; font-weight: bold; background: #f2f2f2; text-indent: 0; } ul#nav li ul li a:hover { background: #fff; text-decoration:none; } /* contact hack */ ul#nav li#contact ul li a { width: 105px !important; } /** ============= $homecontent and children =========== */ div#homeContent, div#homeContent div { float: left; display: inline; } div#homeContent { margin: 0; padding: 0 0 0 30px; width: 888px; } div#homeContent p { font-size: 11px; margin: 0 0 .9em 0; padding: 0 11px; } div#homeContent p a { text-decoration: none; } div#homeContent p a:hover { text-decoration: underline; } div#recentNews { width: 220px; } div#highlights { width: 604px; margin: 0 0 0 30px; } div#highlightsFlash { width: 604px; height: 163px; background: #fff; } /** ============= $navHeaders =========== */ h2#navHeader { text-indent: -9999px; height: 21px; margin: 0 0 8px 0; } body.company h2#navHeader { background: url(/img/nav_head_company.gif) top left no-repeat; } body.services h2#navHeader { background: url(/img/nav_head_services.gif) top left no-repeat; } body.news h2#navHeader { background: url(/img/nav_head_news.gif) top left no-repeat; } body.sustainability h2#navHeader { background: url(/img/nav_head_sustain.gif) top left no-repeat; } body.careers h2#navHeader { background: url(/img/nav_head_careers.gif) top left no-repeat; } body.contact h2#navHeader { background: url(/img/nav_head_contact.gif) top left no-repeat; } /** ============= $colL $tier1 nav $culture highlights and children =========== */ ul#tier1 { float: left; display: inline; margin: 0 0 25px 0; } ul#tier1 li { float: left; display: inline; width: 100%; list-style: none; background: url(/img/nav_tier1_dots.gif) bottom left no-repeat; } ul#tier1 li a { display: block; width: 170px; padding: 8px 0 8px 14px; text-decoration: none; } ul#tier1 li a:hover, ul#tier1 li a#tier1on, ul#tier1 li a#tier1onDaddy { background: url(/img/nav_tier1_arrow.gif) 0 45% no-repeat; } ul#tier1 li#daddy { padding-bottom: 8px; } ul#tier1 li a#tier1onDaddy { padding-bottom: 4px; background-position: 0 54%; } ul#tier2 { padding-bottom: 6px; } ul#tier2 li { background: none; } ul#tier2 li a { padding: 3px 0 3px 24px; font-size: 11px; } ul#tier2 li a:hover, ul#tier2 li a#tier2on { color: #197178; background: url(/img/nav_tier2_arrow.gif) 14px 45% no-repeat; } /** left col highlights element */ h3.highlightsHeader, h3.highlightsHeader span, h3.highlightsHeader img { float: left; display: inline; } h3.highlightsHeader { width: 203px; margin: 0 0 4px 0; padding: 4px 5px 4px 14px; font-size: 12px; font-weight: bold; background: #e7e7e7 url(/img/bg_highlights.gif) top left repeat-x; } h3.highlightsHeader img, h3.highlightsHeader a.modalLink { float: right; display: inline; } h3.highlightsHeader a.modalLink { display: block; text-indent:-9999px; width:13px; height:13px; background: url(/img/icon_highlights2.gif) top left no-repeat; } h3.highlightsHeader a.modalLink:hover { background-position: bottom left; } h3.moreBottom { margin-bottom: 12px; } div.highlightsBox { margin: 0 0 35px 0; width: 222px; } div.inPage { margin: 0; width: 178px; } div.highlightsBox span { display: block; background: #f2f2f2; font-size: 10px; padding: 4px 5px 4px 14px; } div.highlightsBox span a { font-weight: bold; } div.highlightsBox span span { display:inline; padding: 0; } div.highlightsBox a.buttPrev { float: left; display: inline; } div.highlightsBox a.buttNext { float: right; display: inline; } div#colL p { float: left; display: inline; width: 180px; margin: 0 0 25px 0; padding: 0 14px 0 14px; font-size: 11px; line-height: 1.2em; } div#colL p.lessBottom { margin-bottom: 10px; } div#colL p a { text-decoration: none; font-weight: bold; } div#colL p a:hover { text-decoration: underline; } img.leftColImage { float:left; display:inline; margin: 0 0 25px 0; } img.sustain { margin-left: 25px; } div#marketingVideo { float: left; display: inline; width: 320px; height: 290px; } /** ============= $colR and children =========== */ /** paragraphs */ div#colR p { margin: 0 0 20px 0; } div#colR p a, div#colR ul a, div#colR ol a { font-weight:bold; } div#colR p.quote { padding: 0 0 0 17px; font-size: 16px; line-height: 1.2em; color: #1e5155; background: url(/img/icon_quote_left.gif) 0 2px no-repeat; } div#colR p.quote span { float: left; display: inline; width: 20px; background:red; } div#colR div.listingItemLeft p { margin:0; } body.form div#colR p.intro, body.form p.errors, body.form h3 { margin: 10px 0; padding-left: 14px; } body.form p.errors { color: #2171DA; } body.cultureList div#colR p.intro { width: 400px; padding-left: 12px; } /** lists */ div#colR ul { margin: 0 0 20px 20px; } div#colR ul li { line-height: 1.5em; } div#colR ul.details { margin: 0 0 25px 0; border-left: 17px solid #f2f2f2; } body.detail div#colR ul.details { margin-bottom: 12px; } ul.details li { padding: 0 0 0 5px; font-size: 10px; list-style:none; } div#colR ul.archiveList { list-style:none; margin-left:0; } dl.recentItem { margin: 0 0 10px 0; padding: 0 0 10px 0; font-size: 10px; background: url(/img/bg_148_dots.gif) bottom left no-repeat; } dl.recentItem dt, dl.recentItem dd { padding-right: 10px; } dl.recentItem dt { margin-bottom: 2px; } dl.recentItem dd a { font-weight: bold; } /** headers */ div#colR h2, div#colR h2 a { margin: 0 0 1em 0; font-size: 16px; line-height: 1.4em; color: #1e5155; font-weight: normal; } div#colR h2 a:hover { text-decoration:underline; } div#colR h2.archiveHeader { font-size:12px; color: #3b3b3b; font-weight:bold; } div#colR h2.noBottom { margin-bottom: 0; } body.detail div#colR h2 { font-size: 18px; margin-bottom: .6em; } body.detail div#colR h2.withNav, div#colR h2.withNav { margin-bottom: 0; } div#colR h2.moreTop { margin-top:15px; } h3.listHead { font-size: 12px; line-height: 1.4em; } h4.recentProjects { margin: 15px 0 12px 0; padding: 0 0 12px 0; background: url(/img/bg_148_dots.gif) bottom left no-repeat; font-size: 10px; font-weight: bold; } /** images */ div#innerR img { padding: 2px; border:1px solid #d1d1d1; margin: 0 0 14px 0; } div#colR p.quote img { display: inline; } div#colR img#hero { float: left; display: inline; margin-bottom: 16px; padding: 2px; border: 1px solid #d1d1d1; } div.imgCreditLink { width: 150px; font-size: 11px; margin-bottom: 10px; } div#innerR div.imgCreditLink img { margin-bottom: 5px; } /** featured project element */ div.featured { margin: 0 0 10px 0; } div.featured a { font-size: 11px; } div.featured span { font-size: 10px; } div#innerR div.featured img { margin: 0 0 3px 0; } div#colR div.featured ul { margin: 0; padding: 0; } div#colR div.featured ul li { margin: 0; padding: 0; list-style: none; list-style-position: outside; font-size: 10px; line-height: 1.2em; } div#colR div.featured ul li.name { font-size: 11px; } /** in page nav */ div#colR ul#inPageNav { float: left; display: inline; margin: 0 0 25px 0; } ul#inPageNav li { float: left; display: inline; width: 100%; list-style: none; background: url(/img/nav_inpage_dots.gif) bottom left no-repeat; } ul#inPageNav li a { display: block; width: 241px; padding: 4px 4px 4px 14px; font-size: 11px; text-decoration: none; } ul#inPageNav li a:hover { color: #197178; background: url(/img/nav_tier1_arrow.gif) 0 45% no-repeat; } /** sector/archive/office item element */ div.sectorItem, div.sectorItemL, div.archiveItem, div.archiveItemL, div.officeItem, div.officeItem ul, div.listingItem, div.listingItemLeft { float: left; display: inline; } div.sectorItem img, div.officeItem img, div.archiveItem img, div.listingItem img { padding: 2px; border: 1px solid #d1d1d1; } div.listingItemLeft { width: 380px; } div.listingItemRight { float: right; display: inline; } div.listingItemRight { width:182px; padding-top:12px; } div.sectorItem, div.archiveItem, div.officeItem, div.listingItem { width: 576px; margin: 0 0 5px 0; padding: 12px 14px; } div.sectorZebra, div.archiveZebra, div.officeZebra, div.listingZebra { background: #f2f2f2; } div.sectorItemL, div.archiveItemL { width: 385px; } body.cultureList div.sectorItemL { width: 375px; } div#colR div.sectorItemL p, div#colR div.archiveItem p { margin: 0 0 3px 0; } div.sectorItemL a, div.archiveItem a { font-size: 10px; font-weight: bold; } div.sectorItemR, div.archiveItemR { float: right; display: inline; width: 150px; } body.cultureList div.sectorItemR { width: 178px; } div#colR div.sectorItem h2, div#colR div.archiveItem h2, div#colR div.officeItem h2, div#colR div.listingItem h2 { margin: 0; } div#colR div.sectorItem h3, div#colR div.archiveItem h3 { margin: 0 0 .5em 0; font-size: 12px; } div#colR div.officeItem ul { width: 185px; margin: 0; padding: 0; } div#colR div.officeItem ul li { list-style: none; list-style-position: outside; } div#colR div.listingItem h3 { margin: 0 0 3px 0; } div#colR div.listingItem h3.subTitle { font-size:13px; } div#colR div.listingItem h3, div.listingItem span.title, div.listingItem span.location { float: left; display: inline; } div.listingItem span.location { padding: 1px 0 0 20px; font-weight:normal; font-size: 12px; } div.listingItem a.apply, div#colR a.apply, div#colR a.back { font-weight:bold; font-size:10px; } div#colR a.back { margin: 0 0 0 12px; } div#colR div.listingItem div.requirementsWrap p { margin:0; } a.viewProjectLink { float:right;display:inline; } /** creditItem */ div.creditItem { float: left; display: inline; width: 220px; margin: 0 40px 25px 0; } div.creditItem img { margin-bottom: 5px; } /** $headerNav */ div#headerDrop, div#headerDrop span { float: left; display: inline; } div#headerDrop { width: 610px; margin: 0 0 10px 0; font-size: 12px; text-transform: uppercase; font-weight: bold; background: #dadad9 url(/img/bg_h1.gif) top left repeat-x; } div#headerDrop span { padding: 7px 0px 7px 8px; background: url(/img/header_arrow2.gif) center right no-repeat; } div#headerDrop span.dropName { width: 187px; padding-right: 5px; } div#headerDrop span.noArrow { width: 85px; background:none; } div#headerDrop span.arrow { width: 85px; } div#headerDrop span.projectName { width: 290px; background:none; } div#colR ul#headerNav { float: left; display: inline; margin:0; padding:0; background: url(/img/header_arrow2.gif) center left no-repeat; } ul#headerNav li { list-style: none; } ul#headerNav li#parent { padding-left: 18px; } ul#headerNav li a { display: block; padding: 5px 0; font-weight: normal; width: 295px; text-transform: none; text-decoration:none; background: url(/img/bg_nav_header_arrow_down.gif) 99% 50% no-repeat; } ul#headerNav li ul { width: 310px; background: #f2f2f2 url(/img/bg_header_nav_top.gif) top left repeat-x; } ul#headerNav li ul li { float: left; display: inline; background: url(/img/bg_nav_header_dots.gif) bottom center no-repeat; } ul#headerNav li ul li a { background: none; font-weight: normal; padding: 4px 10px 4px 14px; width: 290px; } ul#headerNav li ul li a:hover { text-decoration: underline; } /* $forms */ div#formWrap, div.formLeft, div.formRow, div#formWrap label { float: left; display: inline; } div#formWrap { width: 576px; margin: 0 0 5px 0; padding: 12px 14px; background: #f2f2f2; } body.services div#formWrap { width: 400px; } div#formWrap .topMarg { margin-top: 10px; } div#formWrap label { width: 275px; margin: 0 0 3px 0; font-weight: bold; font-size: 13px; } div.formLeft, div.formRight { margin: 0 0 2px 0; } div.formLeft { width: 285px; } div.formRight { float: right; display: inline; width: 285px; } div#formWrap span { font-size: 10px; display: block; padding: 2px; } div#first, div#last, div#first input, div#last input { float: left; display: inline; width: 130px; } div#first { margin-right: 10px; } input.full { width: 270px; } input.num3, input.num4 { margin-right: 3px; } input.num3 { width: 30px; } input.num4 { width: 35px; } div#city, div#city input, div#state, div#state input, div#zip, div#zip input, div#country, div#country select { float: left; display: inline; } div#city, div#city input { width: 208px; } div#state { margin-left: 12px; } div#state, div#state input { width: 50px; } div#zip, div#zip input { width: 85px; } div#country { margin-left: 12px; } div#country, div#country select { width: 180px; } div#formWrap textarea { width: 565px; height: 125px; margin: 0 0 15px 0; font-family: arial, sans-serif; font-size: 12px; } div.buttons, div.buttons input, div.buttons a { float: left; display: inline; } div.buttons a { margin: 2px 0 0 7px; } div.login, div.login input, div.login label { float: left; display: inline; } div.login { padding: 20px 0 0 0; } div.login input { width: 235px; font-size: 16px; } div#formWrap div.login label { font-weight: bold; width: 100px; padding: 3px 10px; } /* for any public facing forms: */ div.error-message { padding: 3px 0px; color: #2171DA; } /** tables */ table.extraInfo { margin-bottom: 20px; } table.extraInfo td.title { font-weight: bold; width: 100px; padding: 2px 0; } div#SignUp {padding: 0 14px;} div#SignUp font { font-weight: bold; font-size:11px; } div#SignUp td { padding-bottom: 5px; }