/*------------start reset styles to reduce browser inconsistency------------*/ 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, b, u, i, center, 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: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } /*------------end reset styles to reduce browser inconsistency------------*/ /*-----------------Start Common Styles------------------*/ body { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:lighter; font-size: 17px; color: #a7e4f2; line-height: 24px; background-color: #133237; } a:link, a:visited { color: #4c1650; border-bottom: 1px dotted #4c1650; text-decoration: none; } a:hover, a:active { color: #768F1C; text-decoration: none; border-bottom: 1px dotted #768F1C; } p { padding: 0 0 10px 0; } ol li { padding: 0 0 10px 0; } ol { } h1 { color: #FFF; font-family: Arial, Helvetica, sans-serif; font-size: 15px; text-transform: uppercase; margin: 30px 0 20px 0; line-height: 15px; } h2 { color: #98D5E3; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 85%; text-transform: uppercase; } .hr { border-top: 1px solid #27545C; border-bottom: 1px solid #0E2025; margin: 5px 25px 15px 25px; } #wrapper { margin: 0 auto; text-align: center; width: 1000px; } #header { background-image: url(layout-images/header.jpg); background-repeat: no-repeat; height: 136px; width: 1000px; margin: 0px auto; } #headerbg { background-color: #177289; width: 100%; } .address p { color: #FFFFFF; text-align: right; margin: 0px 50px 0 0; line-height: 18px; } .address { position: relative; top: 18px; } #header a:link { color: #FFFFFF; border-bottom: 1px dotted #ffffff; text-decoration: none; } #header a:hover { color: #CCCCCC; border-bottom: 1px dotted #299BFD; text-decoration: none; } #content { } #navbg { margin: 0px auto; width: 100%; height: 37px; background-image: url(layout-images/navbg.png); background-repeat: repeat-x; text-align: center; } .firstcol { text-align: left; margin: 10px 0 0 50px; } .firstcol p { font-size: 90%; } .secondcol { width: 390px; text-align: left; float: right; margin: 10px 20px 0 0; /*Oh noes double margin bug! Fix is in ie.css*/ } .secondcol p { font-size: 90%; line-height: 110%; color: #FFF; margin: 0 30px 7px 0; } .portrait img { background-color: #eefbfd; border: 3px solid #177289; padding: 11px; } .portrait { margin: 23px 0 20px 3px; } #footer { clear: both; background-color: #93AB92; text-align: center; background-image: url(layout-images/navbg.png); background-repeat: repeat-x; height: 37px; } #footer p { color: #FFFFFF; font-size: 80%; padding: 5px 0; } #footer a { color: #FFFFFF; border-bottom: 1px dotted #ffffff; } .floatleft { padding: 0 15px 0 0; float: left; } .floatright { padding: 0 0 7px 15px; float: right; } /*-----------------End Common Styles------------------*/ /*------------------Start#nav Styles------------------*/ /*I've used a selection of IDs on the tag to allow for those cute active tabs. When the id on the and the li class match up, the tab is activated, no fancy scripting needed*/ /*This menu is based on the following css sprite technique...http://www.tutorio.com/tutorial/pure-css-image-rollovers*/ #nav { margin: 0px auto; width: 1000px; height: 37px; background-image: url(layout-images/navbg.png); background-repeat: repeat-x; text-align: center; } #nav ul { width: 1000px; text-align: center; margin-left: 200px; display: block; } #nav a { display: block; height: 37px; text-indent: -9999px; border: 0px none; } #nav li { list-style: none; float: left; } #nav ul, li { margin: 0px; padding: 0px; } /*start inactive tab state*/ #nav li.nav-home a { background: url(layout-images/nav-home.png) no-repeat; width: 101px; } #nav li.nav-mediations a { background: url(layout-images/nav-mediations.png) no-repeat; width: 306px; } #nav li.nav-arbitration a { background: url(layout-images/nav-arbitration.png) no-repeat; width: 122px; } #nav li.nav-publications a { background: url(layout-images/nav-publications.png) no-repeat; width: 192px; } #nav li.nav-contact a { background: url(layout-images/nav-contact.png) no-repeat; width: 148px; } /*end inactive tab state*/ /*start active page tab state*/ #home #nav li.nav-home a { background: url(layout-images/nav-home.png) no-repeat 0 -74px; } #mediations #nav li.nav-mediations a { background: url(layout-images/nav-mediations.png) no-repeat 0 -74px; } #arbitration #nav li.nav-arbitration a { background: url(layout-images/nav-arbitration.png) no-repeat 0 -74px; } #publications #nav li.nav-publications a { background: url(layout-images/nav-publications.png) no-repeat 0 -74px; } #contact #nav li.nav-contact a { background: url(layout-images/nav-contact.png) no-repeat 0 -74px; } /*end active page tab state*/ /*start active hover tab state*/ #nav li.nav-home a:hover { background: url(layout-images/nav-home.png) no-repeat 0 -37px; } #nav li.nav-mediations a:hover { background: url(layout-images/nav-mediations.png) no-repeat 0 -37px; } #nav li.nav-arbitration a:hover { background: url(layout-images/nav-arbitration.png) no-repeat 0 -37px; } #nav li.nav-testimonials a:hover { background: url(layout-images/nav-testimonials.png) no-repeat 0 -37px; } #nav li.nav-publications a:hover { background: url(layout-images/nav-publications.png) no-repeat 0 -37px; } #nav li.nav-contact a:hover { background: url(layout-images/nav-contact.png) no-repeat 0 -37px; } /*end active hover tab state*/ /*------------------Start homepage specific 2 col Styles------------------*/ #home #wrapper { margin: 0 auto; text-align: center; width: 1000px; background-image:url(layout-images/bodybg.png); } #home .firstcol { width: 500px; text-align: left; margin: 10px 0 0 50px; /*Oh noes double margin bug! Fix is in ie.css*/ float: left; } #home .firstcol p { font-size: 100%; font-weight:lighter; } .interior .secondcol { float: right; width: 270px; background-color: #133237; background-image: url(layout-images/testimonialbg.jpg); background-repeat: no-repeat; background-position: center top; border: 2px solid #1C3C41; padding: 15px; margin: 0px 0 0 15px; text-align: left; } .interior .secondcol p { padding: 0 0 15px 0; margin: 0; color: #FFF; font-size: 100%; line-height: 120%; } p.small { font-size: 85%; } ul.small{ font-size: 85%; text-indent: 30px; font-style:italic; padding-bottom:40px; }