/* -------------------------------------------------- Title: Base styles Author: Jamie Hill, SonicIQ - [soniciq.com] -------------------------------------------------- */ /* = Reset - http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ -------------------------------------------------------------------------------- */ 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; color: black; background: white; } ol, ul { list-style: none; } /* 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: "" ""; } /* = Typography -------------------------------------------------- */ body { background: #8f8f8f; color: #888; font-family: "Helvetica Neue", Arial, sans-serif; font-size: 62.5%; line-height: 2em; } /* Fix Phat text in Safari (http://orderedlist.com/articles/thining-text-in-safari-under-snow-leopard) */ body { -webkit-text-stroke:1px transparent; } @media only screen and (max-device-width:480px) {body{-webkit-text-stroke:0 black;}} /* Note: using a baseline grid of 20px so us caution when changing line heights and margins. */ h1, h2, h3 { font-weight: normal; } h2 { color: #4cbcec; font-size: 2.5em; padding-right: 120px; line-height: 1.4em; margin-bottom: .7em; } h2.compact { padding-right: 220px; } h3 { color: #4cbcec; font-size: 1.8em; padding-right: 120px; line-height: 1.7em; margin-bottom: 1.7em; } /* 28 / 14 = 1.8181 */ p { font-size: 1.3em; line-height: 1.8em; margin-bottom: 1.8em; } .annot { font-size: 1.2em; line-height: 1.6em; margin-bottom: 1.6em; } em { color: #4cbcec; } strong { font-weight: bold; } .nowrap { white-space: nowrap; } p.image { text-align: right; margin-bottom: 0; margin-top: -10px; } table, ul { margin-bottom: 3em; } th, td, #content li { font-size: 1.3em; line-height: 2em; } th { font-weight: bold; padding-right: 20px; } #content li { padding-left: 20px; background: url(/images/bg_li.png) no-repeat 0 .8em; padding-bottom: 1em; } /* Note: IE 6 and under will ignore attribute selectors */ input { border-width: 1px; } input[type="text"], input[type="password"], select, textarea { font-size: 1.5em; padding: .2em; } input { border-width: 1px; } input[type="text"], input[type="password"], textarea { border: 1px solid #cbcbcb; border-top-color: #959595; border-bottom-color: #dadada; } input[type="checkbox"] { margin: .5em 6px 0 0; } a, a:link, a:active { color: #003f87; text-decoration: none; } a:visited { color: #abc; text-decoration: none; } a:hover { color: #948263; } /* = Structure -------------------------------------------------- */ #header div.inner, #content div.inner, #footer div.inner { width: 960px; margin: 0 auto; } #header, #wrapper, #footer { min-width: 960px; } #content div.inner { background: url(/images/bg_content-inner.png) repeat-y 0 0; min-width: 960px; } #main { background: url(/images/bg_main.png) no-repeat 100% 0; margin-left: -480px; padding-left: 50%; width: 960px; padding-top: 42px; } #footer div.inner { width: 940px; } #header { background: #434343 url(/images/bg_header.png) repeat-x 0 0; } #header div.inner { position: relative; height: 90px; } #header #logo { margin-left: 7px; position: absolute; } #header #logo a, #header #logo span { display: block; width: 226px; height: 142px; background: url(/images/bg_logo.png) no-repeat 0 0px; text-indent: -5000px; } #skip-to-content { position: absolute; top: 130px; right: 0; width: 305px; height: 185px; background: url(/images/bg_skip-to-content.png) no-repeat 0 0; text-indent: -5000px; z-index: 1000; } #nav { position: absolute; width: 600px; /* width: 720px; */; top: 6px; right: 0; } #nav ul li { float: left; width: 100px; margin: 0 10px; height: 84px; } #nav ul li a, #nav ul li strong { display: block; padding: 0 12px; font-size: 1.7em; color: #b0c0d4; text-transform: lowercase; position: absolute; width: 80px; bottom: 0; left: 0; padding-bottom: .7em; } #nav ul li { position: relative; text-shadow: rgba(0,0,0,.2) 0 1px 1px; } #nav ul li strong { font-weight: bold; } #nav ul li a:hover, #nav ul li strong { color: #fff; } #nav ul li a:hover small, #nav ul li strong small { color: #dbe4ee; } #nav ul li.current { background: url(/images/bg_nav-li-current.png) no-repeat 0 0; } #nav ul li small span { display: none; } #nav ul li small { display: block; color: #7686a0; font-weight: normal; font-size: .66em; font-weight: normal; } #wrapper { background: #f5f5f5 url(/images/bg_wrapper.png) repeat-x 0 0; padding-top: 40px; } #intro { background: #4cbcec url(/images/bg_intro.png) repeat-x 0 0; /* height: 137px; */ } #intro div { background: url(/images/bg_intro-inner.png) repeat-x 0 100%; padding: 1.2em 0 1.4em; } #intro h1 { font-family: Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif; font-size: 2.7em; line-height: 1.4em; margin-bottom: 1.4em; width: 650px; margin: 0 auto; padding: 0 300px 0 60px; color: #fff; } #content { background: #f5f5f5 url(/images/bg_content.png) repeat-x 0 2px; padding: 2px 0 3em; } #main div.inner { position: relative; background: transparent url(/images/bg_main-inner.png) no-repeat 0 100%; padding: 0 130px; width: auto; min-width: 0; } /* = Slides */ #slides { padding-bottom: 2.5em; height: 288px; } #slides.single { margin-top: 1.5em; } #slides .slide { padding-top: .8em; } #slides .slide .main { float: left; width: 340px; } #slides .slide .sub { float: right; width: 340px; } #slides .slide .images { float: right; width: 290px; margin-top: -10px; height: 268px; } #slides .panel { clear: both; } #slides-nav { margin: 0 auto; padding: 1.1em 0 .5em; } #slides-nav.items-1 { width: 12px; } #slides-nav.items-2 { width: 24px; } #slides-nav.items-3 { width: 36px; } #slides-nav.items-4 { width: 48px; } #slides-nav.items-5 { width: 60px; } #slides-nav.items-6 { width: 72px; } #slides-nav li { float: left; width: 10px; background-image: none; padding: 1px; } #slides-nav li a { display: block; height: 10px; overflow: hidden; text-indent: -5000px; background: url(/images/bg_slides-nav.png) no-repeat 0 0; } #slides-nav li a:hover { background-position: 0 -10px; } #slides-nav li.selected a { background-position: 0 -20px; } #slides-paging span { display: block; position: absolute; cursor: pointer; background: url(/images/bg_slides-paging.png) no-repeat 0 0; width: 42px; height: 42px; top: 50%; margin-top: -21px; text-indent: -5000px; } #slides-paging span.prev { left: 40px; background-position: 0; } #slides-paging span.next { right: 40px; background-position: -42px; } #slides-paging span.prev.disabled { background-position: -84px; cursor: auto; } #slides-paging span.next.disabled { background-position: -126px; cursor: auto; } #slide-contact div.main { background: url(/images/bg_bpma.png) no-repeat 100% 0; } /* Contact map */ .map img { padding: 2px; border: 8px solid #f5f5f5; margin-bottom: .4em; } .map:first-child { margin-bottom: 1.3em; } #footer { background: #8f8f8f url(/images/bg_footer.png) repeat-x 0 0; padding: 1em 0; } #footer .inner { padding: 0 10px } #footer p { color: #d5d5d5; font-size: 1.2em; line-height: 1.9em; margin: 0; } #footer a { text-decoration: none; } #footer p.copyright a { color: #eee; } #footer p.copyright a:hover { color: #fff; } /* = Self-clearing floats -------------------------------------------------- */ #header .inner:after, #wrapper .inner:after, #footer .inner:after, #slides .slide:after, #slides .panel:after, #slides-nav:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }