/* ========================================================================== STYLE.CSS | CSS FRAMEWORK -------------------------- Main Project specific styles - Mainland Air - author: Richard Morris [richard@fueldesign.co.nz] Updated Liam Dilley [liam@fueldesign.co.nz] version: - March 09 - 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("thickbox.css"); @import url("forms.css"); @import url("datepicker.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, select, textarea, table, td, th, a:link, a:visited { /* For Nescape 4.0 and other inheritance intolerant browsers */ font-family: "Lucida Grande","Lucida Sans Unicode", "Trebuchet MS", Trebuchet MS, Verdana, Geneva, Arial, Helvetica, sans-serif; color: #666; line-height: 1.9em; } body { font-size: 62.5%; } div#container { font-size: 1.1em;} p, ul, dl, ol, form, blockquote { margin-bottom: 10px; } h1 { font-size: 2em; margin-bottom: 10px; color: #009; } h2 { font-size: 1.5em; margin-bottom: 8px; } h3 { font-size: 1.2em; margin-bottom: 8px; font-weight: normal; text-transform: uppercase; border-bottom: 1px solid #EEE; } h4 { font-size: 1.3em; margin-bottom: 8px; } h5 { font-size: 1.2em; margin-bottom: 8px; font-weight: normal;} h1 img { background: none; } /* ========================================================================== 2 - Global Styles for types ========================================================================== */ /* links */ a:link, a:visited { border-bottom: 1px dotted #DDD; } a:hover, a:active { } a:link.external, a:visited.external { background: transparent url(../images/bg/external.gif) top right no-repeat; padding-right: 12px;} /* list types */ #primaryContent li { padding-left: 12px; background: transparent url(../images/bg/bullet.gif) top left no-repeat; margin-bottom: 5px; margin-left: 8px; } dl dt {} ol li { list-style-type: lower-alpha; list-style-position: inside; } /* blockquotes */ blockquote { margin-bottom: 1em; } blockquote p { font-family: georgia, "times new roman", serif; color: #AAA; } blockquote cite { font-style: normal; color: #CCC; } /* strong */ strong.error { color: #F00; } /* em */ p em { font-style: normal; color: #009; } em.required { color: #F00; font-weight: bold; font-style: normal; } li.current a { cursor: default; } /* ========================================================================== 3 - Main Structural Divs ========================================================================== */ html, body { height: 100%; } body { background: #EEE url(../images/bg/bg.gif) top center repeat-y; text-align: center; } div#container { width: 770px; margin-left: auto; margin-right: auto; text-align: left; height: 100%; } div#header { position: relative; width: 770px; height: 75px; margin-bottom: 10px; } div#banner {height: 174px; } div#wrapper { background: transparent url(../images/bg/wrapper_bg.gif) top left repeat-y; margin-bottom: 10px; margin-right: 11px; padding-top: 4px; padding-left: 4px; padding-bottom: 7px; } div#wrapperless { margin-bottom: 10px; margin-right: 11px; padding-top: 4px; padding-left: 4px; padding-bottom: 7px; } div#primaryContent { float: right; width: 514px; margin-top: 7px; } primaryContentSidebarless { float: right; width: 737px; margin-top: 7px; } div#sidebar { width: 223px; } .page-image { border:1px solid #FFFFFF; margin:4px 4px 10px; } .page-logo { border: 1px solid #ddd; margin:4px 4px 10px; } div#footer { clear: both; position: relative; width: 770px; height: 50px; padding-left: 10px;} /* ========================================================================== 4 - Header styles ========================================================================== */ #header #headerNav { position: absolute; bottom: 0px; right: 10px; background: none; margin-bottom: 0; } #headerNav li{ display: inline; } #header #logo { position:absolute; bottom:0; top:29px; left:10px; border:0px none; } #headerNav a { float: left; display: block; height: 9px; margin-left: 15px; border-bottom: none; } a#home { width: 41px; background: transparent url(../images/bg/nav/home.gif) top left no-repeat; } a#gallery { width: 64px; background: transparent url(../images/bg/nav/gallery.gif) top left no-repeat; } a#about { width: 49px; background: transparent url(../images/bg/nav/about.gif) top left no-repeat; } a#news { width: 39px; background: transparent url(../images/bg/nav/news.gif) top left no-repeat; } a#contact { width: 66px;background: transparent url(../images/bg/nav/contact.gif) top left no-repeat; } #headerNav a:hover { background-position: top right;} #headerNav li.current a { background-position: top right; cursor: default; } /* ========================================================================== 5 - Wrapper styles ========================================================================== */ ul#nav { background: #009 url(../images/bg/nav_bg.gif) top left repeat-x; height: 32px; line-height: 32px; position: relative; } #nav li { display: inline; } #nav a { padding: 0 10px; border-bottom: none; border-left: 1px solid #274890; border-right: 1px solid #1C3365; display: block; height: 28px; float: left; } a#scenic_flights { width: 118px; background: transparent url(../images/bg/nav/scenic_flights.gif) center center no-repeat; } a#charter_flights { width: 132px; background: transparent url(../images/bg/nav/charter_flights.gif) center center no-repeat; } a#scheduled_flights { width: 152px; background: transparent url(../images/bg/nav/scheduled_flights.gif) center center no-repeat; } a#wings_over_rails { width: 142px; background: transparent url(../images/bg/nav/wings_over_rails.gif) center center no-repeat; } a#flight_training { width: 128px; background: transparent url(../images/bg/nav/flight_training.gif) center center no-repeat; } a#back { width: 106px; background: transparent url(../images/bg/back.gif) center center no-repeat; position: absolute; right: 0px; top: 2px; border: none; } #nav a:hover, #nav li.current a { border-bottom: 3px solid #426FD1; } a:hover#back { border: none; margin-right: 3px; } img.banner { margin-bottom: 10px; } a.clickThru { outline: none; display: block; background: #F0F7FB; border-top: 1px dashed #CCC; border-bottom: 1px dashed #CCC; padding: 10px; } span.learnMore { margin-top: 5px; text-indent: -5000px; float: right; display: block; width: 106px; height: 22px; background: transparent url(../images/bg/learn_more.gif) top left no-repeat; } span.bookNow { margin-top: 5px; text-indent: -5000px; float: right; display: block; width: 106px; height: 22px; background: transparent url(../images/bg/book.gif) top left no-repeat; } a:hover.clickThru { background-color: #E9F3F9; } a:hover.clickThru span.learnMore, a:hover.clickThru span.bookNow { background-position: top right; } #sidebar a img { border: 3px solid #EEE; } #sidebar a:hover img { border: 3px solid #ccc; } ul#subnav { background-color: #CCC; margin: 4px; border: 1px solid #FFF; margin-bottom: 10px;} #subnav a { display: block; border-top: 1px solid #DDD; background: transparent url(../images/bg/arrow.png) 194px center no-repeat; border-bottom: 1px solid #B7B7B7; height: 30px; line-height: 30px; padding-left: 10px; } #subnav a:hover, #subnav li.current a { background-color: #B7B7B7; color: #FFF; } #new-item a {background: transparent url(../images/bg/arrow-new.png) 156px center no-repeat; } div#testimonial { background: #FFF url(../images/bg/testimonials_bg.gif) bottom right no-repeat; margin: 4px; border-left: 1px solid #DDD; border-top: 1px solid #DDD; padding: 5px 5px 5px 10px; } #testimonial blockquote { border-top: 1px solid #EEE; padding-top: 5px; } #testimonial h4 { margin-bottom: 5px; border: none; visibility: visible; } #testimonial img { margin-bottom: 10px; margin-top: 3px; } div#certificate { background: #FFF url(../images/bg/testimonials_bg.gif) bottom right no-repeat; margin: 4px; border-left: 1px solid #DDD; border-top: 1px solid #DDD; padding: 5px 5px 5px 10px; } #certificate h4 { margin-bottom: 5px; border: none; visibility: visible; } #certificate img { margin-bottom: 10px; margin-top: 3px; } #certificate ul img { margin:0 auto; } #certificate ul a img { border:3px solid #ccc; } #certificate ul a:hover img { border:3px solid #294d9b; } #certificate ul li { margin-bottom:15px; } div#contactDeets { background: #FFF url(../images/bg/testimonials_bg.gif) bottom right no-repeat; margin: 4px; border-left: 1px solid #DDD; border-top: 1px solid #DDD; padding: 10px 5px 5px 10px; } #contactDeets dt { float: left; width: 50px; color: #BBB; } #contactDeets dd { margin-bottom: 5px; margin-left: 65px; } #contactDeets h4 { padding-bottom: 5px; border-bottom: 1px solid #EEE; } ol.questions { margin-bottom: 15px; } ol.questions li, ol.answers li { list-style-type: none; } #primaryContent ol.answers li { position: relative; background: none; padding: 0; margin: 0; margin-bottom: 15px; } a:link.top, a:visited.top { border: none; position: absolute; top: 0; right: 0; display: block; width: 49px; height: 18px; background: transparent url(../images/bg/top.gif) top left no-repeat; } /* ========================================================================== 6 - Footer styles ========================================================================== */ #footNav { position: absolute; left: 245px; margin-right: 50px; } #footLogo { position: absolute; border: none; } #copyright { position: absolute; bottom: 0; left: 10px;; } #footNav li, #copyright li{ display: inline; color: #EEE; } #footNav a, #copyright a { color: #CCC; border-bottom: none; } #footNav a:hover, #footNav li.current a, #copyright a:hover, #copyright li.current a { color: #666; } #footer a:link.top, #footer a:visited.top { top: 0; right: 20px; } /* ========================================================================== 7 - Page specific styles ========================================================================== */ ul#sitemap, #sitemap ul { list-style-type: none; background: #FFF url(../images/bg/vline.png) repeat-y; margin: 0; padding: 0; } #sitemap ul { margin-left: 10px; } #sitemap li { margin: 0; padding: 0 12px; line-height: 20px; background: url(../images/bg/node.png) no-repeat; } #sitemap li.last { background: #FFF url(../images/bg/lastnode.png) no-repeat; } #sitemap a { border-bottom: none; } /* form submit SUCCESS PAGES */ div#success { background: #e3fce5; border: 3px solid #9ae49e; padding: 10px; } #success h2, #success p { color: #28a82e; } #success h2 { border-bottom: 1px dotted #28a82e; } /* form submit ERROR PAGES */ div#error { background: #fed3d6; border: 3px solid #fc9ca3; padding: 10px; } #error h2, #error p { color: #e3535d; } #error h2 { border-bottom: 1px dotted #e3535d; } .pilot-list { } .pilot { margin-bottom:20px; background:#f0F7fb; padding:10px; border-bottom:1px dashed #ccc; border-top:1px dashed #ccc;} .pilot h2 { margin-bottom:11px; line-height:1.5em; background:white; text-indent:10px; } .profile-image { float:left; border:1px solid #ddd; margin:5px 5px 5px 0; background:white; padding:4px;} p.highlight { background:#f0f7fb none repeat scroll 0 0; margin:15px 0 0 0; border-bottom:1px dashed #ccc; border-top:1px dashed #ccc; display:block; padding:10px; } /* Slider Styles */ #liSwitcher-controls {float:right; margin:0; display:none; } #liSwitcher-controls a.liSwitcher-buttons {display:block; float:left; margin:0 3px; color:#000; } #liSwitcher-controls a.liSwitcher-buttons:hover {color: #666;} #liSwitcher-controls a.liSwitcher-buttons:active {color: #888;} #primaryContent #liSwitcher-viewport ul li {list-style:none; margin:0px; padding:0px; } /* Gallery Slider Styles */ galleryiSwitcher-wrapper {margin:0 0 20px 0;} #galleryiSwitcher-controls {margin:0; text-align:right; } #galleryiSwitcher-controls a.galleryiSwitcher-buttons { } #galleryiSwitcher-controls a.galleryiSwitcher-buttons:hover {color: #000099; cursor:pointer;} #galleryiSwitcher-controls a.galleryiSwitcher-buttons:active {color: #ddd;} #primaryContent #galleryiSwitcher-viewport ul li {width:512px; list-style:none; margin:0px; padding:0px; border:1px solid #ddd; background-color:#eee; } #primaryContent #galleryiSwitcher-viewport ul li img {width:510px; height:383px; border:1px solid #fff;} #primaryContent #galleryiSwitcher-viewport ul li p {background-color:#fff; margin:10px; padding:5px;}