/* ========================================================================== STYLE.CSS | CSS FRAMEWORK -------------------------- Main Project specific styles - Wings over whales - author: Jason Carr [jason@fueldesign.co.nz] version: - March 07 - 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"); @import url("thickbox.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: Arial, Helvetica, Verdana, Geneva, sans-serif; color: #666; LINE-HEIGHT: 1.5em; } body { font-size: 62.5%; } div#container { font-size: 1.1em;} p, ul, dl, ol, form, blockquote, table { margin-bottom: 10px; } h1 { font-size: 1.3em; margin-bottom: 8px; color: #333333; font-weight: normal; text-transform: uppercase; } h2 { font-size: 1.2em; margin-bottom: 8px; font-weight: normal; text-transform: uppercase; border-bottom: 1px solid #DDD; } h3 { font-size: 1.1em; margin-bottom: 8px; color: #f60; font-weight: normal; } h4 { font-size: 1.1em; margin-bottom: 5px; } h5 { font-size: 1.1em; margin-bottom: 5px; } /* ========================================================================== 2 - Global Styles for types ========================================================================== */ /* links */ a:link, a:visited { border-bottom: 1px dotted #999; color: #728edd; } a:hover { color: #f37221; border-bottom: 1px solid #f37221; } a:link.external, a:visited.external { background: transparent url(../images/bg/external.gif) top right no-repeat; padding-right: 12px;} /* list types */ dl dt { font-weight: bold; } ol li { list-style-type: lower-alpha; list-style-position: inside; } /* blockquotes */ blockquote { background-color: #fff7f2; margin-bottom: 1em; padding: 5px; } blockquote p { color: #f37221; margin: 5px 5px 5px 15px; font: 1.2em georgia, "times new roman", serif; } 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; } .current a { cursor: deafault; } table { width: 100%; background: #EEE; } th { background: #666; color: #FFF; padding: 3px 5px; border: 1px solid #CCC;} tr.orange th { color: #F60; } td { padding: 3px 5px; border: 1px solid #CCC; } td.col2 { background: #c6e1ff; width: 200px; } td.col3 { background: #ffc6e6; width: 200px; } #centerCol img { margin-bottom: 10px; } p em { color: #BBB; } #centerCol img.inline { display: inline; margin-right: 10px; margin-bottom: 10px; float: left; } /* ========================================================================== 3 - Main Structural Divs ========================================================================== */ html, body { height: 100%; } body { background: #FFF url(../i/bg/bg.gif) top left repeat-x; text-align: center; } div#container { width: 800px; margin-left: auto; margin-right: auto; text-align: left; padding-top: 8px; } #wrapper { background: #FFF url(../images/bg/wrapper_bg.gif) 152px 0 repeat-y; } #header { background: #FFF url(../images/bg/header_bg.jpg) 0 0 repeat-y; margin-bottom: 8px; width: 800px; height: 115px; position: relative; } #banner { background: #FFF url(../images/bg/banner_bg.jpg) 0 0 no-repeat; width: 800px; height: 83px; position: relative; margin-bottom: 3px; } #leftCol { width: 143px; float: left; } #centerCol { background: transparent url(../images/bg/mainColTopBackground.jpg) top center no-repeat; width: 495px; float: left; margin-left: 9px; } #rightCol { width: 143px; float: right; margin-left: 9px; } .lining { padding: 10px; } #centerCol .lining { background: url(../images/bg/bottomMainColumn.jpg) bottom center no-repeat; min-height: 550px; } /* ========================================================================== 4 - Header styles ========================================================================== */ #flash { position: absolute; left: 0; background-image: url(../images/bg/banner_bg.jpg); background-repeat: no-repeat; } #bannerTitle { position: absolute; right: 20px; top: 40px; } #logo { position: absolute; left: 10px; top: 5px; } /* ========================================================================== 5 - left column styles ========================================================================== */ div#nav { background: #000000 url(../images/bg/columnTop.gif) no-repeat top; padding-top: 16px; } #nav ul { background: url(../images/bg/columnBottomLeft.jpg) no-repeat bottom; padding-bottom: 78px; } #nav li { text-align: right; font-weight: bold; background: #000000; border-bottom: 1px solid #FFFFFF; } #nav a { color: #FFFFFF; display: block; padding-right: 10px; line-height: 160%; height: 160%; border-bottom: none; } #nav a:hover, #nav li.current a { color: #000000; background: #f37221; } #section-contact #menu-contact a, #section-maps #menu-maps a, #section-home #menu-home a, #section-about #menu-about a, #nav a:active { color: #000000; background: #f37221; } /* ========================================================================== 6 - center column styles ========================================================================== */ ul#gallery li { display: block; margin: 5px; width: 120px height: 120px; float: left; } #gallery img { margin: 0; } #gallery a { border: 3px solid #DDD; display: block; width: 120px height: 120px; } ul#gallery a:hover { border: 3px solid #F60; } div#success { background: #e3fce5; border: 3px solid #9ae49e; padding: 10px; } #success h2, #success p { color: #28a82e; } #success h2 { border-bottom: 1px dotted #28a82e; } div#error { background: #fed3d6; border: 3px solid #fc9ca3; padding: 10px; } #error h2, #error p { color: #e3535d; } #error h2 { border-bottom: 1px dotted #e3535d; } /* ========================================================================== 7 - right column styles ========================================================================== */ div.sidebarBox { background: #000 url(../images/bg/colBackTopRight.gif) top center no-repeat; margin-bottom: 10px; } .sidebarBox .lining { background: transparent url(../images/bg/columnBottomRight.jpg) bottom center no-repeat; } .sidebarBox p, .sidebarBox li, .sidebarBox a, .sidebarBox h4, .sidebarBox h3 { color: #FFF; } .sidebarBox img { border: 1px solid #FFF; margin-bottom: 10px; } .sidebarBox h4 { font-size: 100%; } .sidebarBox em, .sidebarBox em a { font-style: normal; color: #f37221; } a#webmasters { display: block; text-align: right; color: #CCC; font-size: 10px; border: none; } #webmasters img { display: inline; } /* ========================================================================== 8 - Page specific styles ========================================================================== */ ul#sitemap { } #map_canvas { height: 470px; width: 460px; margin-right: auto; margin-left: auto; border-top-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #F37221; border-right-color: #F37221; border-bottom-color: #F37221; border-left-color: #F37221; } #map_canvas2 { height: 420px; width: 470px; }