/* ========================================================================== STYLE.CSS | CSS FRAMEWORK -------------------------- Main Project specific styles - WET N WILD RAFTING - author: Fuel Design Ltd: http://www.fueldesign.co.nz version: - 18 September 2008 - revision: - 21 November 2008 - Contents: -------------------------- 1 - Default Typography Sizing, Colours and Margins 2 - Global Stlyes for types 3 - Main Structural Divs 4 - Header styles 5 - Banner Styles 6 - Main body Styles 7 - Testimonials Styles 8 - Footer Styles 9 - Page Specific styles 10 - Modal / thickbox Popups Styles 11 - CMS Overrides 12 - CoreCMS Editor Styles ========================================================================== */ @import url("base.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 { font-family: "Trebuchet MS", Trebuchet, Verdana, Geneva, Arial, Helvetica, sans-serif; color: #003274; line-height: 1.5em; } body { font-size: 0.8em; } div#container { font-size: 1.2em;} p, ul, dl, ol, form, blockquote, table { margin-bottom: 0.5em; } h1 { font-size: 1.6em; margin-bottom: 0.5em; color: #B11F16; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif;} h2 { font-size: 1.4em; margin-bottom: 0.2em; text-transform: uppercase; } h3 { font-size: 1.1em; margin-bottom: 0.2em; } h4 { font-size: 1.3em; margin-bottom: 0.2em; } h5 { font-size: 1.2em; margin-bottom: 0.2em; } /* ========================================================================== 2 - Global Styles for types ========================================================================== */ /* links */ a:link, a:visited {border-bottom:1px dotted #89943E;} a:link img, a:visited img {border:0 none;} a:hover, a:active {border-bottom:1px solid #B11F16;color:#B11F16;} a:link.external, a:visited.external {background:transparent url(../images/bg/external.gif) top right no-repeat; padding-right: 13px;} a:link.mail, a:visited.mail {background:transparent url(../images/bg/mail.gif) top right no-repeat; padding-right: 15px;} a:link.top, a:visited.top {background:transparent url(../images/bg/top.gif) top right no-repeat; padding-right: 15px;} a:hover.mail, a:hover.external, a:hover.top {background-position: right -30px;} a:link,a:visited,a:hover,a:active,object {outline:0 none;} /* list types */ ul.bulleted li { padding-left: 20px; background: transparent url(../i/bg/bullet.gif) top left no-repeat; margin-bottom: 5px; } dl dt { font-weight: bold; } ol li { list-style-type: lower-alpha; list-style-position: inside; } ul.inline li { display: inline; } /* blockquotes */ blockquote cite { font-style: normal; font-weight: bold; } /* strong */ strong.error { color: #B11F16; } strong.price { color: #B11F16; font-size: 1.1em;} /* em */ em.required { font-style: normal; } /* p */ p.leadin { font-weight: bold; } /* hr */ div.hr { background: transparent url(../images/bg/border.gif) bottom left repeat-x; height: 10px; clear: both; margin-bottom: 5px;} /* flash */ .flash { margin: 0; padding: 0; } #flashMap { border: 3px solid #D5E05F; width: 214px; height:300px; } /* table */ table { width: 100%; } table.schedule td { vertical-align: top; width: 120px; } table th { background-color: #D5E05F; } /* ========================================================================== 3 - Main Structural Divs ========================================================================== */ html, body { height: 100%; } body { text-align:center; background: #C1D72F url(../images/bg/bg2.gif) top center no-repeat; } div#container {/*width:792px;*/width:932px;margin-left:auto; margin-right:auto; text-align:left; } div#header { height:110px;width:980px;/*width:830px;*/margin-left:auto; margin-right:auto; text-align:left; position:relative; } div#bannerWrap { background: transparent url(../images/bg/banner_bg.gif) top left no-repeat; height: 219px; width: 100%; position: relative; margin-bottom: 10px;} div#nav-wrap { width:956px;height:255px;overflow:hidden; position:relative; margin-bottom:10px; } div#mainContent { width:675px;/*width:535px;*/ float: right; margin-bottom: 10px;} div#sidebar { width: 240px; float: left; margin-bottom: 10px; } div#footer { clear:both;font-size:0.8em;height:35px;margin-top:10px;padding-bottom:20px;position:relative;width:100%; } /* ========================================================================== 4 - Header styles ========================================================================== */ #logo { position: absolute; top: 10px; border:0 none; } #logo img { background: none; } div#flashPhone { position: absolute; top: 15px; right: 25px; } #header-login-position {left:285px;position:absolute;top:87px;font-size:1.8em;} #header-login-position a {text-decoration:none;border:0 none;} #header-login-position a:hover {text-decoration:none;border:0 none;} #header-login-position a.login {background:transparent url(/images/img/login.png) no-repeat scroll 0 0;border:0 none;display:block;font-size:0;height:33px;line-height:0;margin-top:-7px;text-decoration:none;width:99px;} #header-login-position a.login:hover {background-position:100% 0;} .loggedIn_1,.logIn_0 { display:block; } .loggedIn_0,.logIn_1 { display:none; } a#japanese img { background: none; position: absolute; right: 30px; bottom: 15px; } /* ========================================================================== 5 - Banner styles ========================================================================== */ #nav-wrap #nav-left { position:relative;float:left;width:242px;height:255px; background:transparent url(../images/bg/nav/frame-left.png) no-repeat scroll 0 0 !important; background:none; /* IE6 hack, hahaha */ background:transparent url(../images/bg/nav/frame-left.gif) no-repeat scroll 0 0; } #nav-wrap #nav-right { position:relative;float:right; width:714px;height:255px; } /* START dynamic menu */ ul#nav_298723 { margin:0;padding:0; position:absolute; top:15px; left:4px; width:236px; } ul#nav_298723 li { margin:0;padding:0 0 1px 0; float:left; display:block; width:236px;line-height:24px;height:24px; } ul#nav_298723 a, ul#nav_298723 a:link, ul#nav_298723 a:visited { display:block; width:236px;line-height:24px;height:24px; border:0 none; } ul#nav_298723 a span { display:block;width:0;height:0;overflow:hidden; } #nav-home a { background:transparent url(../images/bg/nav/home.png) no-repeat scroll 0 0; } #nav-about a { background:transparent url(../images/bg/nav/about.png) no-repeat scroll 0 0; } #nav-adventures a{ background:transparent url(../images/bg/nav/adventure.png) no-repeat scroll 0 0 } #nav-gallery a { background:transparent url(../images/bg/nav/gallery.png) no-repeat scroll 0 0; } #nav-news a { background:transparent url(../images/bg/nav/news.png) no-repeat scroll 0 0; } #nav-faq a {background:transparent url(../images/bg/nav/faqs.png) no-repeat scroll 0 0; } #nav-specials a {background:transparent url(../images/bg/nav/specials.png) no-repeat scroll 0 0} #nav-bookings a {background:transparent url(../images/bg/nav/bookings.png) no-repeat scroll 0 0; } #nav-contact a {background:transparent url(../images/bg/nav/contact.png) no-repeat scroll 0 0; } ul#nav_298723 a:hover, ul#nav_298723 li.selected a:link, ul#nav_298723 li.selected a:visited { background-position: -236px 0; } ul#nav_298723 li.selected a:link, ul#nav_298723 li.selected a:visited { cursor: default; } /* END dynamic menu */ #nav-right div { margin:9px 15px 0 0; } #nav-wrap #nav-right img { /*position:absolute; top:9px;right:15px;*/ } #nav-wrap #nav-right .overlay { position:absolute;top:0;left:0;display:block;width:714px;height:255px; background:transparent url(../images/bg/nav/frame-right-overly.png) no-repeat scroll 0 0 !important; background:none; /* IE6 hack, hahaha */ background:transparent url(../images/bg/nav/frame-right-overly.gif) no-repeat scroll 0 0; } /* ========================================================================== 6 - Main content styles ========================================================================== */ #mainContent p strong { font-size:1.1em; font-weight:bold; } #sidebar a img { display:block; } .message {} .caution, .caution p {color:#B22017;} /* ========================================================================== 7 - Testimonials styles ========================================================================== */ div#testimonials { clear: both; background:#D5E05F url(../images/bg/horizontal-rule.png) no-repeat scroll 0 0; margin-left: 5px; padding-top: 5px; } div#testimonials blockquote { background:#D5E05F url(../images/bg/horizontal-rule.png) no-repeat scroll 0 100%; margin: 0; } #testimonials h2 {margin-left:15px;margin-bottom:0;} #testimonials div {margin:0;padding:0px;background:transparent url(../images/bg/quote_top.gif) top left no-repeat;padding:5px 15px 0 25px;} #testimonials cite {display:block;line-height:30px;} #testimonials em {display:block;padding-bottom:10px;line-height:30px;} ul.pagination {} ul.pagination li {float:left;line-height:30px;list-style:none;padding-right:10px;} ul.pagination .pag-current {} ul.pagination .pag-number {} ul.pagination .pag-next {} ul.pagination .pag-prev {} /* ========================================================================== 8 - Footer styles ========================================================================== */ #footer ul { margin:0;padding:0; } #footer strong { margin-left: 15px } /* START dynamic menu - CMS overrides */ #footer ul#nav_298706 { margin-left: 15px } ul#nav_298706 li{ display: inline; color: #D5E05F; } ul#nav_298706 a, ul#nav_298706 a:link, ul#nav_298706 a:visited { color: #89943E; border:0 none; padding: 0 5px; } ul#nav_298706 a:hover { background-color: #b11f16; color: #d5E05F; } ul#nav_298706 li.selected a:link, ul#nav_298706 li.selected a:visited { background-color: #d5E05F; } ul#nav_298706 li.selected a:hover { color: #89943E; cursor: default;} /* END dynamic menu */ #footer strong, #footer a:link, #footer a:visited { color: #89943E; font-weight: normal; border:0 none; } #footer li { color: #89943E; } img#phone { background: none; position: absolute; right: 10px; top: 0;} /* ========================================================================== 9 - Page specific styles ========================================================================== */ ul.sitemap li { background: transparent url(../images/bg/required.gif) top left no-repeat; padding-left: 20px; } ul.sitemap ul { margin: 0; } ul.sitemap ul li { background: none; padding: 0; margin-left: 10px; } /* homepage */ #home-announcement-container { margin:14px 0; } #home-announcement-container .announcement-list h2 { text-transform:none; } #home-announcement-container .announcement-list h2 .announcement-details { margin:14px 0 0; } #home-announcement-container .announcement-list h2 .announcement-details td { font-size: 12px; } #home-announcement-container .announcement-list .date {display:none;} #home-announcement-container .announcement-list p {display:none;} #home-announcement-container .goBack {display:none;} .announcement-list {margin:14px 0;} .announcement-list .announcement-details p {display:block;} .announcement-list .announcement-details h1 {display:none;} #home-scholastic-rafting {background:#D5E05F url(../images/bg/border.gif) no-repeat scroll left top;margin:25px 0 0;} #home-scholastic-rafting h2 {margin:0;padding:10px 5px 5px 15px;} #home-scholastic-rafting dl {background:#D5E05F url(../images/bg/border.gif) no-repeat scroll left bottom;margin-bottom:10px;padding:0 10px 10px 37px;} /* contact details */ #contactDetails dt {font-size:1.1em;margin-bottom:3px;} #contactDetails dd {margin-bottom:8px;} #contactDetails {background:#D5E05F url(../images/bg/border.gif) top left no-repeat;} #contactDetails h2 {border:0 none;padding:10px 5px 5px 15px; margin:0;} #contactDetails dl {background:#D5E05F url(../images/bg/border.gif) bottom left no-repeat;padding:0 10px 10px 37px;margin-bottom: 10px;} #contactDetails a img {display:inline;} /* adventures */ div#grades { background: #D5E05F url(../images/bg/border.gif) top left no-repeat; padding-top: 15px; margin:14px 0; } div#grades dl { background: #D5E05F url(../images/bg/border.gif) bottom left no-repeat; padding: 0 10px 10px 10px; margin-bottom: 0; } div#grades dl dt { float: left; width: 120px; color: #b11f16; clear: both; font-size: 1.1em; } div#grades dl.jp dt { width: 165px; } div#grades dl.jp dd { margin-left: 165px; } div#grades dl.jp img { margin: 0; display: inline; border: none; } div#grades dt img { background: none; display: inline; vertical-align: top;} div#grades dd { padding: 2px 0 2px 0; margin-left: 120px; border-bottom: 1px solid #C1D72F; } /*faq*/ div.questions { padding: 5px 0 0; margin:0 0 14px 0; background: #D5E05F url(../images/bg/border.gif) top left no-repeat; } div.questions h2 { padding: 5px 0; margin:0 0 0 14px;} div.questions .faq-item { margin:0 0 2px 14px; } div.questions .faq-answer { display:none; } .border-bottom { background: #D5E05F url(../images/bg/border.gif) bottom left no-repeat; padding: 10px 0; } #faq-container .faq-item { margin:10px 0 0; } #faq-container .faq-question { font-size:1.2em; font-weight: bold; } #faq-container .faq-question a { display:inline;color:#B11F16; } #faq-container .faq-details { font-size:1.0em; font-weight: normal; padding:10px 10px 14px 24px; background-color:#D5E05F; } #faq-container .faq-details h1 { display:none; } #faq-container .faq-details a { color:#003274; } /*about*/ ul#logos { margin-left: auto; margin-right: auto; width: 170px; padding:0; } ul#logos a { background: none; border: none; padding: 0; } ul#logos img { background: none; display: inline;} ul#logos li { display: inline; margin: 5px; margin-bottom: 15px;} /*adventures*/ ul.subNav,ul.subNav li { list-style:none;margin:0;padding:0; } ul.subNav { margin:0 0 14px; } .subNav a { display: block; width: 214px; height: 80px; border: 3px solid #D5E05F; } .subNav a#kaituna { background: transparent url(../images/bg/subNav/kaituna.jpg) top left no-repeat; } .subNav a#upperMohaka { background: transparent url(../images/bg/subNav/upper_mohaka.jpg) top left no-repeat; } .subNav a#motu { background: transparent url(../images/bg/subNav/motu.jpg) top left no-repeat; } .subNav a#lowerRangitaiki { background: transparent url(../images/bg/subNav/lower_rangitaiki.jpg) top left no-repeat; } .subNav a#lowerMohaka { background: transparent url(../images/bg/subNav/lower_mohaka.jpg) top left no-repeat; } .subNav a#rangitaiki { background: transparent url(../images/bg/subNav/rangitaiki.jpg) top left no-repeat; } .subNav a#wairoa { background: transparent url(../images/bg/subNav/wairoa.jpg) top left no-repeat; } .subNav a#mokau { background: transparent url(../images/bg/subNav/mokau.jpg) top left no-repeat; } .subNav a:hover { border: 3px solid #B11F16; } a#btn-booknow-small { border:0 none; width:99px; height:33px; display:block; background:transparent url(../images/img/book-now-small.png) no-repeat scroll 0 0; } a#btn-booknow-med { border:0 none; width:182px; height:59px; display:block; float:right; background:transparent url(../images/img/book-now-med.png) no-repeat scroll 0 0; } a:hover#btn-booknow-small { background-position:right top; } a:hover#btn-booknow-med { background-position:right top; } #popupSection #btn-booknow-small { float:right;margin:-20px 10px 0 0; } #btn-booknow-med.right { float:right; margin: 0 15px 0 0; } /*gallery*/ .gallery-container table.photogalleryTable td.photogalleryItem { height:154px;padding:0;text-align:center;vertical-align:middle;width:25%; } .gallery-container table.photogalleryTable td.photogalleryItem { background:transparent url(../images/bg/gallery-borders.png) no-repeat scroll 0 0 !important; background:none; background:transparent url(../images/bg/gallery-borders.gif) no-repeat scroll 0 0; } .gallery-container a { border:0 none; } .gallery-container a img { display:inline; } .gallery-container a:link img, .gallery-container a:visited img { border: 3px solid #D5E05F; } .gallery-container a:hover img { border: 3px solid #B11F16; } div.learnMore { background: #D5E05F url(../images/bg/border.gif) bottom left no-repeat; margin-bottom: 5px; padding: 0 10px 10px 5px; } div.learnMore p { padding-left: 5px; } div.learnMore h2 { clear: both; background: #D5E05F url(../images/bg/border.gif) top left no-repeat; padding-top: 10px; } div.gallerySubNav ul { padding: 0 5px 10px 18px; margin: 0; /*margin-bottom:10px;*/ background: #D5E05F url(../images/bg/border.gif) bottom left no-repeat; } div.gallerySubNav h2 { padding: 5px 5px 5px 15px; margin: 0; } div.gallerySubNav { margin-bottom:15px; background: #D5E05F url(../images/bg/border.gif) top left no-repeat; padding-top: 5px; } div.gallerySubNav li { background: transparent url(../images/bg/required.gif) top left no-repeat; padding-left: 20px; margin-bottom: 7px; list-style: none; } div.gallerySubNav li.selected a { color:#B11F16; cursor: default; border-bottom: 1px solid #B11F16; } /*testimonials*/ .testimonials-container {} .testimonials-container .item { margin:25px 0 0; background:#D5E05F url(../images/bg/horizontal-rule.png) no-repeat scroll 0 0; } .testimonials-container .item blockquote { margin:0;padding:15px 0; background:transparent url(../images/bg/horizontal-rule.png) no-repeat scroll 0 100%; } .testimonials-container .item blockquote p { margin:0; padding:0 15px 0 25px; background:transparent url(../images/bg/quote_top.gif) no-repeat scroll left top; } .testimonials-container .item blockquote p cite { display:block; } .testimonials-container .pagination { display:inline; } .testimonials-container a { display:inline; } /* scholastic */ ul.scholastic {} ul.scholastic li {float:left;font-size:1.2em;font-weight:bold;width:50%;} ul.scholasticImages {margin:1em 0;padding:0;} ul.scholasticImages li {float:left;list-style:none;padding:5px;} /* Members Area */ .members #contactDetails {} .members #contactDetails ul {padding-bottom:1em;} .members h2 {border-bottom:1px dashed #999999;display:inline-block;margin-bottom:5px;margin-top:1em;} .order-list td.name {width:60%;} .order-list td.date {width:20%;} .order-list td.price {width:20%;} .order-list td {padding:2px 10px;} /* ========================================================================== 10 - Modal / thickbox Popups Styles ========================================================================== */ div#modalWindow { padding:10px; } div#modalWindow h1 { margin:1px auto; } div#popupSection { background: #D5E05F url(../images/bg/border.gif) bottom left no-repeat; padding: 0 5px 15px 5px; margin:14px 10px;} div#popupSection h2 { background: #D5E05F url(../images/bg/border.gif) top left no-repeat; padding-top: 15px;} div#modalWindow object, div#modalWindow embed, div#modalWindow #flashVideo { margin-left: auto; margin-right: auto; width: 506px; margin-top: 10px;} .shadowbox #header, .shadowbox #bannerWrap, .shadowbox #sidebar, .shadowbox #testimonials, .shadowbox #footer { display: none; width: 0; } .shadowbox #container { width: 580px; margin:0; } .shadowbox #mainContent { width: 580px; float: none; margin: 0; } #lightbox {} #lightbox a { border:0 none; } #lightbox a img { display:inline; } /* ========================================================================== 11 - CMS Overrides ========================================================================== */ .system-message, .system-error-message {background:transparent none repeat 0 0;border:0 none;padding:0;} .item input.textbox {width:260px;} .item label {/*text-align:left;*/} /* ========================================================================== 12 - CoreCMS Editor Styles ========================================================================== */ .scholisticBanner {background-color:#003274;color:#fff;font-size:1.4em;margin:0.8em;padding:0.8em;} .scholisticBanner em {color:#C1D72F;font-style:normal;}