/* ========================================================================== STYLE.CSS | CSS FRAMEWORK -------------------------- Main Project specific styles - ORION CP - author: Richard Morris [richard@fueldesign.co.nz] version: - 8 November 2006 - Contents: -------------------------- 1 - Default Typography Sizing, Colours and Margins 2 - Global Stlyes for types 3 - Main Structural Divs 4 - Header styles 5 - Main body Styles 6 - Footer Styles 7 - Page Specific sty;es ========================================================================== */ @import url("base.css"); @import url("sifr.css"); @import url("forms.css"); /* ========================================================================== 1 - Default Typography Sizing, Colours and Margins ========================================================================== */ html, body, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address, abbr, input, select, textarea, table, td, th, a:link, a:visited { /* For Nescape 4.0 and other inheritance intolerant browsers */ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #808080; line-height: 1.6em; } body { font-size: 62.5%; } div#container { font-size: 1.1em;} p, ul, dl, ol, form, blockquote { margin-bottom: 10px; } h1 { font-size: 1.5em; margin-bottom: 15px; text-transform: uppercase; font-weight: normal; line-height: 25px; height: 25px; color: #FFF; } h2 { font-size: 1.1em; margin-bottom: 10px; line-height: 1.8em; border-bottom: 1px solid #EEE; background: transparent url(/images/bg/nav_bg.gif) top left repeat-x; } h3 { font-size: 1em; margin-bottom: 5px; text-transform: uppercase; } h4 { font-size: 1.3em; margin-bottom: 0; } h5 { font-size: 1.2em; margin-bottom: 0; } /* ========================================================================== 2 - Global Styles for types ========================================================================== */ /* links */ a:link, a:visited { color: #003d7e; } a:hover, a:active { text-decoration: underline; } a:link.pdf, a:visited.pdf { background: transparent url(/images/bg/pdf.gif) center left no-repeat; padding-left: 20px; height: 100px; } /* list types */ ul.bulleted li { background: transparent url(/images/bg/bullet.gif) center left no-repeat; margin-left: 15px; padding-left: 25px; margin-bottom: 5px; } dl dt { font-weight: bold; } ol li { list-style-type: lower-alpha; list-style-position: inside; } ul.spaced li { margin-left: 15px; margin-bottom: 5px; vertical-align: middle; } ul.spaced li a:link, ul.spaced li a:visited { padding-top: 2px; padding-bottom: 2px; } /* blockquotes */ blockquote { background-color: #F5F5F5; margin-bottom: 1em; border-left: 5px solid #DDD; } blockquote p { padding: 5px 10px 5px 10px; } blockquote cite { font-style: normal; color: #CCC; font-weight: bold; } /* strong */ strong.error { color: #F00; } /* em */ em.required { color: #F00; font-weight: bold; font-style: normal; } /* table styles */ table { width: 100%; } td, th { border: 1px solid #EEE; vertical-align: top; padding: 5px; } th { background: transparent url(/images/bg/nav_bg.gif) top left repeat-x; text-align: left; } th a:link, th a:visited { color: #808080; font-weight: normal; outline: none; display: block; text-decoration: none; } th a:hover { color: #003d7e;} th img { display: inline; } table#productsTable tr a strong { background: transparent url(/images/bg/bullet.gif) center left no-repeat; padding-left: 25px; } /* img */ img.right { float: right; margin-left: 10px; } p.leadin { font-weight: bold; } /* ========================================================================== 3 - Main Structural Divs ========================================================================== */ html, body { height: 100%; } body { background: #FFF url(/images/bg/bg.gif) top left repeat-x; text-align: center; } div#container { width: 760px; margin-left: auto; margin-right: auto; text-align: left; } div#header { height: 176px; width: 100%; position: relative; } div#main { position: relative; width: 760px; } div#primaryContent { position: absolute; left: 160px; top: 0; width: 600px; height: 200px; background: transparent url(/images/bg/primaryContent_bg.gif) top left repeat-x; } div#secondaryContent { position: absolute; left: 0; top: 0; width: 160px; height: 100px; background: transparent url(/images/bg/secondaryContent_bg.jpg) top left repeat-x; min-height: 421px; } /* ========================================================================== 4 - Header styles ========================================================================== */ ul#nav { position: absolute; right: 0; top: 0px; width: 410px; } ul#nav li { display: inline; text-transform: uppercase; } ul#nav a { outline: none; display: block; float: left; border: none; border: 1px solid #FFFFFF; color: #0A1F62; text-decoration: none; padding-left: 8px; padding-right: 9px; height: 43px; line-height: 55px; background: #FFF; } ul#nav a:hover, ul#nav li.current a { background: transparent url(/images/bg/nav_bg.gif) top left repeat-x; border: 1px solid #EEE;} div#flashSlideshow { position: absolute; top: 41px; width: 160px; height: 135px; background: transparent url(/images/img/slideshow/1.jpg) top left no-repeat; } div#flashLogo { position: absolute; left: 160px; width: 167px; height: 176px; } a#logo { display: block; width: 167px; height: 176px; background: transparent url(/images/bg/logo_bg/1.jpg) bottom left no-repeat; border: none; } a#logo img { margin: 10px; } img#banner { position: absolute; top: 41px; right: 0;} a.moreButton { display: block; width: 75px; height: 13px; margin-top: 3px; background: transparent url(/images/bg/more.gif) top left no-repeat; } a:hover.moreButton { background-position: top right; } /* ========================================================================== 5 - Main content styles ========================================================================== */ /* primaryContent */ #primaryContent .wrap { margin-left: 15px; } /* secondaryContent */ ul#subNav { background-color: #0A1F62; margin-bottom: 0;} ul#subNav a { border-bottom: 1px solid #FFF; display: block; color: #FFF; text-align: right; text-transform: uppercase; height: 25px; line-height: 25px; padding-right: 10px; text-decoration: none; } ul#subNav a:hover, ul#subNav li.current a { background-color: #B2B2B2; } a#agRewards { background: #FFF url(/images/bg/agRewards.gif) center center no-repeat; display: block; width: 100%; height: 50px; border: none; } a#adobe { display: block; width: 88px; height: 31px; border: none; margin: 5px auto; } dl.contactDetails { width: 270px; float: left; height: 150px; margin-left: 10px; } .contactDetails dt { float: left; width: 60px; } .contactDetails dd { margin-left: 70px; } .contactDetails dd.name, .contactDetails dd.position { margin-left: 0; } .contactDetails h3 { margin-bottom: 0; color: #003d7e; } .contactDetails em { display: block; margin-bottom: 5px; font-style: normal; } dl#contactDeets { font-size: 10px; margin: 8px; text-align: right; margin-bottom: 10px; } #contactDeets dd { margin-bottom: 5px; } /* ========================================================================== 6 - Footer styles ========================================================================== */ ul#footNav li{ display: inline; } ul#footNav a { } /* ========================================================================== 7 - Page specific styles ========================================================================== */ form#searchForm { padding: 0; margin: 0; height: 25px; background: #FFF; border-left: 1px solid #CCC; } #searchForm ul { margin: 0; height: 25px; width: 100%; position: relative; } #searchForm ul li { display: inline; } #searchForm input { border: none; margin: 0; padding: 0; } input#keywords { width: 92px; position: absolute; top: 0; left: 0; height: 23px; line-height: 23px; border: 1px solid #FFF; vertical-align: middle;} input#searchButton { vertical-align: middle; position: absolute; top: 0; right: 0; }