/* DEFAULT STYLES */ body { font:62.5%/1 Helvetica, Arial, Verdana, sans-serif; color:#fff; background-color:#071c23; } hr { border:0 #ccc solid; border-top-width: 1px; clear: both; height: 0; } h1, h2, h3, h4, h5, h6 { font-family:Georgia, serif; } h1 { font-size:3.4em; color:#29a4cd; } h2 { font-size:2.2em; color:#071c23; } h3 { } h4 { background-color:#c8cdce; } h5 { font-size:1.6em; } h6 { font-size:1.4em; } p { font-size:1.4em; line-height:1.4; } a { color:#444; } p, dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, pre, table, address, fieldset { margin-bottom: 20px; } a:hover { color:#7f40bf; } .clearfix:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; } /* slightly enhanced, universal clearfix hack */ .clearfix { display:inline-block; } /* start commented backslash hack \*/ * html .clearfix { height:1%; } .clearfix { display:block; } /* close commented backslash hack */ /* LAYOUT */ /* SITEWIDE STYLES */ /* header */ #header { height:145px; position:relative; } #header #logo { width:300px; height:238px; position:absolute; left:-68px; } #header #menu { float:left; margin:44px 0 0 240px; display:inline; } /* display inline is for ie6 */ #header #menu li { float:left; height:55px; position:relative; margin-right:20px; } #header #menu li a { display:block; width:85px; height:29px; padding:12px; color:#071c23;} #header #menu li a:hover { background-color:#203339; } #header #menu li a:active { background-color:#fff; } #header #menu li a span { position:absolute; top:12px; left:12px; height:29px; background-repeat:no-repeat; cursor:pointer; background-position:0 0;} #header #menu li a:hover span { background-position:0 -29px; } #header #menu li a:active span { background-position:0 -58px; } #header #menu li#menu-home a { width:85px; color:#203339; } #header #menu li#menu-home a span { background-image:url(../img/menu/home.gif); width:85px; } #header #menu li#menu-about a { width:85px; color:#203339; } #header #menu li#menu-about a span { background-image:url(../img/menu/about.gif); width:85px; } #header #menu li#menu-work a { width:78px; color:#203339; } #header #menu li#menu-work a span { background-image:url(../img/menu/work.gif); width:78px; } #header #menu li#menu-contact a { width:108px; color:#203339; } #header #menu li#menu-contact a span { background-image:url(../img/menu/contact.gif); width:108px; } /* primary content */ #primary-content-wrapper { color:#071c23; background-color:#fff; overflow:auto; border-top:1px solid #29a4cd; } #primary-content { padding-top:40px; padding-bottom:40px; overflow:auto;} #primary-content h1 { margin-bottom:40px; } /* contact content */ #contact-content-wrapper { background:#0c2f3b url(../img/contact-bg.gif) repeat-x; border-top:1px solid #29a4cd; border-bottom:1px solid #0e3947; padding:20px 0; } #contact-content h2 { color:#fda701; } #contact-detail-items { overflow:hidden; } .contact-detail-item { float:left; margin-right:80px; background-color:#071c23; color:#fff; font-family:Georgia, sans-serif; padding:0 6px; } #phone-number { font-size:2em; line-height:1.6; } #email { font-size:1.9em; } #email a { color:#fff; text-decoration:none; } /* footer */ #footer-wrapper { padding-top:20px; padding-bottom:200px;} #footer { color:#4f5e63; font-family:Georgia, sans-serif; font-size:1.9em; } /* PAGE SPECIFIC */ /* Home Page */ body#home-page #header #menu li#menu-home a { background-color:#203339; } body#home-page #header #menu li#menu-home a span { background-position:0 -29px; } body#home-page ul#services { overflow:auto; margin-top:20px; } body#home-page ul#services li { background-color:#d4edf5; margin-bottom:20px; } body#home-page ul#services li h3 { margin:10px; font-size:2em; letter-spacing:-1px; line-height:19px; } body#home-page ul#services li p { margin:10px; font-size:1.4em; } body#home-page #work-heading-wrapper { overflow:auto; } body#home-page #work-heading-wrapper h4 { padding:0 6px; width:288px; font-size:2em; letter-spacing:-1px; line-height:19px;} body#home-page ul#work { overflow:visible; } body#home-page ul#work li {} body#home-page ul#work li a { display:block; position:relative; padding-top:249px; text-decoration:none; font-size:1.4em; color:#6c797d; } body#home-page ul#work li a:hover { color:#071c23; } body#home-page ul#work li a img { position:absolute; top:-2px; left:-3px; } /* About Page */ body#about-page #header #menu li#menu-about a { background-color:#203339; } body#about-page #header #menu li#menu-about a span { background-position:0 -29px; } body#about-page #primary-content { padding-bottom:20px; } /* Work Page */ body#work-page #header #menu li#menu-work a { background-color:#203339; } body#work-page #header #menu li#menu-work a span { background-position:0 -29px; } body#work-page #primary-content { padding-bottom:0px; } body#work-page ul#work { overflow:visible; } body#work-page ul#work li { position:relative; height:249px; padding-bottom:33px; padding-left:320px; width:640px; } body#work-page ul#work li img { position:absolute; top:-2px; left:-3px; } body#work-page ul#work li h2 { font-size:2.2em; line-height:24px; } body#work-page ul#work li p { font-size:1.4em; } body#work-page ul#work li span.view-site-link-wrapper { position:absolute; bottom:40px; right:0; } body#work-page ul#work li span.view-site-link-wrapper a { color:#29a4cd; font-family:Georgia, serif; font-size:2.2em; font-weight:bold; letter-spacing:-1px; text-decoration:none; } body#work-page ul#work li span.view-site-link-wrapper a:hover { color:#fff; background-color:#29a4cd; } /* Contact Page */ body#contact-page #header #menu li#menu-contact a { background-color:#203339; } body#contact-page #header #menu li#menu-contact a span { background-position:0 -29px; } body#contact-page #google-map { height:460px; } body#contact-page #info-marker h3 { font-size:1.8em; margin-bottom:4px;} body#contact-page #info-marker p { line-height:1.2; } body#contact-page #info-marker p a { color:#29A4CD; text-decoration:none; } body#contact-page #info-marker p a:hover { text-decoration:underline; } body#contact-page #contact-page-content p { font-family:Georgia, serif; font-size:3em; font-weight:bold; line-height:1.2;} body#contact-page #contact-page-content p span.label { color:#6c797d; } body#contact-page #contact-page-content p a { color:#071c23; text-decoration:none; } body#contact-page #contact-page-content p a:hover { text-decoration:underline; }