/************************************************************************ Site: http://www.bluedogdesign.com/ Author: George Huff, We The Media [www.wtmworldwide.com] Client: George Huff [http://www.eleven3.com/] Notes: Redesign and Build Date: 9-7-07 Listing Order: ============== 1 - Global 2 - Structural 3 - Entry & Left Column 4 - Commment 5 - Archive 6 - Side Panel 7 - Secondary Content ************************************************************************/ /*********************************************************************** 1 - GLOBAL STYLES ************************************************************************/ body { background: #fff url(images/bg_body.gif) 0px 40px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #6d6e71; margin: 0; padding: 150px 0 0 0; } * { margin: 0; padding: 0; border: 0; } a { text-decoration:none; color: #d5300c; } a:hover { text-decoration:underline; } .clear {clear:both;} .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix {display:block;} /* End hide from IE Mac *//* end clearing */ /* replace */ .replace {text-indent:-10000px; display: block; width: 100%; height: 100%; outline: none;} .replace * {text-indent:-10000px;display:block;background-repeat:no-repeat;background-position:left top;background-color:transparent;} /*.replace a {text-indent:0;}*/ .replace a span {} /* end replace */ /*********************************************************************** 1 - GLOBAL LAYOUT STYLES ************************************************************************/ div#welcome_overlay { position: absolute; left: 0; top: 0; width: 100%; height: 600px; background: url(images/welcome.png) 0px 0px no-repeat; } a#welcome_link { display: block; width: 100%; height: 100%; z-index: 150; position: absolute; top: 0; left: 0; outline: none;} div#container { width: 100%; margin: 0 auto; overflow: hidden; background: url(images/bg_container_bg.png) center top no-repeat; z-index: -10; } div#content { width: 960px; margin: 0 auto; height: 317px; padding-top: 8px; position: relative; } /*********************************************************************** 1 - CONTENT STYLES ************************************************************************/ div.content { position: relative; } p { line-height: 181%; margin-bottom: 7px; } p.wee_bit_bigger { font-size: 13px; } div.standard p { width: 330px; } div#ourview_panel p { width: 355px !important; } /* Logos */ div#logo_bluedog { background: url(images/logo_bluedog.gif); width: 70px; height: 54px; position: relative; bottom: 7px; } /* Header Text */ h1 { height: 18px; padding: 0; margin: 0; line-height: 0%; font-size: 4px;} h1#we_are_bluedog { background: url(images/text_weAreBluedog.gif) left top no-repeat; width: 357px; height: 18px; margin-bottom: 3px;} h1#the_world_oyster { height: 18px; width: 170px; float: left; background: url(images/text_worldOurOyster.gif) left top no-repeat;} h1#our_global_view { height: 18px; width: 288px; background: url(images/text_ourGlobalViews.gif) left top no-repeat; } h1#lets_talk { height: 18px; width: 313px; background: url(images/text_letsTalk.gif) left top no-repeat; } h1#careers { height: 18px; width: 56px; background: url(images/text_careers.gif) left top no-repeat; } /* Calls to Action */ div.call_to { position: absolute; top: 100px; right: 10px; height: 25px;} div.call_to a { display: block; width: 100%; height: 100%; } div#call_to_whatwedo { background: url(images/callto_whatWeDo.gif); width: 99px; } div#call_to_ourview { background: url(images/callto_ourViews.gif); width: 138px; } div#call_to_our_clients { background: url(images/callto_meetOurClients.gif) no-repeat; width: 131px; } div#call_to_contact { background: url(images/callto_soLetsMeet.gif); width: 109px; } /*********************************************************************** 1 - NAVIGATION STYLES ************************************************************************/ ul#navigation { position: absolute; left: 512px; top: 227px; } ul#navigation li { float: left; width: 79px; list-style: none; position: relative; z-index: 50;} ul#navigation li a { display: block; width: 100%; } li#link_home_bg a.selected { height: 39px; background:url(images/nav_on_home.gif); } li#link_capabilities_bg a.selected { height: 53px; background: url(images/nav_on_capabilities.gif); } li#link_ourview_bg a.selected{ height: 46px; background: url(images/nav_on_ourview.gif); } li#link_ourwork_bg a.selected{ height: 49px; background: url(images/nav_on_ourwork.gif); } li#link_contactus_bg a.selected{ height: 45px; background: url(images/nav_on_contact.gif); } li#link_home_bg a { height: 39px; background:url(images/nav_off_home.gif); } li#link_capabilities_bg a { height: 53px; background: url(images/nav_off_capabilities.gif); } li#link_ourview_bg a { height: 46px; background: url(images/nav_off_ourview.gif); } li#link_ourwork_bg a { height: 49px;background: url(images/nav_off_ourwork.gif); } li#link_contactus_bg a { height: 45px;background: url(images/nav_off_contact.gif); } /*********************************************************************** 1 - PANEL LAYOUTS ************************************************************************/ div#panel_container { width: 960px; height: 211px; position: relative; overflow:hidden; } div#panels {height: 220px; position: relative; overflow: hidden;} div.panel {width: 960px; height: 220px;float:left; position:relative;} /*********************************************************************** 1 - PANEL LAYOUTS ************************************************************************/ /* Standard Layouts */ div.standard div.picture { width: 326px; height: 211px; float: left; } div.standard div.content { width: 610px; height: 211px; float: left; padding: 22px 0px 0px 24px; } div#home_panel div.picture { background: url(images/bg_picture_home.jpg) left top no-repeat; } div#capabilities_panel div.picture { background: url(images/bg_picture_capabilities.jpg); } div#ourview_panel div.picture { background: url(images/bg_picture_ourview.jpg); } div#contactus_panel div.picture { background: url(images/bg_picture_contactus.jpg); } div#ourview_panel div.content { width: 569px; padding: 43px 0px 0px 50px; position: relative; } /* Wide Layouts */ div.wide div.picture { width: 199px; height: 211px; float: left; } div.wide div.content { width: 631px; float: left; padding: 9px 120px 24px 10px; } div#ourwork_panel div.picture { background: url(images/bg_picture_clients.jpg);} /* Home Panel */ p#scribble_whatsnext { background: url(images/scribble_circle.jpg) 117px bottom no-repeat; padding-bottom: 4px; } /* Capabilities Panel */ div#capabilities_panel ul { list-style: none; } div#capabilities_panel ul li { padding-left: 31px; font-size: 9px; color: #6d6e71;} div#capabilities_panel ul li h3 { display: inline; color: #0668b3; font-size: 9px; text-transform: uppercase; } li#global_safari { background: url(images/icon_globalSafari.jpg) 2px 0px no-repeat; height: 23px; padding-top: 7px; } li#strategy { background: url(images/icon_strategy.jpg) 4px 0px no-repeat; height: 24px; padding-top: 3px; } li#design { background: url(images/icon_design.jpg) 3px 0px no-repeat; height: 24px; padding-top: 2px; } li#production { background: url(images/icon_production.jpg) 6px 0px no-repeat; height: 24px; padding-top: 3px; } div#scribble_office { background: url(images/scribble_office.png); width: 59px; height: 32px; position: absolute; top: 8px; left: 142px; } /* Our Views Page */ div#global_safari_icon { background: url(images/icon_global_safari.png) left top no-repeat; width: 70px; height: 75px; position: absolute; left: -25px; top: 11px; } div#scribble_valuable { position: absolute; top: 105px; left: 392px; background: url(images/scribble_valuable.gif); width: 82px; height: 65px; } /* Our Clients Page */ div#ourwork_panel ul { width: 631px; } div#ourwork_panel ul li { float: left; width: 68px; height: 66px; list-style: none; } div#ourwork_panel ul li a { display: block; width: 100%; height: 100%; } li#client_abbot { background: url(images/logo_abbot.gif) center center no-repeat; } li#client_albertsons { background: url(images/logo_albertsons.gif) center center no-repeat; } li#client_butterfinger { background: url(images/logo_butterfinger.gif) center center no-repeat; } li#client_cascadian { background: url(images/logo_cascadian.gif) center center no-repeat; } li#client_maggie { background: url(images/logo_maggie.gif) center center no-repeat; } li#client_dogchow { background: url(images/logo_dogchow.gif) center center no-repeat; } li#client_eagle { background: url(images/logo_eagle.gif) center center no-repeat; } li#client_eaglenew { background: url(images/logo_eaglenew.gif) center center no-repeat; } li#client_gardenburger { background: url(images/logo_gardenburger.gif) center center no-repeat; } li#client_generalmills { background: url(images/logo_generalmills.gif) center center no-repeat; } li#client_girlie_nails { background: url(images/logo_girlie_nails.gif) center center no-repeat; } li#client_grohe { background: url(images/logo_grohe.gif) center center no-repeat; } li#client_harrys { background: url(images/logo_harrys.gif) center center no-repeat; } li#client_huggies { background: url(images/logo_huggies.gif) center center no-repeat; } li#client_kleenex { background: url(images/logo_kleenex.gif) center center no-repeat; } li#client_moistmeaty { background: url(images/logo_moistmeaty.gif) center center no-repeat; } li#client_naturallycomplete { background: url(images/logo_naturallycomplete.gif) center center no-repeat; } li#client_nescafe { background: url(images/logo_nescafe.gif) center center no-repeat; } li#client_nestle { background: url(images/logo_nestle.gif) center center no-repeat; } li#client_peaches { background: url(images/logo_peaches.gif) center center no-repeat; } li#client_pepsico { background: url(images/logo_pepsico.gif) center center no-repeat; } li#client_pg { background: url(images/logo_pg.gif) center center no-repeat; } li#client_powerbar { background: url(images/logo_powerbar.gif) center center no-repeat; } li#client_purina { background: url(images/logo_purina.gif) center center no-repeat; } li#client_quaker { background: url(images/logo_quaker.gif) center center no-repeat; } li#client_redhook { background: url(images/logo_redhook.gif) center center no-repeat; } li#client_slide { background: url(images/logo_slide.gif) center center no-repeat; } li#client_sojo { background: url(images/logo_sojo.gif) center center no-repeat; } li#client_suave { background: url(images/logo_suave.gif) center center no-repeat; } li#client_swellbeing { background: url(images/logo_swellbeing.gif) center center no-repeat; } li#client_tidycats { background: url(images/logo_tidycats.gif) center center no-repeat; } li#client_tropicana { background: url(images/logo_tropicana.gif) center center no-repeat; } li#client_valazzo { background: url(images/logo_valazzo.gif) center center no-repeat; } .tool-tip { color: #fff; width: 139px; z-index: 13000; position: relative; } .tool-title { font-weight: bold; font-size: 11px; margin: 0; color: #c1d82f; padding: 8px 8px 4px; background: url(images/bubble.png) top left; } .tool-text { font-size: 11px; padding: 4px 8px 8px; background: url(images/bubble.png) bottom right; } .custom-tip { color: #000; width: 130px; z-index: 13000; } .custom-title { font-weight: bold; font-size: 11px; margin: 0; color: #3E4F14; padding: 8px 8px 4px; background: #000; border-bottom: 1px solid #B5CF74; } .custom-text { font-size: 11px; padding: 4px 8px 8px; background: #fff; } /* Contact Us */ div#contact_info { width: 340px; float: left; border-right: 2px solid #c1c2c4; } div#career { width: 190px; float: left; padding-left: 30px; overflow: hidden; } p#scribble_underline { background: url(images/scribble_underline.gif) 127px 56px no-repeat; } /*********************************************************************** 1 - PANEL LAYOUTS ************************************************************************/ div#footer { text-align: center; font-size: 9px; color: #6D6F71; padding-top: 75px; } a#client_login { background: url(images/button_clientlogin.gif) left bottom no-repeat; display: block; width: 92px; height: 20px; margin: 0 auto;padding-top: 20px;}