/* Site Layout Styles * Updated: 5 Dec 08 @ 1.50pm * Author: Matthew Holmes * ---------------------------------------------*/ /* -- TOC --------------------------------------- 1. Colors 2. Reset 3. Fix Floats 4. Links 5. Typography 6. Structure */ /* -- COLORS ---------------------------------------*/ /* blue = #003366 */ /* oak red = #da4100 */ /* green = #8b9330 */ /* drk grey = #444444 */ /* white = #ffffff */ /* black = #000000 */ /* -- 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, 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: inherit; font-family: inherit; list-style: none; } table { border-collapse: collapse; border-spacing: 0; } /* -- FIX FLOATS ---------------------------------------*/ .clearfix:after { display: block; clear: both; height: 0; content: "."; visibility: hidden; } * html .clearfix { height: 1%; } *+ html .clearfix { height: 1%; } /* -- LINKS ---------------------------------------*/ a { color: #444444; text-decoration: none; } a:hover { text-decoration: underline; } /* -- TYPOGRAPHY ---------------------------------------*/ p { margin: 0 0 .8em; } /* -- STRUCTURE ---------------------------------------*/ body { color: #444444; font: 62.5%/1.6 "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; } /* -- container */ #container { width: 640px; height: 625px; margin: 30px auto; } /* -- header */ #header { height: 82px; } /* logo */ #header h1 { float: left; padding: 0 6px 0; margin: 0; } /* places */ #header h2 { float: right; padding: 54px 10px 0; } /* -- content */ #content { padding: 15px 0; font-size: 1.1em; text-align: justify; height: 440px; } /* -- navigation */ #nav { height: 36px; background: url(../images/bg.gif) 0 -74px no-repeat; } #nav ul { float: left; width: 480px; height: 36px; background: url(../images/btn-nav.gif) 0 0 no-repeat; } #nav li { position: relative; float: left; height: 36px; } #nav li a { display: block; height: 36px; text-indent: -999em; background-image: url(../images/btn-nav.gif); } /* off state */ #nav li a.ourfirm { width: 83px; background-position: 0 0; } #nav li a.aop { width: 144px; background-position: -83px 0; } #nav li a.law { width: 61px; background-position: -227px 0; } #nav li a.careers { width: 84px; background-position: -288px 0; } #nav li a.contactus { width: 99px; background-position: -372px 0; } /* over state */ #nav li a.ourfirm:hover { width: 83px; background-position: 0 -36px; } #nav li a.aop:hover { width: 144px; background-position: -83px -36px; } #nav li a.law:hover { width: 61px; background-position: -227px -36px; } #nav li a.careers:hover { width: 84px; background-position: -288px -36px; } #nav li a.contactus:hover { width: 99px; background-position: -372px -36px; } /* dropdown */ #nav ul.sf-menu ul { position: absolute; top: -999em; width: 194px; } #nav ul.sf-menu li li:hover ul, #nav ul.sf-menu li li.sfHover ul { top: 0; left: 194px; } #nav ul.sf-menu ul li { float: left; width: 100%; height: auto; } #nav ul.sf-menu li:hover { visibility: inherit; } #nav ul.sf-menu li:hover ul, #nav ul.sf-menu li.sfHover ul { height: auto; padding: 0 0 7px; top: 36px; left: 0; z-index: 99; background: url(../images/bg-dropdown-corner.png) left bottom no-repeat; } #nav ul.sf-menu li li a { padding: 5px 15px; height: auto; color: #fff; font-size: 1.2em; text-indent: 0; text-decoration: none; } #nav ul.sf-menu li:hover a.ourfirm, #nav ul.sf-menu li.sfHover a.ourfirm { background-position: 0 -36px; } #nav ul.sf-menu li:hover a.aop, #nav ul.sf-menu li.sfHover a.aop { background-position: -83px -36px; } #nav ul.sf-menu li:hover a.contactus, #nav ul.sf-menu li.sfHover a.contactus { background-position: -372px -36px; } #nav ul.sf-menu li:hover li a, #nav ul.sf-menu li.sfHover li a { background: #da4100; } #nav ul.sf-menu li:hover li a:hover, #nav ul.sf-menu li.sfHover li a:hover { background: #003366; } #nav ul.sf-menu li li:hover a, #nav ul.sf-menu li li.sfHover a { background: #003366; } #nav ul.sf-menu li li:hover li a, #nav ul.sf-menu li li.sfHover li a { background: #da4100; } #nav ul.sf-menu li li span.sf-sub-indicator { display: block; position: absolute; top: 1em; /* ie6 */ right: 1em; width: 4px; height: 8px; text-indent: -999em; overflow: hidden; background: url(../images/icon-arrow.png) no-repeat; } /* search */ #nav form { float: right; padding: 9px 0 0; } #nav form input { float: left; width: 72px; padding: 2px 3px; border: 1px solid #ccc; } #nav form button { float: left; width: auto; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; text-indent: -999em; } #nav form button span { position: relative; display: block; width: 63px; height: 20px; margin: -1px 0 0 0; padding: 0; background: url(../images/btn-search.gif) 0 0 no-repeat; white-space: nowrap; } /* twitter */ #twitter { padding: 15px 20px 12px; border-top: 1px solid #ccc; } /* -- footer */ #footer { padding: 10px 0; background: url(../images/bg.gif) 0 -575px no-repeat; text-align: center; color: #444444; font-size: 1.1em; } #footer img { vertical-align: middle; } .path { display: none; } a.twtr-user, .twtr-ft, .twtr-hd, #feed #twtr-widget-1 .twtr-tweet-text p em { display: none; } #feed #twtr-widget-1 .twtr-tweet-text p { font-size: 1.3em; } .twtquotes { width: 25px; } #twtquote1 { background: url(../images/quotes1.gif) no-repeat top left; } #twtquote2 { background: url(../images/quotes2.gif) no-repeat top right; }