/* -------------------------------------------------------------- The H. Chambers Company Corporate Website Default Styles for Screen Media -------------------------------------------------------------- */ /* Resets -------------------------------------------------------------- */ 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, 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-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus { outline: 0; } body { line-height: 1; } ol, ul { list-style: none; margin: 0; padding: 0; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } a img,:link img,:visited img { border: none } :link,:visited { text-decoration: none } a { color: #880000; } a:hover { color: #104E59; text-decoration: none; } /* Image Replacement -------------------------------------------------------------- */ h1 span, h2 span, h3 span, h4 span, h5 span, a span, dt span, p.quote span { visibility: hidden; overflow: hidden; text-decoration: none; } /* Navgation and Masthead Elements -------------------------------------------------------------- */ #masthead { border-top: 5px solid #990000; width: 780px; margin: 0 auto; text-align: center; } body.work #masthead { border-top: 5px solid #990000; width: 780px; background: url(../images/dotted_rule.gif) bottom repeat-x; clear: both; padding: 0 0 2px 0; } #masthead ul.gnav { width: 705px; height: 36px; line-height: 11px; margin: 0 auto; background: url(../images/bg_gnav.gif) 150px 29px no-repeat; } #masthead ul.gnav li { display: inline; float: left; padding: 0; height: 11px; margin: 25px 0 0 0; } #masthead li a.masterplanning { display: block; width: 126px; height: 11px; background: url(../images/gnav_masterplanning.gif) no-repeat; margin-right: 50px; } #masthead li a.architecture { display: block; width: 91px; height: 11px; background: url(../images/gnav_architecture.gif) no-repeat; margin-right: 50px; } #masthead li a.interiordesign { display: block; width: 111px; height: 11px; background: url(../images/gnav_interiordesign.gif) no-repeat; margin-right: 50px; } #masthead li a.purchasing { display: block; width: 87px; height: 11px; background: url(../images/gnav_purchasing.gif) no-repeat; margin-right: 50px; } #masthead li a.installation { display: block; width: 90px; height: 11px; background: url(../images/gnav_installation.gif) no-repeat; } #masthead li a.masterplanning:hover, #masthead li a.architecture:hover, #masthead li a.interiordesign:hover, #masthead li a.purchasing:hover, #masthead li a.installation:hover, #masthead ul.gnav li a.on { background-position: 0 -11px; } #masthead ul.utilnav { width: 319px; height: 34px; line-height: 9px; margin: 0 auto; padding: 0 0 25px 0; text-align: center; } #masthead ul.utilnav li { display: inline; float: left; padding: 0; height: 10px; margin: 25px 0 25px 0; } #masthead li a.home { display: block; width: 31px; height: 10px; background: url(../images/gnav_home.gif) no-repeat; margin-right: 30px; } #masthead li a.about { display: block; width: 36px; height: 10px; background: url(../images/gnav_about.gif) no-repeat; margin-right: 30px; } #masthead li a.services { display: block; width: 47px; height: 10px; background: url(../images/gnav_services.gif) no-repeat; margin-right: 30px; } #masthead li a.work { display: block; width: 34px; height: 10px; background: url(../images/gnav_work.gif) no-repeat; margin-right: 30px; } #masthead li a.contact { display: block; width: 51px; height: 10px; background: url(../images/gnav_contact.gif) no-repeat; } #masthead li a.home:hover, #masthead li a.about:hover, #masthead li a.services:hover, #masthead li a.work:hover, #masthead li a.contact:hover, #masthead ul.utilnav li a.on { background-position: 0 -10px; } #content ul.aboutnav { font-size: 11px; color: #FFFFFF; padding: 0 0 0 14px; margin: 25px 0 25px -15px; height: 11px; background: url(../images/lnav_accent.gif) left 2px no-repeat; overflow: visible; position: relative; } #content ul.aboutnav li { display: inline; float: left; line-height: 11px; padding: 0 25px 0 0; margin: 0; background: url(../images/lnav_sep.gif) right 5px no-repeat; overflow: visible; } #content ul.aboutnav li.last { background: none; } #content ul.aboutnav li a.on { color: #FFFFFF; } #content div.sortmenu { background: url(../images/bg_sortnav.gif) top no-repeat; margin: 25px 0 0 0; } #content div.sortmenu ul { display: block; background: url(../images/dotted_rule.gif) bottom repeat-x; height: 25px; padding: 0 0 2px 71px; } #content div.sortmenu ul li { display: inline; float: left; font-family: Tahoma, Arial, Helvetica, Verdana, sans-serif; font-size: 10px; } #content div.sortmenu li a.type { display: block; width: 91px; height: 26px; background: url(../images/sortnav_bytype.gif) no-repeat; } #content div.sortmenu li a.date { display: block; width: 94px; height: 26px; background: url(../images/sortnav_bydate.gif) no-repeat; } #content div.sortmenu li a.name { display: block; width: 98px; height: 26px; background: url(../images/sortnav_byname.gif) no-repeat; } #content div.sortmenu li a.type:hover, #content div.sortmenu li a.date:hover, #content div.sortmenu li a.name:hover, #content div.sortmenu li a.on { background-position: 0 -26px; } /* Content Elements -------------------------------------------------------------- */ body.home #flash { width: 702px; height: 86px; background: url(../images/bg_homeflash.gif) center repeat; margin: 0 auto; clear: both; padding: 1px 0 1px 0; } /* ----------------------------------------------------------- */ /* Typography */ /* ----------------------------------------------------------- */ /* Global -------------------------------------------------------------- */ p { line-height: 1.5em; margin: 0 0 1.5em 0; } strong { font-weight: bold; } em { font-style: italic; } p.quote { font-size: 25px; line-height: 28px; font-family: "Times New Roman", serif; color: #FFFFFF; font-style: italic; margin: 0; padding: 0 0 20px 0; } p.featuredlink { border-top: 1px dotted #645535; border-bottom: 1px dotted #645535; color: #FFFFFF; background: url(../images/bg_featuredlink.gif) repeat-x; font-size: 11px; text-transform: uppercase; padding: 5px 20px 5px 20px; } p.featuredlink a { color: #FFFFFF; } p.featuredlink a:hover { color: #104E59; } cite { display: block; font-size: 9px; color: #FFFFFF; background: url(../images/dotted_rule.gif) bottom repeat-x; margin: 0 0 20px 0; padding: 7px 0 7px 0; } img.nocite { padding: 0 0 20px 0; } #content dl dt { font-size: 14px; color: #104E59; margin: 0 0 4px 0; } #content dl dd { font-size: 12px; line-height: 18px; margin: 0 0 20px 0; } #content div.imgColumn dl dd { font-style: italic; } #content ul { margin: 0 0 20px 0; } #content ul li { font-size: 12px; line-height: 18px; } #sidebar p { line-height: 15px; clear: both; margin: 0; } #sidebar ul { margin: 0; } #sidebar ul li { margin: 0 0 5px 0; line-height: 15px; } #sidebar ul li em { font-size: 10px; } #sidebar dl { line-height: 15px; font-size: 11px; } #sidebar dl dt { margin: 0 0 5px 0; font-size: 11px; } #sidebar dl dt a { padding: 0 0 0 15px; background: url(../images/icon_plus.gif) left no-repeat; } #sidebar dl dt a.open { background: url(../images/icon_minus.gif) left no-repeat; } #sidebar dl dd { margin: 0 0 10px 0; padding: 0 0 0 15px; font-size: 11px; font-style: normal; } /* Headings -------------------------------------------------------------- */ h1 { display: block; height: 44px; background: url(../images/h1_logo.gif) center no-repeat; color: #FFFFFF; font-size: 44px; font-weight: normal; line-height: 44px; margin: 20px 0 0 0; } h2 { display: block; color: #104E59; font-size: 9px; font-weight: normal; line-height: 9px; letter-spacing: 0.5em; text-transform: uppercase; margin: 0 0 15px 0; } h3 { display: block; color: #FFFFFF; font-size: 15px; font-weight: normal; padding: 25px 0 15px 0; margin: 0; text-transform: uppercase; line-height: 15px; clear: both; } #sidebar h3 { display: block; color: #FFFFFF; font-size: 9px; font-weight: normal; padding: 0; margin: 0; text-transform: uppercase; line-height: 9px; } h4 { display: block; color: #FFFFFF; font-size: 11px; font-weight: bold; text-transform: uppercase; } h5 { display: block; color: #FFFFFF; font-size: 10px; font-weight: normal; text-transform: uppercase; margin: 15px 0 10px 0; } /* Home */ body.home h1 { margin: 125px 0 0 0; } body.home div#content { width: 490px; margin: 0 auto; padding: 25px 0 0 0; text-align: center; clear: both; background: none; } body.home div#content div.news { width: 225px; margin: 0 40px 0 0; text-align: left; float: left; } body.home div#content div.news h2 { display: block; height: 9px; background: url(../images/h2_news.gif) 1px 1px no-repeat; color: #FFFFFF; font-size: 8px; font-weight: bold; margin: 0 0 7px 0; } body.home div#content div.project { width: 225px; margin: 0; text-align: left; float: left; } body.home div#content div.project h2 { display: block; height: 8px; background: url(../images/h2_featuredproject.gif) 1px 0px no-repeat; color: #FFFFFF; font-size: 8px; font-weight: bold; margin: 0 0 12px 0; } body.home p { font-size: 11px; line-height: 14px; padding: 0 0 15px 0; margin: 0; } body.home img { padding: 0 0 8px 0; } /* Services */ body.masterplanning div#content h2 { display: block; height: 7px; background: url(../images/h2_masterplanning.gif) no-repeat; } body.masterplanning div#content p.quote { display: block; height: 86px; background: url(../images/quote_masterplanning.gif) no-repeat; } body.masterplanning div#sidebar div.people h4 { display: block; height: 105px; background: url(../images/h4_richardsnellinger.gif) no-repeat; margin: 0 0 12px 0; } body.interiordesign div#content h2 { display: block; height: 7px; background: url(../images/h2_interiordesign.gif) no-repeat; } body.interiordesign div#content p.quote { display: block; height: 26px; background: url(../images/quote_interiordesign.gif) no-repeat; } body.interiordesign div#sidebar div.people h4 { display: block; height: 105px; background: url(../images/h4_roberthickman.gif) no-repeat; margin: 0 0 12px 0; } body.architecture div#content h2 { display: block; height: 7px; background: url(../images/h2_architecture.gif) no-repeat; } body.architecture div#content p.quote { display: block; height: 50px; background: url(../images/quote_architecture.gif) no-repeat; } body.architecture div#sidebar div.people h4 { display: block; height: 108px; background: url(../images/h4_kennethhart.gif) no-repeat; margin: 0 0 12px 0; } body.purchasing div#content h2 { display: block; height: 7px; background: url(../images/h2_purchasing.gif) no-repeat; } body.purchasing div#content p.quote { display: block; height: 26px; background: url(../images/quote_purchasing.gif) no-repeat; } body.purchasing div#sidebar div.people h4 { display: block; height: 108px; background: url(../images/h4_kathymartin.gif) no-repeat; margin: 0 0 12px 0; } body.installation div#content h2 { display: block; height: 7px; background: url(../images/h2_installation.gif) no-repeat; } body.installation div#content p.quote { display: block; height: 26px; background: url(../images/quote_installation.gif) no-repeat; } body.installation div#sidebar div.people h4 { display: block; height: 108px; background: url(../images/h4_kathymartin.gif) no-repeat; margin: 0 0 12px 0; } /* About */ body.about div#content h2 { display: block; height: 7px; background: url(../images/h2_about.gif) no-repeat; } body.about div#content h2.overview { display: block; height: 20px; background: url(../images/h2_aboutchambers.gif) no-repeat; clear: both; margin: 0 0 25px 0; } body.about div#content h2.clients { display: block; height: 20px; background: url(../images/h2_notableclients.gif) no-repeat; clear: both; } body.about div#content h2.history { display: block; height: 20px; background: url(../images/h2_historyofexcellence.gif) no-repeat; clear: both; } body.about div#content h2.awards { display: block; height: 21px; background: url(../images/h2_awards.gif) no-repeat; clear: both; margin: 0 0 25px 0; } body.about div#content h2.careers { display: block; height: 20px; background: url(../images/h2_careeropportunities.gif) no-repeat; clear: both; margin: 0 0 25px 0; } body.about div#content h2.community { display: block; height: 20px; background: url(../images/h2_communityinvolvement.gif) no-repeat; clear: both; margin: 0 0 25px 0; } body.about div#content h2.ontheweb { display: block; height: 21px; background: url(../images/h2_chambersontheweb.gif) no-repeat; clear: both; margin: 0 0 25px 0; } div.imgColumn { display: block; clear: both; padding: 0 0 0 280px; min-height: 98px; margin: 0 0 40px 0; } div.imgColumn h3 { padding: 15px 0 15px 0; border-top: 5px solid #645535; } div.imgColumn p a { font-size: 14px; } div.idmag { background: url(../images/logo_interiordesign_magazine.gif) left top no-repeat; } div.bbj { background: url(../images/logo_bbj.gif) left top no-repeat; } div.boardroom { background: url(../images/logo_boardroom_magazine.gif) left top no-repeat; } div.wordpress { background: url(../images/logo_wordpress.gif) left top no-repeat; } div.youtube { background: url(../images/logo_youtube.gif) left top no-repeat; } div.flickr { background: url(../images/logo_flickr.gif) left top no-repeat; } /* Services */ body.services div#content h2 { display: block; height: 7px; background: url(../images/h2_services.gif) no-repeat; } body.services div#content h3 { display: inline; width: 460px; height: 88px; margin: 5px 20px 55px 0; padding: 0; background: url(../images/h3_services.gif) left no-repeat; float: left; } body.services div#content p { font-size: 11px; line-height: 15px; margin: 25px 0 0 0; } body.services div#content div p { font-size: 11px; line-height: 15px; padding: 10px; margin: 0 0 40px 0; color: #7c6b47; } body.services div#content div.masterplanning { clear: both; background: url(../images/thumb_master_planning.jpg) top no-repeat; } body.services div#content div.masterplanning h4 a { display: block; width: 140px; height: 26px; background: url(../images/snav_masterplanning.gif) no-repeat; } body.services div#content div.architecture { background: url(../images/thumb_architecture.jpg) top no-repeat; } body.services div#content div.architecture h4 a { display: block; width: 140px; height: 26px; background: url(../images/snav_architecture.gif) no-repeat; } body.services div#content div.interiordesign { background: url(../images/thumb_interior_design.jpg) top no-repeat; } body.services div#content div.interiordesign h4 a { display: block; width: 140px; height: 26px; background: url(../images/snav_interiordesign.gif) no-repeat; } body.services div#content div.purchasing { background: url(../images/thumb_purchasing.jpg) top no-repeat; } body.services div#content div.purchasing h4 a { display: block; width: 140px; height: 26px; background: url(../images/snav_purchasing.gif) no-repeat; } body.services div#content div.installation { background: url(../images/thumb_installation.jpg) top no-repeat; } body.services div#content div.installation h4 a { display: block; width: 140px; height: 26px; background: url(../images/snav_installation.gif) no-repeat; } body.services div#content div h4 a:hover { background-position: 0 -26px; } /* used for jquery hover effect since :hover can't be set */ body.services div#content div h4 a.ahover { background-position: 0 -26px; } body.services div#content div { width: 140px; margin: 0 20px 0 0; padding: 30px 0 0 0; float: left; } /* Contact */ body.contact div#content h2 { display: block; height: 7px; background: url(../images/h2_contact.gif) no-repeat; } body.contact div#content h2.contact { display: block; height: 20px; background: url(../images/h2_dropusaline.gif) no-repeat; clear: both; } /* Landing Pages and Case Studies */ body.landing h2 { font-size: 26px; line-height: 30px; color: #FFFFFF; letter-spacing: normal; text-transform: none; margin: 0 0 25px 0; } body.landing h2 em { font-size: 18px; line-height: 22px; color: #7c6b47; font-style: italic; display: block; } body.landing #sidebar div.contact { margin: 4px 0 20px 0; } /* CFA */ body.cfa #masthead { border-top: none; width: 780px; margin: 0 auto; text-align: center; } body.cfa #masthead p { margin: 0; padding: 0; } body.cfa #masthead p a { display: block; height: 32px; background: url(../images/nav_chambersusa.gif) no-repeat; } body.cfa #masthead p a:hover { background-position: 0 -32px; } body.cfa h1 { display: block; height: 162px; background: url(../images/h1_clubhousefurnishings.gif) no-repeat; margin: 0; } body.cfa h2 { display: block; height: 56px; background: url(../images/h2_cfa.gif) no-repeat; margin: 0 0 20px 0; } body.cfa div#sidebar div.people h4 { display: block; height: 108px; background: url(../images/h4_johnsnellinger.gif) no-repeat; margin: 0 0 12px 0; } div#sidebar div.emailspecs h3 { display: block; height: 7px; background: url(../images/h3_emailspecs.gif) no-repeat; margin: 0 0 12px 0; } /* Sidebar */ div#sidebar div.people h3 { display: block; height: 8px; background: url(../images/h3_peopleatchambers.gif) no-repeat; margin: 0 0 12px 0; } div#sidebar div.clients h3 { display: block; height: 8px; background: url(../images/h3_notableclients.gif) no-repeat; margin: 0 0 12px 0; } div#sidebar div.moreinfo h3 { display: block; height: 8px; background: url(../images/h3_moreinformation.gif) no-repeat; margin: 0 0 12px 0; } div#sidebar div.philosophy h3 { display: block; height: 7px; background: url(../images/h3_philosophy.gif) no-repeat; margin: 0 0 12px 0; } div#sidebar div.corevalues h3 { display: block; height: 7px; background: url(../images/h3_corevalues.gif) no-repeat; margin: 0 0 12px 0; } div#sidebar div.probono h3 { display: block; height: 7px; background: url(../images/h3_probonoprojects.gif) no-repeat; margin: 0 0 12px 0; } div#sidebar div.eoe h3 { display: block; height: 7px; background: url(../images/h2_equalopportunityemployer.gif) no-repeat; margin: 0 0 12px 0; } div#sidebar div.sendresume h3 { display: block; height: 7px; background: url(../images/h3_sendusyourresume.gif) no-repeat; margin: 0 0 12px 0; } div#sidebar div.projectspecs h3 { display: block; height: 7px; background: url(../images/h3_projectspecifications.gif) no-repeat; margin: 0 0 12px 0; } div#sidebar div.servicesprovided h3 { display: block; height: 7px; background: url(../images/h3_servicesprovided.gif) no-repeat; margin: 0 0 12px 0; } div#sidebar div.contact h3 { display: block; height: 7px; background: url(../images/h3_contactus.gif) no-repeat; margin: 0 0 12px 0; } div#sidebar div.contactmenu { background: url(../images/dotted_rule.gif) top repeat-x; margin: 0 0 10px 0; } div#sidebar div.contactmenu ul { display: block; background: url(../images/dotted_rule.gif) bottom repeat-x; height: 11px; padding: 6px 0 6px 0; margin: 0; } div#sidebar div.contactmenu ul li { display: inline; float: left; padding: 0 25px 0 0; font-family: Tahoma, Arial, Helvetica, Verdana, sans-serif; font-size: 10px; line-height: 11px; } div#sidebar div.contactmenu ul li a img { margin: 0 0 0 2px; padding: 0 7px 0 0; } div#sidebar div.phonenumbers h3 { display: block; height: 8px; background: url(../images/h3_phonenumbers.gif) no-repeat; margin: 0 0 12px 0; } div#sidebar div.drivingdirections h3 { display: block; height: 8px; background: url(../images/h3_drivingdirections.gif) no-repeat; margin: 0 0 12px 0; } div#sidebar div.drivingdirections p { margin: 0 0 15px 0 ; } div#sidebar div.people ul li { line-height: 14px; } /* Forms -------------------------------------------------------------- */ form label { color: #FFFFFF; margin: 0 0 0 5px; } form fieldset { padding: 0; margin: 0 0 5px 0; display: block; } form select { margin: 0 0 5px 0; display: block; } form textarea { margin: 0 0 5px 0; display: block; } form input { font-size: 11px; margin: 0 0 5px 0; } form fieldset.styled input, form select, form textarea { font-size: 11px; background-color: #000000; border: 1px solid #645535; color: #FFFFFF; padding: 4px; } form fieldset.styled input { width: 240px; display: block; } #main form fieldset.styled input { width: 231px; display: inline; margin: 0 15px 5px 0; } #main form fieldset.styled input.last { width: 231px; display: inline; margin: 0 0 5px 0; } #main form select { width: 500px; } #main form textarea { width: 490px; font-family: Arial, Helvetica, Verdana, sans-serif; } #sidebar form textarea { width: 240px; font-family: Arial, Helvetica, Verdana, sans-serif; } #sidebar form fieldset.upload, #sidebar form fieldset.paste { margin: 10px 0 0 0; } #sidebar form fieldset.upload input, #sidebar form fieldset.paste textarea { margin: 5px 0 0 0; } body.landing #sidebar form, body.landing #sidebar form fieldset { margin: 0; } #thankyou p { color: #FFFFFF; } .error { color: #880000; } form input.error { color: #880000; } form fieldset.styled input.error { color: #880000; } /* Structural Elements -------------------------------------------------------------- */ body { font-family: Arial, Helvetica, Verdana, sans-serif; color:#7c6b47; font-size: 12px; text-align: center; background-color: #000000; background-attachment: fixed; background-image: url(/images/bg_body.gif); background-repeat: repeat-x; } #content { width: 780px; margin: 0 auto; background: url(../images/dotted_rule.gif) top repeat-x; clear: both; padding: 25px 0 0 0; text-align: left; } #main { width: 500px; margin: 0 40px 25px 0; float: left; } #sidebar { width: 240px; float: left; font-size: 11px; margin: 0 0 20px 0; } body.work #flash, body.about #flash { width: 980px; margin: 0 auto; background: none; padding: 0; text-align: center; } #sidebar div.people, #sidebar div.clients, #sidebar div.philosophy, #sidebar div.probono, #sidebar div.eoe, #sidebar div.projectspecs, #sidebar div.servicesprovided, #sidebar div.contact, #sidebar div.emailspecs, #sidebar div.phonenumbers { background: url(../images/dotted_rule.gif) bottom repeat-x; padding: 0 0 20px 0; margin: 0 0 20px 0; } #main .column-3 { width: 140px; margin: 0 40px 0 0; float: left; } #main .column-3 p { font-size: 11px; line-height: 13px; margin: 7px 0 0 0; } #main .column-3 a { color: #7c6b47; text-decoration: none; } #main .column-3 a:hover { color: #104E59; } #main .column-2 { width: 230px; margin: 0 40px 0 0; float: left; } #main .column-2 ul li { font-size: 12px; line-height: 16px; margin: 0 0 4px 0; } #content ul.column-3 { display: block; clear: both; padding: 0 0 25px 0; } #content ul.column-3 li { width: 240px; margin: 0 30px 0 0; float: left; padding: 0 0 6px 0; line-height: 14px; } #content ul.column-3 li.first { clear: left; } body.cfa #content { background: none; } body.cfa #content ul.list { width: 490px; margin: 0; } body.cfa #content ul.list li { width: 245px; margin: 0; float: left; padding: 0 0 6px 0; line-height: 14px; } #main .last, #content ul.column-3 li.last, body.services div#content div.last { margin: 0; } #main p img { margin: 4px 15px 0 0; border: 1px solid #645535; float: left; } #sidebar ul li a img { margin: 0 0 0 10px; } #footer { width: 780px; margin: 0 auto; text-align: center; clear: both; } #footer h4 { display: block; height: 36px; background: url(../images/h4_logotype.gif) center bottom no-repeat; color: #FFFFFF; font-size: 11px; font-weight: bold; } #footer p { font-size: 9px; margin: 10px 0 15px 0; } body.history #footer h4, body.work #footer h4 { padding: 0; }