/* cvs id: $Id: style.css,v 1.4 2009/11/10 07:18:17 sean Exp $ */ /* (c) 2008 Bam Creative Title : style.css Author : Graeme Haynes - Bam Creative Description : Stylesheet */ /* GLOBAL SETTINGS------------------------------------- GLOBAL SETTINGS */ html { } body#homebody { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.75em; /* MASTER font-size controller */ color:#565555; /* MASTER text colour controller */ margin:0px; padding:0px; padding-bottom:80px; background: url(images/homebg.jpg) repeat-x; } body, body#body-leeuwin-apartments, body#body-cape-view-apartments, body#body-mandurah-quay, body#body-{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.75em; /* MASTER font-size controller */ color:#565555; /* MASTER text colour controller */ margin:0px; padding:0px; padding-bottom:80px; background: url(images/homebg.jpg) repeat-x; background-position:0 -90px; } body#body-{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.75em; /* MASTER font-size controller */ color:#565555; /* MASTER text colour controller */ margin:0px; padding:0px; padding-bottom:80px; background: url(images/homebg.jpg) repeat-x; background-position:0 0px; } body#body- #flogo{ padding-top:24px; display:block; position:relative; } body#body- #glowsub { margin-top:0px; background: url(images/glow.jpg) no-repeat center top; } #wrap { /*position:relative;*/ height: 100%; min-height: 100%; height: auto !important; height: 100%; margin:0px auto; padding:0px; } #glow { background: url(images/glow.jpg) no-repeat center top; } #glowsub { margin-top:-90px; background: url(images/glow.jpg) no-repeat center top; } /*-- this controls the tinymce area --*/ .mceContentBody { background-image: none; background-color: #fff; } /* LINKS -------------------------------------------------------- LINKS */ a { color:#173f6c; text-decoration:underline; } a:hover { text-decoration:none; } /* HEADINGS -------------------------------------------------- HEADINGS */ h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 0; padding: 0; padding-bottom: 0.4em; padding-top:1.2em; color:#161e69; } h1 { font-size: 1.9em; padding-bottom: 0.5em; padding-top:0.3em; } h2 { font-size: 1.7em; line-height: 1.3em; } h3 { font-size: 1.6em; line-height: 1.2em; } h4 { font-size: 1.5em; line-height: 1.2em; padding-bottom: 0.3em; } h5 { font-size: 1.4em; line-height: 1.3em; padding-bottom: 0.2em; } h6 { font-size: 1.3em; line-height: 1.3em; padding-bottom: 0.2em; } /*-------------------------------------------------- Colour Coded Stylesheet Controls */ body#body-leeuwin-apartments h1, body#body-leeuwin-apartments h2, body#body-leeuwin-apartments h3, body#body-leeuwin-apartments h4, body#body-leeuwin-apartments h5, body#body-leeuwin-apartments .testimonial p, body#body-leeuwin-apartments .testimonial a, body#body-leeuwin-apartments a, body#body-leeuwin-apartments .base p { color:#08731c; } body#body-cape-view-apartments h1, body#body-cape-view-apartments h2, body#body-cape-view-apartments h3, body#body-cape-view-apartments h4, body#body-cape-view-apartments h5, body#body-cape-view-apartments .testimonial p, body#body-cape-view-apartments .testimonial a, body#body-cape-view-apartments a, body#body-cape-view-apartments .base p{ color:#2084ab; } body#body-mandurah-quay h1, body#body-mandurah-quay h2, body#body-mandurah-quay h3, body#body-mandurah-quay h4, body#body-mandurah-quay h5, body#body-mandurah-quay .testimonial p, body#body-mandurah-quay .testimonial a, body#body-mandurah-quay a, body#body-mandurah-quay .base p { color:#173f6c; } body#body-mandurah-quay h2, body#body-cape-view-apartments h2, body#body-leeuwin-apartments h2 { color:#333030; } .hero{ float:left; } .booking{ position:relative; float:right; width:296px; } .custom-leeuwin{ color:#08731c; } .custom-cape{ color:#2084ab; } .custom-mandurah{ color:#173f6c; } .contactdetails{ float:right; position:relative; width:271px; margin-top:20px; margin-right:10px; font-size:0.75em; } .contactdetails h5{ margin-bottom:8px; } .seperator{ background:url(images/hr.gif) repeat-x; width:267px; height:16px; display:block; position:relative; margin-bottom:10px; } .seperator span{ display:none; } /*-------------------------------------------------- End Colour Coded Stylesheet Controls */ /* PARAGRAPHS ---------------------------------------------- PARAGRAPHS */ p { font-size: 100%; line-height: 1.5em; padding: 0 0 1.3em 0; } /* LISTS -------------------------------------------------------- LISTS */ ul, ol { padding:0 0 1.25em 2.5em; } #content li, body#tinymce li { font-size: 100%; line-height: 1.6em; } #content ul li, body#tinymce ul li { list-style-image:url(images/bullet.gif); } /*-- nested lists --*/ #content ul ul, body#tinymce ul ul { padding: 0 0 0 1.5em; } #content ol ol, body#tinymce ol ol { padding: 0 0 0 1.5em; } /* LAYOUT ------------------------------------------------------ LAYOUT */ #container { width:996px; padding:0px; margin: 0 auto 0px auto; /*position: relative;*/ display:block; } #header { position: relative; left: 0px; height:80px; } #header-default { height:82px; } #content { width:898px; margin:0 0 0 0px; background: #fff url(images/contentbg.gif) repeat-y right; } .conbg { width:898px; margin:0 0 0 48px; background: #fff url(images/contentbg.gif) repeat-y right; } .left-content { width:560px; margin:20px; float:left; min-height:200px; height:auto !important; height:200px; } .contentbase { background:url(images/contentbase.png) no-repeat; position:absolute; top:0px; left:29px; height:17px; width:905px; z-index:1000; } #page-content { /* all bamCMS content goes inside here: shouldn't need styling really */ } .base { width:915px; margin:-20px auto 0 auto; color:#7696b7; font-size:0.9em; } .base a { color:#7696b7; font-weight:bold; text-decoration:none; } .base a:hover { text-decoration:underline; } #footer { width:960px; height:139px; position:relative; margin:0 auto 0px auto; } .footerbg { background:url(images/footerbg.png) no-repeat center; position:absolute; top:15px; left:26px; width:906px; height:149px; } .footerbgie6 { background:url(images/footerbg.png) no-repeat center; position:absolute; top:15px; left:26px; width:906px; height:149px; } .copyright { float: left; } .credits { float: right; margin-right:5px; } .logotopcon { padding:0px 0px 0px 0px; margin: 0 auto; width:970px; position:relative; display:block; height:200px; } .logotopconmain { padding:0px 0px 0px 0px; margin: 0 auto; width:970px; display:block; top:80px; } a img{ border:none; text-decoration:none; } .fortelogo { margin-left:338px; margin-top:26px; border:none; text-decoration:none; } .fortelogohome { margin-left:341px; margin-top:48px; } .arealogo { position:absolute; top:42px; left:335px; } .conimg{ float:right; border:2px solid #ccc; clear:both; margin-bottom:52px; margin-top:20px; } .img-column{ width:160px; height: 100%; min-height: 100%; height: auto !important; height: 100%; margin-top:20px; margin-bottom:40px; padding-left:10px; float:right; position:relative; } .logotopcon h1 { text-align:center; padding-bottom:0px; padding-top:24px; font-size:1.5em; } #topglass { background:transparent url(images/topglass.png) no-repeat scroll center top; margin:0 auto; padding-top:59px; } .bottomglass { background:transparent url(images/footglass.png) no-repeat scroll center bottom; margin:0 auto; padding-bottom:72px; } .glass { background: url(images/contentbg.png) repeat-y center; } #splash_welcome, #splash_mandurah, #splash_busselton, #splash_margaret { /*Controls width of Snippet content for SPLASH page */ margin:20px; width:550px; } #splash_welcome p img, #splash_mandurah p img, #splash_busselton p img, #splash_margaret p img { /*Controls width of Snippet content for SPLASH page */ margin-bottom:-10px; } #splash_mandurah h1 { /*Custom color styling elements of Snippet content for SPLASH page */ color:#173f6c; } #splash_busselton h1 { color:#2084ab; } #splash_margaret h1 { color:#08731c; } a.getleave { display:block; width:280px; height:120px; background:url(images/getleavebg.jpg) no-repeat; position:absolute; top:15px; left:14px; text-decoration:none; } a.getleave:hover { background:url(images/getleavebg.jpg) no-repeat 0 -119px; } .homebtn { display:block; width:280px; height:120px; position:absolute; top:15px; left:14px; text-decoration:none; } a.specials { display:block; width:280px; height:120px; background:url(images/specialsbg.jpg) no-repeat; position:absolute; top:15px; left:310px; text-decoration:none; } a.specials:hover { background:url(images/specialsbg.jpg) no-repeat 0 -119px; } a.specials2 { display:block; width:280px; height:120px; background:url(images/specialsbg.jpg) no-repeat; text-decoration:none; margin-left:20px; margin-top:20px; position:relative; margin-bottom:20px; } a.specials2:hover { background:url(images/specialsbg.jpg) no-repeat 0 -119px; } a.getleave2 { display:block; width:280px; height:120px; background:url(images/getleavebg.jpg) no-repeat; text-decoration:none; margin-left:20px; margin-top:20px; position:relative; } a.getleave2:hover { background:url(images/getleavebg.jpg) no-repeat 0 -119px; } a.testimonialsbtnfooter{ display:block; width:280px; height:120px; background:url(images/testimonialsbtnbgfooter.jpg) no-repeat; position:absolute; top:15px; left:310px; text-decoration:none; } a.testimonialsbtnfooter:hover { background:url(images/testimonialsbtnbgfooter.jpg) no-repeat 0 -119px; } a.getleave span, a.specials span, a.getleave2 span, a.specials2 span, a.testimonialsbtnfooter span { color:#FFFFFF; position:absolute; top:80px; left:22px; font-size:0.9em; width:150px; text-decoration:none; } a.testimonialsbtnfooter span{ top:77px; } /* JQuery Slider ------------------------------------------------------ JQuery Slider */ #slidercontainer { overflow:hidden; position:relative; height:390px; width:898px; } .content_slide { width: 650px; height:400px; display: block; position:relative; overflow:hidden; } /* image replacement */ .graphic, #prevBtn, #nextBtn { margin:0; padding:0; display:block; overflow:hidden; text-indent:-8000px; } /* // image replacement */ .content_slide ul, .content_slide li { margin:0; padding:0; list-style:none; } .content_slide li { /* define width and height of list item (slide) entire slider area will adjust according to the parameters provided here */ width:898px; height:400px; } .content_slide li a { width: 400px; height: 285px; display: block; } #nextBtn { left:696px; } #prevBtn a:hover, #nextBtn a:hover { background-position: 0 -43px; } .interactive { position:absolute; background:url(images/interactivemapbg.png) no-repeat; width:296px; height:41px; top:-41px; } .interactive h1 { padding:0px; margin:0px; position:absolute; top:11px; left:26px; color:#FFFFFF; font-size:1.65em; } .map { width:296px; height:198px; background:url(images/mapbg.gif) no-repeat; position:absolute; bottom:135px; right:50px; z-index:20; } #maptab1 { position:absolute; top:10px; left:18px; display:block; background:url(images/maptab1bg.png) 0 0; height:93px; width:135px; outline:none; border:none; text-decoration:none; cursor:pointer; } #maptab1:hover { outline:none; display:block; background:url(images/maptab1bg.png) 0 -94px; height:93px; width:135px; outline:none; border:none; text-decoration:none; cursor:pointer; } #maptab2 { position:absolute; top:67px; left:18px; display:block; background:url(images/maptab2bg.png) 0 0; height:65px; width:135px; outline:none; border:none; text-decoration:none; cursor:pointer; } #maptab2:hover { outline:none; display:block; background:url(images/maptab2bg.png) 0 -94px; outline:none; border:none; text-decoration:none; cursor:pointer; } #maptab3 { position:absolute; top:124px; left:18px; display:block; background:url(images/maptab3bg.png) 0 0; height:60px; width:135px; outline:none; border:none; text-decoration:none; cursor:pointer; } #maptab3:hover { outline:none; display:block; background:url(images/maptab3bg.png) 0 -94px; outline:none; border:none; text-decoration:none; cursor:pointer; } /*button::-moz-focus-inner { border: 0; }*/ /* ------------------------------------------------------ Testimonials*/ .testimonial { position:relative; float:right; width:296px; background:url(images/testimonialtop.gif) no-repeat top; padding-top:15px; } .testimonial-repeat { background:url(images/testimonialrpt.gif) repeat-y; display:block; } .testimonial-footer { position:relative; float:right; width:296px; background:url(images/testimonialbottom.gif) no-repeat bottom; padding-bottom:49px; margin-top:-15px; } .testimonial-upload { position:absolute; top:20px; left:20px; color:#565555; font-size:0.9em; } .testimonial-upload:hover { text-decoration:none; } .custom-testimonial-photo { float:right; padding:5px; width:76px; margin: 10px 0px 10px 10px; background-color:#FFFFFF; } #testimonial_mandurah, #testimonial_busselton, #testimonial_margaret { padding:0px 20px 0px 25px; } .testimonial p { font-size:1.2em; } .testimonial p span { margin-bottom:6px; } .slidenav{ margin-top:13px; } .slidenav .viewsitebtn{ display:block; width:131px; height:30px; background:url(images/viewwebsitebtn.gif) no-repeat top; float:right; border:none; outline:none; } .slidenav .viewsitebtn:hover{ width:131px; height:30px; background:url(images/viewwebsitebtn.gif) no-repeat 0 -30px; } .slidenav #welcomebtn, .slidenav #welcomebtn2, .slidenav #welcomebtn3{ display:block; width:104px; height:30px; background:url(images/welcomebtn.gif) no-repeat top; float:left; border:none; outline:none; cursor:pointer; } .slidenav #welcomebtn:hover, .slidenav #welcomebtn2:hover, .slidenav #welcomebtn3:hover{ background:url(images/welcomebtn.gif) no-repeat bottom; } .toplink span{ display:none; } .toplink{ display:block; width:121px; height:30px; background:url(images/backtopbutton.gif) no-repeat top; float:right; border:none; outline:none; clear:both; position:relative; } .toplink:hover{ width:121px; height:30px; background:url(images/backtopbutton.gif) no-repeat 0 -30px; } /* ------------------------------------------------------ Newsletter Sign Up*/ .rightfoot { float:right; padding-right:78px; margin-top:26px; } .newslettertitle { margin-left:6px; width:209px; height:19px; } .listmail input#name { border:none; width:190px; position:absolute; top:11px; left:12px; color:#565555; font-size:0.9em; outline:none; padding:0px; margin:0px; } input#jykuik-jykuik { border:none; outline:none; width:190px; position:absolute; top:11px; left:12px; color:#565555; font-size:0.9em; padding:0px; margin:0px; } .listmail form { padding:0px; margin:0px; } .listmail form label { display:none; position:absolute; } .listmail ol { margin:0px; padding:0px; list-style-type:none; } .listmail ol li { height:37px; margin:0px; padding:0px; position:relative; width:225px; background:url(images/nletterinputbg.png) no-repeat; line-height:1em; margin-top:4px; } .listmail { position:relative; } .listmail ol li input { background:none; border:none; width:195px; } .listmail form .submitbtn { background:url(images/signupbtn.gif) no-repeat; height:29px; width:81px; border:none; outline:none; cursor:pointer; position:absolute; top:68px; left:224px; } .listmail form .submitbtn:hover { background:url(images/signupbtn.gif) no-repeat 0 -29px; } /* TABLES ------------------------------------------------------ TABLES */ /*-- data table --*/ table.custom-data-table { border: 1px solid #ccc; border-bottom: none; border-right: none; width: 100%; } table.custom-data-table th, table.custom-data-table td { border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 4px; text-align: center; line-height: normal; } table.custom-data-table th { background-color: #eee; font-size: 12px; font-weight: bold; height: 23px; color: #666; line-height: normal; } table.custom-data-table td { color: #676767; font-size: 12px; text-align: left; } table.custom-data-table td.right { text-align: right; } /* MISC --------------------------------------------------------- MISC */ hr { background: #ccc;/*NS FF OP */ color: #ccc;/*IE*/ border: none;/*FF NS OP*/ height: 2px;/*FF NS OP*/ width: 100%; clear:both; padding:0px; margin:5px 0px 20px 0px; position:relative; } .toplinkcon{ position:relative; display:block; height:35px; } /* FORMS -------------------------------------------------------- FORMS */ /* No generic form styling shall be applied here as it causes too many problems with Bamcms admin area. Instead, use classes or ids on forms to style. For more information refer to the CSS and XHTML Best Practices Manual */ form { padding:0px; margin:0px; } form.pagecontentform fieldset { border: 0; position: relative; padding: 10px 0 10px 0px; margin: 0 0 10px 0px; width: 460px; overflow: hidden; } form.pagecontentform fieldset.submit { background: none; } form.pagecontentform fieldset ol { margin: 0; padding: 0; } form.pagecontentform fieldset li { float: left; margin: 0 0 7px 0px; display: inline; padding: 0; } form.pagecontentform fieldset legend { position: absolute; top: -20px; text-indent: -9999px; display: none; } form.pagecontentform input, form.pagecontentform textarea { color: #333; font-family: Arial, sans-serif; border: #dcdddf 1px solid; float: left; padding: 5px; width: 440px; margin: 0; position: relative; display: block; } form.pagecontentform fieldset.submit button { border: 0; background: url(images/submitbtn.gif) 0 0; width: 92px; height: 33px; display: block; float: right; cursor: pointer; text-indent: -9999px; MARGIN-RIGHT:10PX; } form.pagecontentform fieldset.submit button:hover { background: url(images/submitbtn.gif) 0 -33px; } form.pagecontentform fieldset.submit button:active { background: url(images/submitbtn.gif) 0 -66px; } form.pagecontentform input { background: #fafafb; font-size: 12px; } form.pagecontentform label { padding:0 0 2px 0; float: left; display: block; } form.pagecontentform textarea { background: #fafafb; font-size: 12px; height:200px; } form.pagecontentform fieldset .checkboxinput input { float: left; width: auto; margin: 3px 5px; } /* CUSTOM CLASSES -------------------------------------- CUSTOM CLASSES */ .clear { clear: both; } /* Any classes that start with the "custom-" prefix will automatically be made available in the TinyMCE Styles drop down menu. For example: .custom-red-text { color: #F00; } */ .error { font-family: verdana, Arial, Helvetica, Geneva, Swiss; font-size: 12px; font-style: normal; font-weight: bold; text-decoration: none; color: #ff4444; } .head2 { line-height: 200%; font-family: verdana, Arial, Helvetica, Geneva, Swiss; font-size: 16px; font-style: normal; text-decoration: none; color: #1c7294; } .element { font-family: verdana, Arial, Helvetica, Geneva, Swiss; font-size: 8.5pt; font-style: normal; font-weight: normal; text-decoration: none; color: #303030; padding: 4px; } .elementTitle { font-family: verdana, Arial, Helvetica, Geneva, Swiss; font-size: 8.5pt; font-style: normal; font-weight: normal; text-decoration: none; color: #565555; padding: 4px 2px 4px 2px } .elementEdit { font-family: verdana, Arial, Helvetica, Geneva, Swiss; font-size: 12px; font-style: normal; font-weight: normal; text-decoration: none; color: black; padding: 4px 2px 8px 2px } .elementImg { border: 2px solid #388368; } .roomTitle { padding: 4px; font-size: 1.2em; } .roomTitleRow { background: #ccdde4; } .elementBackgroundDark { /* background-color: #f8f8f0; */ } .elementBackgroundLight { /* background-color: #f8f0f0; */ } .formBackgroundDark { background-color: none; } .formBackgroundLight { background-color: none; }