/* ========================================================================== STYLE.CSS | CSS FRAMEWORK -------------------------- Main Project specific styles - BAT K - Sonar - author: Richard Morris [richard@fueldesign.co.nz] version: - 12 September 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, dt, dd, address, abbr, input, select, textarea, table, td, th, a:link, a:visited { /* For Nescape 4.0 and other inheritance intolerant browsers */ font-family: "Trebuchet MS", Trebuchet ,Verdana, Geneva, Arial, Helvetica, sans-serif; color: #000; line-height: 1.5em; } body { font-size: 62.5%; } p, ul, ol, form, cite, a, table, dd, address { font-size: 1.4em; margin-bottom: 1em; } h1 { font-size: 2em; margin-bottom: 5px; color: #900; text-transform: uppercase; } h2 { font-size: 1.7em; margin-bottom: 5px; color: #900;} h3 { font-size: 1.7em; margin-bottom: 5px; color: #666; } h4 { font-size: 1.5em; margin-bottom: 5px; } h5 { font-size: 1.2em; margin-bottom: 5px; } /* ========================================================================== 2 - Global Styles for types ========================================================================== */ /* links */ a:link, a:visited { border-bottom: 1px solid #CCC; } a:hover, a:active { border-bottom: 1px solid #900; color: #900; } a.external { background: transparent url(../images/bg/external.gif) top right no-repeat; padding-right: 12px;} a.email { background: transparent url(../images/bg/email.gif) top right no-repeat; padding-right: 14px;} a:link.top, a:visited.top { color: #933; background: transparent url(../images/bg/top.gif) top right no-repeat; padding-right: 12px; font-size: 12px; border: none;} a:hover.top, a:hover.email, a:hover.external { background-position: right -30px; } /* list types */ ul.bulleted li, dl.events dt { margin-left: 10px; padding-left: 27px; background: transparent url(../images/bg/bullet.gif) top left no-repeat; margin-bottom: 5px; } dl.events dd { margin-left: 37px; margin-bottom: 20px;} dl.events dd a { color: #900; } dl.events dt { font-weight: normal;} dl dt { font-weight: bold; font-size: 1.4em; } ol li { list-style-type: decimal; list-style-position: inside; } dl.timeline dt, dl.faq dt { color: #900; font-size: 1.7em; } ul.links li { margin-bottom: 10px; } ul li p, ul li p a, ul li a, ol li a, p a, dd a, ul address, dl dd p, ul li p, ul ul { font-size: 1em; }/* normalize font sizing */ /* blockquotes */ blockquote { margin-bottom: 1em; background: transparent url(../images/bg/quotes_top.gif) top left no-repeat; } blockquote p { font-family: georgia, "times new roman", serif; font-size: 1.4em; padding: 10px 0 0px 45px; font-weight: bold; color: #666;} blockquote cite { font-style: normal; color: #666; display: block; line-height: 30px; background: transparent url(../images/bg/quotes_bottom.gif) bottom right no-repeat; } /* strong */ strong.error, strong.required { color: #900; } dl.events strong { color:#900 } ul.bulleted strong { color: #900 } /* em */ em { font-style: normal; } em.required { color: #900; font-weight: bold; font-style: normal; } ul#accessOptions em { color: #FFF; } /* p */ p.leadin { font-weight: bold; } /* img */ #secondaryContent img { border: 3px solid #CCC; } /* hr */ div.hr { background: transparent url(../images/bg/hr.gif) bottom left repeat-x; height: 42px; text-align: right; clear: right; } /* table */ table.staff td { width: 300px; } div.right { float: right; } div.highlight { background: #900; color: #FFF; margin-bottom: 10px; } .highlight p { padding: 10px; color: #FFF; } /* ========================================================================== 3 - Main Structural Divs ========================================================================== */ html, body { height: 100%; } body { background: #FFF url(../images/bg/bg.jpg) top left repeat-x; min-width: 760px; } div#header { height: 195px; width: 100%; position: relative; background: transparent url(../images/bg/header_bg.jpg) 210px 0 no-repeat; } div#primaryContent { margin: 10px 20px; } div.lCol { width: 200px; float: left; } div.rCol { margin-left: 200px; } div#secondaryContent { padding: 10px 20px; clear: both; background-color: #EEE; border-top: 1px solid #DDD; border-bottom: 5px solid #CCC; } div#footer { clear: both; padding: 5px 20px; } /* ========================================================================== 4 - Header styles ========================================================================== */ a#logo { position: absolute; top: 100px; left: 20px; border: none;} a#logo img { background: none; } img#batLogo { position: absolute; left: 20px; top: 5px; background: none; border: none; } div#flashBanner { position: absolute; top: 58px; left: 231px;} div#flashBanner h3, div#flashBanner p, div#flashBanner a { color: #FFF; } /* main navigation */ ul#nav { margin-right: 20px; } #nav li { line-height: 28px; height: 28px; display: inline;} ul#nav a { margin-left: 10px; display: block; border: none; margin: 0; padding: 1px 0 1px 0; border-bottom: 1px solid #DDD; cursor: pointer; font-size: 19px; color:#900; border-right: 8px solid #FFF;} ul#nav a:hover { border-right: 8px solid #999; background-position: 0 -20px; color: #000;} ul#nav li.current a { border-right: 8px solid #9F0000; } ul#nav a:hover.current { background-position: 0 10px; cursor: default; border-right: 8px solid #9F0000; } ul#nav acronym { border: none; cursor: pointer; } /* ul#nav a { margin-left: 10px; display: block; line-height: 28px; height: 28px; border: none; margin: 0; padding: 0; border-bottom: 1px solid #DDD; cursor: pointer; } ul#nav a:hover { border-right: 8px solid #999; background-position: 0 -20px;} ul#nav li.current a { border-right: 8px solid #9F0000; } ul#nav a:hover.current { background-position: 0 10px; cursor: default; border-right: 8px solid #9F0000; } a#navHome { background: transparent url(../images/bg/nav/home.gif) 0 10px no-repeat; } a#navCompanyProfile { background: transparent url(../images/bg/nav/company_profile.gif) 0 10px no-repeat; } a#navHowKSonarWorks { background: transparent url(../images/bg/nav/how_ksonar_works.gif) 0 10px no-repeat; } a#navFAQ { background: transparent url(../images/bg/nav/faq.gif) 0 10px no-repeat; } a#navMedia { background: transparent url(../images/bg/nav/media.gif) 0 10px no-repeat; } a#navHistory { background: transparent url(../images/bg/nav/our_history.gif) 0 10px no-repeat; } a#navTraining { background: transparent url(../images/bg/nav/training_materials.gif) 0 10px no-repeat; } a#navEvents { background: transparent url(../images/bg/nav/ksonar_events.gif) 0 10px no-repeat; } a#navDistributors { background: transparent url(../images/bg/nav/distributors.gif) 0 10px no-repeat; } a#navLinks { background: transparent url(../images/bg/nav/links.gif) 0 10px no-repeat; } a#navContact { background: transparent url(../images/bg/nav/contact_us.gif) 0 10px no-repeat; } */ /* language select */ ul#languageSelect { margin-right: 20px;} ul#languageSelect a { padding-left: 25px; } a#english { background: transparent url(../images/bg/flags/english.gif) 0 0 no-repeat; } a#chinese { background: transparent url(../images/bg/flags/chinese.gif) 0 0 no-repeat;} a#german { background: transparent url(../images/bg/flags/german.gif) 0 0 no-repeat;} a#french { background: transparent url(../images/bg/flags/french.gif) 0 0 no-repeat;} a#spanish { background: transparent url(../images/bg/flags/spanish.gif) 0 0 no-repeat;} /* accessibility options */ ul#accessOptions { position: absolute; top: 10px; right: 20px; } ul#accessOptions li { float: left; margin-left: 5px; line-height: 30px;} ul#accessOptions a { display: block; border: none; } ul#accessOptions a:link, ul#accessOptions a:visited { border: 2px solid #666;} ul#accessOptions a:hover { border: 2px solid #900; } a:link#defaultText, a:visited#defaultText { background: transparent url(../images/bg/buttons/default_text.gif) top left no-repeat; width:24px; height:30px; } a:link#largeText, a:visited#largeText { background: transparent url(../images/bg/buttons/large_text.gif) top left no-repeat; width:24px; height:30px; } a:link#highContrast, a:visited#highContrast { background: transparent url(../images/bg/buttons/high_contrast.gif) top left no-repeat; width:24px; height:30px; } a:link#skipToNav, a:visited#skipToNav { background: transparent url(../images/bg/buttons/navigation.gif) top left no-repeat; width:80px; height:30px; } a:link#skipToContent, a:visited#skipToContent { background: transparent url(../images/bg/buttons/content.gif) top left no-repeat; width:80px; height:30px; } a:link#skipToSitemap, a:visited#skipToSitemap { background: transparent url(../images/bg/buttons/sitemap.gif) top left no-repeat; width:80px; height:30px; } ul#accessOptions a:link#defaultText, ul#accessOptions a:visited#defaultText { border: 2px solid #900; } /* ========================================================================== 5 - Main content styles ========================================================================== */ #primaryContent img { display: inline; border: 3px solid #CCC; float: right; margin-left: 10px; } div#rAlign { width: 200px; float: right; margin-left: 15px;} div#rAlign img { margin-bottom: 5px; } div#rAlign p a { font-size: 0.85em; } /* ========================================================================== 6 - Footer styles ========================================================================== */ ul#footNav li{ display: inline; color: #AAA; } ul#footNav a, ul#footNav li { color: #AAA; font-size: 14px; } ul#footNav a:hover { color: #900; } /* ========================================================================== 7 - Page specific styles ========================================================================== */ ul#sitemap ul { margin-bottom: 0; } ul#sitemap li { margin-left: 15px; padding-left: 27px; background: transparent url(../images/bg/bullet.gif) top left no-repeat; } ul#sitemap ul li { padding: 0; background: none; } /* media */ div.video img { float: left; }