/* ************************************************************ * Razor Design CSS File ************************************************************ * * Author: Shaun M. Bent BSc(Hons) Computing (Multimedia) * Company: Razor Design Web Services * * URL: http://www.razor-design.co.uk/ * ************************************************************ * * Filename: layout.css * Version: 1.1.0 * Created: 26.04.2008 * Updated: 26.24.2008 * ************************************************************ */ /* Reset -------------------------------------------------------------- */ html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, font, img, ol, ul, dl fieldset, form, label { margin: 0; padding: 0 0 0 0; border: 0; outline: 0; vertical-align: baseline; background: transparent; } h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, fieldset, form{ padding:0 0 0 0; } /* Base Layout -------------------------------------------------------------- */ body { font: 12px/18px Arial, Helvetica, sans-serif; color: #4A4A4A; background-color: #FFFFFF; } /* - Wrapper - */ #wrapper { width: 950px; margin: 0px auto; background: url(../images/banners/hdrHomeBot.jpg) no-repeat 0px 300px #F0F5FB; } body#homePg #wrapper { background: url(../images/banners/hdrHomeBot.jpg) no-repeat 0px 300px #F0F5FB; } body#parkPg #wrapper { background: url(../images/banners/hdrParksBot.jpg) no-repeat 0px 300px #F0F5FB; } body#selfPg #wrapper { background: url(../images/banners/hdrSelfBot.jpg) no-repeat 0px 300px #F0F5FB; } body#tariffsPg #wrapper { background: url(../images/banners/hdrTariffBot.jpg) no-repeat 0px 300px #F0F5FB; } body#enquiryPg #wrapper { background: url(../images/banners/hdrEnquireBot.jpg) no-repeat 0px 300px #F0F5FB; } body#ownershipPg #wrapper { background: url(../images/banners/hdrOwnershipBot.jpg) no-repeat 0px 300px #F0F5FB; } body#csalesPg #wrapper { background: url(../images/banners/hdrCSalesBot.jpg) no-repeat 0px 300px #F0F5FB; } body#lsalesPg #wrapper { background: url(../images/banners/hdrLSalesBot.jpg) no-repeat 0px 300px #F0F5FB; } body#outPg #wrapper { background: url(../images/banners/hdrOutBot.jpg) no-repeat 0px 300px #F0F5FB; } body#findusPg #wrapper { background: url(../images/banners/hdrFindBot.jpg) no-repeat 0px 300px #F0F5FB; } body#contactPg #wrapper { background: url(../images/banners/hdrContactBot.jpg) no-repeat 0px 300px #F0F5FB; } /* - Header - */ #header { width: 100%; height: 300px; } /* - Body - */ #body { width: 100%; padding: 0 0 62px 0; background: url(../images/banners/ftrHomeTop.jpg) no-repeat bottom; } body#homePg #body { background: url(../images/banners/ftrHomeTop.jpg) no-repeat bottom; } body#parkPg #body { background: url(../images/banners/ftrParksTop.jpg) no-repeat bottom; } body#selfPg #body { background: url(../images/banners/ftrSelfTop.jpg) no-repeat bottom; } body#tariffsPg #body { background: url(../images/banners/ftrTariffTop.jpg) no-repeat bottom; } body#enquiryPg #body { background: url(../images/banners/ftrEnquireTop.jpg) no-repeat bottom; } body#ownershipPg #body { background: url(../images/banners/ftrOwnershipTop.jpg) no-repeat bottom; } body#csalesPg #body { background: url(../images/banners/ftrCSalesTop.jpg) no-repeat bottom; } body#lsalesPg #body { background: url(../images/banners/ftrLSalesTop.jpg) no-repeat bottom; } body#outPg #body { background: url(../images/banners/ftrOutTop.jpg) no-repeat bottom; } body#findusPg #body { background: url(../images/banners/ftrFindTop.jpg) no-repeat bottom; } body#contactPg #body { background: url(../images/banners/ftrContactTop.jpg) no-repeat bottom; } /* Content */ #content { width: 700px; padding: 90px 0px 0px 0px; float: left; } /* Side */ #side { width: 250px; padding-top: 120px; float: right; } /* - Footer - */ #footer { font-size: x-small; } #footerLeft { width: 50%; float: left; text-align: left; } #footerRight { width: 50%; float: right; text-align: right; } /* Content -------------------------------------------------------------- */ #content ul { padding: 0px 0px 10px 70px; font-size: 1em; } .accomSummary { } .accomContent, .feesContent { display: none; } .accom { list-style: none; width: 440px; margin: 0px auto; margin-bottom: 10px; } .accom li { margin: 0 20px 20px 0;} .accom li.hdr { width: 440px;} .accom li.plan { width: 440px; margin: 0px auto; } .tariff_tbl { text-align: center; color: #4A4A4A; padding-bottom: 2px; margin: 0 0 10px 50px; } .date { text-align: left; background-color: #8DB3E0; color: #4A4A4A; } .yellow_tbl { background-color: #f1f165; } .green_tbl { background-color: #89e45b; } .clear_tbl { background-color: #F0F5FB; } .small_tbl { text-align: left; } .tariff_tbl td.clear_tbl, .tariff_tbl td.date { width: 32%; } .tariff_tbl td { width: 14%; } .sales { margin: 0 0 0 50px; } .sold { color: #FF0000; } #map { width: 414px; margin: 0px auto; border: 0px; text-align: center; } #map a { border: 0px; } .caravan { width: 610px; height: 125px; padding-top: 10px; padding-bottom: 10px; margin-left: 30px; margin-right: 10px; border-bottom: 1px solid #cecece; } .lastCaravan { border-bottom: 0px; } .caravanImage { width: 140px; float: left; } .caravanBody { width: 470px; float: right; margin-top: 10px; } .caravanBody h3 { width: 470px; float: left; margin-bottom: 10px; font-size: 1.8em; } .caravan p { padding: 5px 0px 0px 10px; margin: 0px; } .caravan p.cDate { color: #5B6B60; padding: 0px 0px 10px 15px; font-size: 1.5em; font-weight: bold; } .caravan p.cDate span.details { font-size: 0.5em !important; font-style: italic; vertical-align: middle; } .caravan p.cDate span.sold, .caravan p.cDate span.offer { text-align: right; float: right; margin-right: 50px; font-size: 0.9em; } span.strike { text-decoration: line-through; } .caravanDetails { width: 465px; float: right; padding-left: 5px; } .cCondition { width: 155px; font-size: 1.1em; font-weight: bold; float: left; padding-left: 10px; } .cSize { width: 155px; font-size: 1.1em; font-weight: bold; float: left; } .cPrice { font-size: 1.1em; font-weight: bold; } .caravanDetails .cPrice span.hightlight_price { font-size: 1.5em; color: #0267ad; } /* Contact Form -------------------------------------------------------------- */ /* Form style */ form#enquiryForm { width: 550px; margin: 0px auto; margin-top: -10px; } form#contactForm { width: 550px; margin: 0px auto; margin-top: -10px; } label { display: inline-block; float: left; height: 26px; line-height: 26px; width: 200px; font-size: 1.2em; font-weight: bold; } input, textarea, select, checkbox { margin: 0; padding: 5px; color: #666; background: #f5f5f5; border: 1px solid #ccc; margin: 5px 0; font:1.2em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; -moz-border-radius: 5px; -webkit-border-radius:5px; } textarea { padding: 2px; } input:focus, textarea:focus, select:focus { border: 1px solid #999; background-color: #fff; color:#333; } input.submit, input.reset { cursor: pointer; border: 1px solid #0066ac; background:#5988c5; color:#fff; -moz-border-radius: 5px; -webkit-border-radius:5px; } input.submit:hover, input.reset:hover { background:#0066ac; border: 1px solid #5988c5; } fieldset { padding:20px; border:0px; } legend { padding:7px 10px; font-weight:bold; color:#000; border:1px solid #eee; -moz-border-radius: 5px; -webkit-border-radius:5px; } span.required{ font-size: 13px; color: #ff0000; } /* Select the colour of the * if the field is required. */ /* Style for the error message */ .error_message { display: block; height: 22px; width: 550px; line-height: 22px; background: #FBE3E4 url('../images/_layout/error.gif') no-repeat 10px center; padding: 3px 10px 3px 35px; margin: 0px auto; color:#8a1f11;border: 1px solid #FBC2C4; -moz-border-radius: 5px; -webkit-border-radius:5px; } #succsess_page h3 { background: url('../images/_layout/success.gif') left no-repeat; padding-left:22px; margin: 30px; } /* Navigation -------------------------------------------------------------- */ #menu { width: 200px; height: 285px; padding: 0px 0px 0px 0px; margin: 0px; margin-left: 25px; margin-top: 10px; background: url(../images/_layout/nav.gif) no-repeat left top; position: relative; } #menu li { padding: 0px 0px 0px 0px; margin: 0px; list-style: none; display: block; position: absolute; left: 0; } #menu li a { display: block; height: 25px; } /* -- Menu Item Sizes -- */ #home { width: 200px; top: 0px; } #park { width: 200px; top: 26px; } #self { width: 200px; top: 52px; } #tariffs { width: 200px; top: 78px; } #enquiry { width: 200px; top: 104px; } #ownership { width: 200px; top: 130px; } #csales { width: 200px; top: 156px; } #lsales { width: 200px; top: 182px; } #out { width: 200px; top: 208px; } #findus { width: 200px; top: 234px; } #contact { width: 200px; top: 260px; } /* -- Menu Hover States -- */ #home a:hover { background: url(../images/_layout/nav.gif) no-repeat 0px -285px; } body#homePg #home { background: url(../images/_layout/nav.gif) no-repeat 0px -285px; } #park a:hover { background: url(../images/_layout/nav.gif) no-repeat 0px -311px; } body#parkPg #park { background: url(../images/_layout/nav.gif) no-repeat 0px -311px; } #self a:hover { background: url(../images/_layout/nav.gif) no-repeat 0px -337px; } body#selfPg #self { background: url(../images/_layout/nav.gif) no-repeat 0px -337px; } #tariffs a:hover { background: url(../images/_layout/nav.gif) no-repeat 0px -363px; } body#tariffsPg #tariffs { background: url(../images/_layout/nav.gif) no-repeat 0px -363px; } #enquiry a:hover { background: url(../images/_layout/nav.gif) no-repeat 0px -389px; } body#enquiryPg #enquiry { background: url(../images/_layout/nav.gif) no-repeat 0px -389px; } #ownership a:hover { background: url(../images/_layout/nav.gif) no-repeat 0px -415px; } body#ownershipPg #ownership { background: url(../images/_layout/nav.gif) no-repeat 0px -415px; } #csales a:hover { background: url(../images/_layout/nav.gif) no-repeat 0px -441px; } body#csalesPg #csales { background: url(../images/_layout/nav.gif) no-repeat 0px -441px; } #lsales a:hover { background: url(../images/_layout/nav.gif) no-repeat 0px -467px; } body#lsalesPg #lsales { background: url(../images/_layout/nav.gif) no-repeat 0px -467px; } #out a:hover { background: url(../images/_layout/nav.gif) no-repeat 0px -493px; } body#outPg #out { background: url(../images/_layout/nav.gif) no-repeat 0px -493px; } #findus a:hover { background: url(../images/_layout/nav.gif) no-repeat 0px -519px; } body#findusPg #findus { background: url(../images/_layout/nav.gif) no-repeat 0px -519px; } #contact a:hover { background: url(../images/_layout/nav.gif) no-repeat 0px -545px; } body#contactPg #contact { background: url(../images/_layout/nav.gif) no-repeat 0px -545px; } #dmlink_wrapper{ width: 200px; height: 75px; padding: 10px 0px 0px 0px; margin-left: 25px; margin-top: 25px; } #dmlink_wrapper li { list-style: none; } #dmlink_wrapper li#dmlink a { height: 75px; display: block; background: url(../images/_layout/dmlink.gif) no-repeat left top;} #dmlink_wrapper li#dmlink a:hover { background-position: bottom; } /* Headers (H1) -------------------------------------------------------------- */ h1 { color: #5a88c5; font-size: 5em; padding: 30px 0 40px 15px; font-weight: normal; } /* Headers (H2) -------------------------------------------------------------- */ h2.subHdr { width: 355px; height: 41px; background: url(../images/_layout/h2.png) no-repeat; margin-bottom: 20px; } h2#tariffHdr { background-position: 0px 0px; } h2#enquriyHdr { background-position: 0px -41px; } h2#cSalesHdr { background-position: 0px -82px; } h2#lSalesHdr { background-position: 0px -123px; } /* Headers (H3) -------------------------------------------------------------- */ h3 { color: #0267ad; margin: 10px 0px 20px 15px; font-size: 1.5em;} #enquiryForm h3 { margin-left: 0px; } h3.sectionHdr { width: 329px; height: 23px; background: url(../images/_layout/h3.gif) no-repeat; margin-bottom: 20px; margin-left: 0px; } h3#onThePark { background-position: 0px 0px; } h3#whyLuceBay { background-position: 0px -23px;} h3#new { background-position: 0px -69px; } h3#preOwned { background-position: 0px -92px; } h3#terms { background-position: 0px -138px; } /* Headers (H4) -------------------------------------------------------------- */ h4.accomHdr { width: 303px; height: 39px; margin-bottom: 15px; background: url(../images/_layout/h4.png) no-repeat; } h4#solHdr { background-position: 0px 0px; } h4#drumHdr { background-position: 0px -39px; } h4#luceHdr { background-position: 0px -78px; } h4#mullHdr { background-position: 0px -117px; } /* Headers (H5) -------------------------------------------------------------- */ h5.planHdr { width: 250px; height: 20px; margin: 0px auto; margin-bottom: 20px; background: url(../images/_layout/h5.png) no-repeat; } h5#solPlan { background-position: 0px 0px; } h5#drumPlan { background-position: 0px -20px; } h5#lucePlan { background-position: 0px -40px; } h5#mullPlan { background-position: 0px -60px; } /* News System -------------------------------------------------------------- */ /* Misc -------------------------------------------------------------- */ blockquote .quote { color: #ffffff; font-style: italic; background: url(../images/_layout/quote_start.gif) no-repeat; text-indent: 15px; } blockquote .author { color: #ffffff; padding: 0; margin: 0; } p { margin: 0 0 1.5em; padding: 0px 30px 10px 30px; line-height: 150%; font-size: 1em; } a:link, a:visited { color: #127EBC; text-decoration: none; } a:hover { color: #127EBC; text-decoration: underline; } img { border: 0; } abbr { cursor: pointer; border-bottom: 1px dashed #456065; font-style: italic; } .highlight { font-weight: bold; color: #98cc00; } .imgReplace, .btnReplace { background-position: top; background-repeat: no-repeat; display: block; } .imgReplace span, .btnReplace span { display: none; visibility: hidden; } .fLeft { float: left; } .fRight { float: right; } .aLeft { text-align: left; } .aRight { text-align: right; } .aJustify { text-align: justify; } .aCenter { text-align: center; } .hide { display: none; } blockquote { padding: 0px 0px 30px 60px; font-size: 1.2em; } .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } .small { font-size: 0.8em; } ul.inline { list-style: none; } ul.inline li { display: inline; } .buttonLink { padding: 6px 10px; text-transform: uppercase; font-size: 10px; color: #bff02e;} .buttonLink:hover { padding: 6px 10px; background: #bff02e; color: #ffffff; }