/* ========================================================================== STYLE.CSS | CSS FRAMEWORK -------------------------- Main Project specific styles - WAIWERA INFINITY WATER (TEMP SITE) - author: Richard Morris [richard@fueldesign.co.nz] version: - 14 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"); @import url("thickbox.css"); @import url("products.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: Georgia, serif; color: #666; line-height: 1.5em; } body { font-size: 62.5%; } div#container, div#modalWindow { font-size: 1.1em; padding: 20px; } p, ul, ol, dl, form { margin-bottom: 1em; } p { line-height: 28px; font-size: 1.2em; text-align: justify; padding: 0 30px 0 0px;} h1 { font-size: 1.3em; margin-bottom: 0em; font-family: Georgia, serif; color: #fff; } h2 { font-size: 1.6em; margin-bottom: 0.5em; font-family: Georgia, serif; color: #319990; } #modalWindow h2 {font-size: 1.0em; margin-bottom: 0.2em; font-family: Georgia, serif; color: #fff;} h3 { font-size: 1.3em; margin-bottom: 0.3em; font-family: Georgia, serif; color: #666; } h4 { font-size: 1.3em; margin-bottom: 1em; } h5 { font-size: 1.2em; margin-bottom: 1em; } abbr, acronym {color:#319990; } /* ========================================================================== 2 - Global Styles for types ========================================================================== */ /* links */ a:link, a:visited { } a:hover, a:active, a:focus, :focus { outline: 0px none; } a.email { background: transparent url(../images/bg/email.gif) top right no-repeat; padding-right: 14px; } a.top { background: transparent url(../images/bg/top.gif) top right no-repeat; padding-right: 14px; color: #ccc; } a:link.external, a:visited.external { background: transparent url(../images/bg/external.gif) top right no-repeat; padding-right: 14px;} /* list types */ ul.bulleted li { padding-left: 20px; background: transparent url(../images/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; } dl { margin-left: 0px; } dl dt { float: left; margin-right: 5px; width: 150px; } dl dd { margin-left: 170px; margin-bottom: 10px; } ul#awards li { display: inline; margin-right: 10px; } ul#awards img { display: inline; } ul#awards a { border: none; } /* blockquotes */ blockquote { border-top: 1px solid #CCC; border-bottom: 1px solid #CCC; margin-bottom: 1em; } blockquote p { font-family: georgia, "times new roman", serif; color: #BAFFFE; font-size: 1.3em; margin: 10px 5px 10px 10px; } blockquote cite { font-style: normal; color: #CCC; font-weight: bold; } /* strong */ strong.error { color: #F00; } /* em */ /*em { font-weight: bold; font-style: normal; color: #BAFFFE; } em.required { color: #3CC;}*/ /*hr*/ div.hr { text-align: right; } .leadIn { font-size: 1.2em; color: #333; font-style: italic; } p.tagline { font-family: Georgia, serif; font-size: 13px; text-transform: uppercase; font-weight: bold;} /* ========================================================================== 3 - Main Structural Divs ========================================================================== */ html, body { height: 100%; } body { text-align: center; background: #b6d5ac; } div#container { margin-left: auto; margin-right: auto; text-align: left; width: 904px; position: relative; height: 750px; background: url(../images/bg/bg-centre.jpg) center top no-repeat; } div#header { width: 100%; position: relative; margin:0 auto; } div#wrapper { width: 862px; overflow: hidden; padding: 5px 10px 0 25px; } div#wrapper2 { width: 862px; overflow: auto; padding: 5px 10px 0 40px; } div#sidebar { margin-left: 20px; width: 340px; float: right; min-height: 450px;} div#footer { width: 904px; margin: 0 auto; } /* ========================================================================== 4 - Header styles ========================================================================== */ #flashLogo { width:904px; margin: 0px auto; } #flashLogoPosition { width:270px; height:84px; margin: 0px auto; } #flashLogo img { width:270px; height:84px; } #flashLogo a { border: none; } /*#nav { height: 22px; width: 904px; position: relative;} #nav ul { margin:0 auto; width:765px; overflow:hidden; text-align: center; } #nav li { display:block; line-height: 22px; height: 22px; margin:0 5px 0 0; float:left;} #nav a { font-size:12px; font-family:Georgia, "Times New Roman", Times, serif; text-transform: uppercase; border: none; display: block; height: 24px; line-height: 24px; float: left; outline:0px none; color:#999; } #nav ul li a {margin: 0 12px 0 0;} #nav a:hover, #nav li.current a { color:#333;} #nav ul li.endNav a {margin: 0;} */ #nav { height: 22px; line-height: 22px; width: 904px; position: relative; } #navContainer ul { margin:0px; padding:0px; text-align: center; list-style-type: none; } #navContainer ul li { display:inline; } #navContainer ul li a { padding: .2em .5em; font-size:12px; font-family:Georgia, "Times New Roman", Times, serif; text-transform: uppercase; border: none; height: 24px; line-height: 24px; outline:0px none; color:#999; } #navContainer a:hover, #navContainer li.current a { color:#333;} #subNav { height: 22px; line-height: 22px; width: 834px; position: relative; } #subNav ul { margin:0px; padding:0px; text-align: center; list-style-type: none; } #subNav ul li { display:inline; } #subNav ul li a { padding: .2em .5em; font-size:12px; font-family:Georgia, "Times New Roman", Times, serif; text-transform: uppercase; border: none; height: 24px; line-height: 24px; outline:0px none; color:#999; } #subNav a:hover, #subNav li.current a { color:#333;} /*#subNav { height: 22px; width: 100%;} #subNav ul { margin:0 auto; width:780px; overflow:hidden; } #subNav li { display: inline; line-height: 22px; height: 22px; margin:0 auto; } #subNav a { font-size:11px; font-family:Georgia, "Times New Roman", Times, serif; text-transform: uppercase; border: none; display: block; height: 22px; line-height: 22px; float: left; outline: none; color:#999999; letter-spacing: 0.5px; margin-right:15px; } #subNav a:hover, #subNav li.current a {color:#000;}*/ /*p:first-letter { font-size:3em; font-style:italic; font-weight:normal; letter-spacing:-5px; } p:first-line { font-weight:bolder;color:#111; }*/ /* ========================================================================== 5 - Header ========================================================================== */ #header h1 { } h1#h1Water { background: transparent url(../images/bg/h1/water.gif) center left no-repeat; width: 72px; height: 25px; } h1#h1Testimonials { background: transparent url(../images/bg/h1/testimonials.gif) center left no-repeat; width: 160px; height: 25px; } h1#h1Products { background: transparent url(../images/bg/h1/products.gif) center left no-repeat; width: 113px; height: 25px; } h1#h1Awards { background: transparent url(../images/bg/h1/awards.gif) center left no-repeat; width: 187px; height: 25px; } h1#h1Media { background: transparent url(../images/bg/h1/media.gif) center left no-repeat; width: 169px; height: 25px; } h1#h1History { background: transparent url(../images/bg/h1/history.gif) center left no-repeat; width: 195px; height: 25px; } h1#h1Gallery { background: transparent url(../images/bg/h1/gallery.gif) center left no-repeat; width: 110px; height: 25px; } h1#h1Competitions { background: transparent url(../images/bg/h1/competitions.gif) center left no-repeat; width: 162px; height: 25px; } h1#h1Contact { background: transparent url(../images/bg/h1/contact.gif) center left no-repeat; width: 199px; height: 25px; } h1#h1Store { background: transparent url(../images/bg/h1/store.gif) center left no-repeat; width: 168px; height: 25px; } h2#h2Testimonial1 { background: transparent url(../images/bg/h2/testimonial1.gif) center left no-repeat; width: 189px; height: 15px; } h2#h2Testimonial2 { background: transparent url(../images/bg/h2/testimonial2.gif) center left no-repeat; width: 234px; height: 15px; } h2#h2Testimonial3 { background: transparent url(../images/bg/h2/testimonial3.gif) center left no-repeat; width: 192px; height: 15px; } h2#h2Testimonial4 { background: transparent url(../images/bg/h2/testimonial4.gif) center left no-repeat; width: 145px; height: 15px; } h2#h2Testimonial5 { background: transparent url(../images/bg/h2/testimonial5.gif) center left no-repeat; width: 206px; height: 15px; } h2#h2Testimonial6 { background: transparent url(../images/bg/h2/testimonial6.gif) center left no-repeat; width: 126px; height: 15px; } h1#h1Awards { background: transparent url(../images/bg/h1/awards.gif) center left no-repeat; width: 87px; height: 14px; } .productImageSet a:link, productImageSet a:hover, productImageSet a:active, productImageSet a:visited, .productImageSet dt:hover, .productImageSet dd:hover, .productImageSet img:hover { cursor: pointer; } .endNav {margin-right:0px;} /* fixing center alignment issues */ #centreNavs {margin:0 auto; width:380px;} #centreNavsProducts {margin:0 auto; width:335px;} #centreNavsWater {margin:0 auto; width:386px;} #centreNavsHistory {margin:0 auto; width:357px;} #testimonialsListing { margin-left: 9px; } #testimonialsListing li { float: left; width: 193px; height: 180px; margin-right: 9px; margin-bottom:0; text-align:center; } #testimonialsListing li span { text-align:center; } #testimonialsListing li span em { color:#319990; font-weight:bold; } #testimonialsListing a { display: block; } #testimonialsListing a img { border: 2px solid transparent; } #testimonialsListing a:hover img { border: 2px solid #32A39F; } #testimonialsListing strong { margin-right: 5px; } #testimonialsListing span { display: block; margin: 5px; text-align:center; } #galleryListing li { float: left; } /* ========================================================================== 6 - Wrapper ========================================================================== */ /* primary Content */ .home { position:relative; } .homepage {margin-left:26px; padding:0px;} p.homepage:first-letter { font-size: 3em; color: #333; font-style: italic; letter-spacing:-9px; } p.homepage:first-line { font-size: 1.2em; color: #333; font-style: italic; } .home p {text-align: justify; } .firstHome { font-size: 3em; color: #333; font-style: italic; position:absolute; left:-5px; top:-7px; } .first { font-size: 3em; color: #333; font-style: italic; position:absolute; left:-30px; top:-7px; } .firstLeftPic { font-size: 3em; color: #333; font-style: italic; position:absolute; left:228px; top:-7px; } a.link { display: block; padding-left:36px; background:url(../images/img/bottle-link.png) no-repeat scroll 0 0;} /* sidebar */ #sidebar { padding-top: 0px;} #primaryContent { position:relative; margin-top: 20px; outline:none; } #primaryContent ul li { line-height:22px; } #primaryContent h2 {display: inline; line-height: 21px; font-size: 21px; margin: 0; padding: 0;} #primaryContent p { text-indent:24px; } /*img.border {background: url(../images/bg/source-img-bg.gif) top left no-repeat; padding: 11px 30px 12px 12px; float: left; }*/ img.border { border:solid 5px white; float:left; margin-right:20px; margin-bottom:100px; } #TB_window img.border { border:solid 5px white; float:left; margin-right:20px; margin-bottom:100px; } #TB_window p { text-indent:0px; } .footnote {color: #32A39F } /* ========================================================================== 6 - Footer styles ========================================================================== */ .scrollBottom {position: absolute; bottom: 0; } em#tagline { display: block; width: 366px; height: 20px; background: transparent url(../images/tagline.png) center left no-repeat; /*margin-top: 11px; margin-left: 295px;*/margin:11px auto 0px; } /* ========================================================================== 7 - Page specific styles ========================================================================== */ #flashHome { position: relative; margin-left: 181px; margin-bottom: 15px; } ul#sitemap { } #modalWindow p { line-height: 2em; padding: 10px; } #modalWindow h1 { margin-bottom: 10px; } #modal2Window p { line-height: 2em; } #modal2Window h1 { margin-bottom: 10px; } #modal2Window ul { margin:0px; } #modal2Window li { display: inline; line-height: 22px; font-size:12px; } #flashProducts { margin-top: 10px; } a.download {font-family:Georgia, "Times New Roman", Times, serif; font-size:10px; text-transform:uppercase; display:block; width:250px; margin:0 auto; text-align:center;} a.download:hover {text-decoration:none; color:#32A39F;} /* competitions */ a:link.popup, a:active.popup, a:visited.popup { float:left;display:block;padding: 0 15px 0 60px;background:transparent url(../images/img/bottle-link.png) no-repeat scroll 0 0; } a:hover.popup { float:left;display:block;padding: 0 15px 0 60px;background:transparent url(../images/img/bottle-link.png) no-repeat scroll 0 0; color:#333; } .competitions blockquote { color:#333;font-style:italic; border:0px none; font-family: georgia, "times new roman", serif; font-size: 1.5em; margin-bottom: 1em; margin: 10px 5px 10px 10px; } .competitions #primaryContent p { text-indent:0px; } .competitions .leadIn { padding-left:40px; } .competitions .leadIn .first { left:0; } .competitions form label { width:150px; } #contactForm p {text-indent:0; font-style:italic; margin-left:110px;} /* ---------->>> jtip <<<---------------------------------------------------------------*/ a.jTip:link, a.jTip:active, a.jTip:hover, a.jTip:visited { display:inline; padding:0; margin:0; } #JT_arrow_left{ background-image: url(../images/img/arrow_left.gif); background-repeat: no-repeat; background-position: left top; position: absolute; z-index:101; left:-12px; height:23px; width:10px; top:-3px; } #JT_arrow_right{ background-image: url(../images/img/arrow_right.gif); background-repeat: no-repeat; background-position: left top; position: absolute; z-index:101; height:23px; width:11px; top:-2px; } #JT { position: absolute; z-index:800; border: 2px solid #319990; background-color: #000; } #JT_copy{ padding:10px 10px 10px 10px; color:#333333; } .JT_loader{ background-image: url(../images/img/loader.gif); background-repeat: no-repeat; background-position: center center; width:100%; height:12px; } #JT_close_left{ background-color: #319990; text-align: left; padding-left: 8px; padding-bottom: 5px; padding-top: 4px; font-weight:bold; color:#fff; font-family: Georgia, serif; } #JT_close_right{ background-color: #319990; text-align: left; padding-left: 8px; padding-bottom: 5px; padding-top: 4px; font-weight:bold; color:#fff; font-family: Georgia, serif; } #JT_copy p{ margin:3px 0; } #JT_copy img{ padding: 1px; border: 1px solid #319990; } .jTip{ cursor:help; } /* STORE INTERFACE */ #store-interface { width:80%;margin:50px auto;text-align:left;font-size:12px; } #store-interface table { } #store-interface table td { font-size:12px; }