/* @group general styles --------------------------------------------------- */ html {height:100%; width:100%; background:url(../images/bg_tile.jpg) repeat center top;} body {font-size:0.75em; font-family:arial,verdana,sans; padding:0; color:#666666; margin:0px; height:100%; background:url(../images/background2.jpg) no-repeat center top; width: 100%; display: table} body.homepage {background:url(../images/home_bg2.jpg) no-repeat center top; width: 100%; display: table;} form,dl,dd,dt,h1,h2,h3,h4,h5, h6 {padding:0; margin:0;} p {font-size: 1em; margin: 0 0 1.1em 0; padding: 0; line-height:1.4em;} ul {padding:0 0 0 1.4em; margin:0 0 1em 0;} h1 {font-size: 2.2em; font-family: Georgia, "Times New Roman", Serif; padding: 0 0 0.5em 0; font-weight:normal; color:#ff9933; } h2 {font-size: 1em; padding: 0 0 0.9em 0; font-weight:bold;} h3 {font-size: 1em; font-family:arial,verdana,sans; padding: 0; font-weight:bold; color:#ff9933; } h4 {font-size: 0.95em; font-family:arial,verdana,sans; padding: 0 0 0.4em 0; font-weight:bold; color:#666666; } a {outline:none;} a img {border: 0; padding:0;} a:link {color: #ff9933; text-decoration:none;} a:visited {color: #ff9933; text-decoration:none;} a:hover {color: #ff9933; text-decoration:underline;} a:active {color: #ff9933; text-decoration:none;} /* @group psudo headings & helper styles --------------------------------------------------- */ .cb {clear:both;} a.view-product, a.view-product:visited {width:120px; height:10px; display:block; text-indent:-9999px; background:url('../images/view_product_btn.gif') no-repeat; } a.view-product:hover {width:120px; height:10px; display:block; text-indent:-9999px; background:url('../images/view_product_over_btn.gif') no-repeat; } #content h1.about { text-indent:-9999px; height:45px; margin-bottom:15px; background: url(../images/h1_about.gif) no-repeat;} #content h1.planning-tools { text-indent:-9999px; height:45px; margin-bottom:15px; background: url(../images/h1_planning_tools.gif) no-repeat;} #content h1.corporate-events { text-indent:-9999px; height:19px; margin-bottom:15px; background: url(../images/h1_corporate_events.gif) no-repeat;} #content h1.weddings { text-indent:-9999px; height:19px; margin-bottom:15px; background: url(../images/h1_weddings.gif) no-repeat;} #content h1.field-days { text-indent:-9999px; height:19px; margin-bottom:15px; background: url(../images/h1_field_days.gif) no-repeat;} #content h1.quote { text-indent:-9999px; height:23px; margin-bottom:15px; background: url(../images/h1_quote.gif) no-repeat;} #content h1.get-in-touch { text-indent:-9999px; height:19px; margin-bottom:15px; background: url(../images/h1_get_in_touch.gif) no-repeat;} #content h1.thank-you { text-indent:-9999px; height:45px; margin-bottom:15px; background: url(../images/h1_thank_you.gif) no-repeat;} #content .right-col ul { margin:0; padding:0 0 1.1em 0; list-style:none; color:#333333; } #content .right-col li { background-image:url(../images/arrow.gif); background-repeat:no-repeat; margin-left:0px; padding-left:20px; padding-bottom:8px; color:#666666; } #content .right-col li a, #content .right-col li a:visited { color:#ff9933; } /* @group page structure --------------------------------------------------- */ #wrapper {width:850px; margin:0 auto; padding:0 25px 0 25px; background:url(../images/background4.jpg) repeat-y center top;} #wrapper.home {height:902px; background:none;} #header {width:810px; height:134px; padding:0 20px 0 20px; background: url(../images/header_bg.gif) left top no-repeat;} #header a {color: #666666; text-decoration:none;} #header #logo {float:left; width:245px; padding:20px 0 0 0;} #header #nav {float:right; width:440px; height:9px; list-style:none; overflow:hidden; margin:105px 0 0 0; padding:0; } #header #nav li.home {width: 31px; height:9px; float:left; margin-right:16px; } #header #nav li.about {width: 52px; height:9px; float:left; margin-right:16px; } #header #nav li.products {width: 56px; height:9px; float:left; margin-right:16px; } #header #nav li.planning {width: 89px; height:9px; float:left; margin-right:16px; } #header #nav li.images {width: 81px; height:9px; float:left; margin-right:16px; } #header #nav li.contact {width: 49px; height:9px; float:left; } #header #nav li a {display: block; text-indent:-9999px; height:9px; background-image: url('../images/nav.gif'); background-repeat: no-repeat; } #header #nav li.home a, #header #nav li.home a:link, #header #nav li.home a:visited {background-position: 0 0; } #header #nav li.home a:hover {background-position: 0 -9px; } #header #nav li.home.selected a, #header #nav li.home.selected a:link, #header #nav li.home.selected a:visited {background-position: 0 -9px; } #header #nav li.about a, #header #nav li.about a:link, #header #nav li.about a:visited {background-position: -47px 0; } #header #nav li.about a:hover {background-position: -47px -9px; } #header #nav li.about.selected a, #header #nav li.about.selected a:link, #header #nav li.about.selected a:visited {background-position: -47px -9px; } #header #nav li.products a, #header #nav li.products a:link, #header #nav li.products a:visited {background-position: -114px 0; } #header #nav li.products a:hover {background-position: -114px -9px; } #header #nav li.products.selected a, #header #nav li.products.selected a:link, #header #nav li.products.selected a:visited {background-position: -114px -9px; } #header #nav li.planning a, #header #nav li.planning a:link, #header #nav li.planning a:visited {background-position: -183px 0; } #header #nav li.planning a:hover {background-position: -183px -9px; } #header #nav li.planning.selected a, #header #nav li.planning.selected a:link, #header #nav li.planning.selected a:visited {background-position: -183px -9px; } #header #nav li.images a, #header #nav li.images a:link, #header #nav li.images a:visited {background-position: -288px 0; } #header #nav li.images a:hover {background-position: -288px -9px; } #header #nav li.images.selected a, #header #nav li.images.selected a:link, #header #nav li.images.selected a:visited {background-position: -288px -9px; } #header #nav li.contact a, #header #nav li.contact a:link, #header #nav li.contact a:visited {background-position: -384px 0; } #header #nav li.contact a:hover {background-position: -384px -9px; } #header #nav li.contact.selected a, #header #nav li.contact.selected a:link, #header #nav li.contact.selected a:visited {background-position: -384px -9px; } #promotions {width:850px; clear:both; } #promotions.home {width:850px; height:356px; clear:both; } #links .plan {float:left; width:262px; height:126px; padding:85px 0 0 20px; background:url(../images/plan_box.gif) no-repeat left top;} #links .plan ul {width:85px; overflow:hidden; margin:0; padding:0; } #links .plan li.checklist {width: 85px; height:9px; margin-bottom:8px; } #links .plan li.budget {width: 72px; height:9px; margin-bottom:8px; } #links .plan li.guests {width: 69px; height:9px; margin-bottom:8px; } #links .plan li.seating {width: 73px; height:9px; margin-bottom:8px; } #links .plan li.timeline {width: 76px; height:9px; margin-bottom:8px; } #links .plan li a {display: block; text-indent:-9999px; height:9px; background-image: url('../images/plan_btn.gif'); background-repeat: no-repeat; } #links .plan li.checklist a {background-position: 0 0; } #links .plan li.checklist a:hover {background-position: -85px 0; } #links .plan li.budget a {background-position: 0 -18px; } #links .plan li.budget a:hover {background-position: -85px -18px; } #links .plan li.guests a {background-position: 0 -36px; } #links .plan li.guests a:hover {background-position: -85px -36px; } #links .plan li.seating a {background-position: 0 -54px; } #links .plan li.seating a:hover {background-position: -85px -54px; } #links .plan li.timeline a {background-position: 0 -72px; } #links .plan li.timeline a:hover {background-position: -85px -72px; } #links .lookbook {float:left; width:262px; height:151px; padding:60px 0 0 20px; background:url(../images/lookbook_box.jpg) no-repeat left top;} #links .lookbook a {display: block; text-indent:-9999px; width:107px; height:45px; background:url('../images/lookbook_btn.gif') top left no-repeat; } #links .lookbook a:hover {background-position: 0px -45px; } #links .quote {float:right; width:120px; height:55px; padding:156px 0 0 166px; background:url(../images/quote_box.jpg) no-repeat left top;} #links .quote a {display: block; text-indent:-9999px; width:108px; height:33px; background:url('../images/quote_btn.gif') top left no-repeat; } #links .quote a:hover {background-position: 0px -33px; } #products {width:844px; height:164px; padding:33px 3px 3px 3px; background:url(../images/products_bg.gif) no-repeat left top;} #products .icon {float:left; width:74px; height:164px; padding-right:3px;} #products .icon2 {float:left; width:74px; height:164px;} #content {width:804px; padding:25px 23px 10px 23px; background:url(../images/content_bg.gif) repeat-y left top; min-height:300px;} #content .callout.corporate-events {width:419px; padding:0px 0px 20px 385px; background:url(../images/corporate_events_bg.jpg) no-repeat left top; min-height:300px;} #content .callout.weddings {width:354px; padding:50px 450px 0px 0px; background:url(../images/weddings_bg.jpg) no-repeat right top; min-height:230px;} #content .callout.field-days {width:384px; padding:50px 0px 0px 420px; background:url(../images/field_days_bg.jpg) no-repeat left top; min-height:300px;} #content .gallery { width:100%; padding-bottom:1.1em; clear:both; } #content .gallery .thumbnail { width:60px; height:60px; float:left; padding:5px 7px 7px 5px; margin-right:3px; margin-bottom:3px; background:url(../images/thumbnail_bg.jpg) top left no-repeat; } #content .left-col {float:left; width:310px;} #content .left-col .product-image {width:284px; padding:8px 18px 0px 8px; background:url(../images/photo_bg.gif) no-repeat left top; } #content .left-col .product-image-bottom {width:310px; height:20px; background:url(../images/photo_bottom.gif) no-repeat left bottom; clear:both; } #content .right-col {float:right; width:460px; } #content .right-col .callout {width:460px; margin-bottom:20px; border-bottom:1px solid #ccc; clear:both; } #content .right-col .callout .text {float:left; width:235px; } #content .right-col .callout .button {float:right; width:213px; } #content .right-col .learn_more {width:430px; height:127px; padding:15px; background:url(../images/learn_more_bg.gif) no-repeat left top;} #content .right-col .learn_more .button {float:left; width:151px; height:39px; margin-right:10px; background:url(../images/orange_btn_bg.gif) no-repeat left top;} #content .right-col .related_products {width:460px; padding:47px 0 15px 0; margin-top:25px; border-top:1px solid #ccc; background:url(../images/you_might_like.gif) no-repeat 0 15px;} #content .right-col .related_products .product {float:left; width:142px; padding:6px; background:url(../images/related_products_bg.gif) no-repeat left top;} #content .right-col .related_products .product.right {float:right; width:146px; padding:6px 0 6px 6px;} #content .right-col .related_products .product img {padding-bottom:15px;} #content .right-col .related_products .product p {font-size: 1.em; margin: 0 0 0.5em 0; padding: 0; line-height:1.4em;} #content .right-col .contactform {width:438px; padding:5px 11px 0 11px; background:url(../images/contact-form-bg.gif) no-repeat left top;} #content .right-col .contactform h3 {padding:2px 11px 2px 11px; margin-top:20px; color:#fff; background-color:#b7b7b7; display:block; clear:both;} #content .right-col .contactform .row {clear: both; padding-top: 10px; overflow:hidden;} #content .right-col .contactform .row span.label {float:left; width: 140px; padding-left:10px; font-size:1em;} #content .right-col .contactform .row span.form {float:right; width: 250px; padding-right:10px; text-align: left;} #content .right-col .contactform .row span.form input { border:1px solid #999999; width:250px; height:18px;} #content .right-col .contactform .row span.form textarea { border:1px solid #999999; width:250px; height:98px;} #content .right-col .contactform .row span.form select {width:150px; height:20px; border:1px solid #999; } #content .right-col .contactform .row span.checkbox {float:right; width:250px; font-size:0.75em; color:#000; padding-bottom:5px; font-size:1em; color:#666666;} #content .right-col .contactform .buttons {padding:50px 0 0 200px;} #content .right-col .bottom {height:36px; background:url(../images/contact-form-bottom.gif) no-repeat left bottom;} #products {} #products #menu {width:900px; height:54px; list-style:none; overflow:hidden; margin:15px 0 0 0; padding:0; clear:both; } #products #menu li.pavilions {width: 74px; height:54px; float:left; } #products #menu li.hard-wall {width: 74px; height:54px; float:left; } #products #menu li.signage {width: 74px; height:54px; float:left; } #products #menu li.stages {width: 74px; height:54px; float:left; } #products #menu li.furniture {width: 74px; height:54px; float:left; } #products #menu li.chairs {width: 74px; height:54px; float:left; } #products #menu li.crockery {width: 74px; height:54px; float:left; } #products #menu li.linen {width: 74px; height:54px; float:left; } #products #menu li.lighting {width: 74px; height:54px; float:left; } #products #menu li.flooring {width: 74px; height:54px; float:left; } #products #menu li.heaters {width: 74px; height:54px; float:left; } #products #menu li a {display: block; text-indent:-9999px; height:54px; background-image: url('../images/nav.gif'); background-repeat: no-repeat; } #products #menu li.pavilions a, #products #menu li.pavilions a:link, #products #menu li.pavilions a:visited {background-position: 0 0; } #products #menu li.pavilions a:hover {background-position: 0 -54px; } #wrapper-bottom {width:850px; margin:0 auto; padding:0 25px 0 25px; height:35px; background:url(../images/content_bottom_bg2.gif) center top no-repeat; clear:both;} #footer {width:850px; margin:0 auto; padding:0px 25px 0 25px; clear:both;} #footer.home {padding:25px 25px 0 25px;} #footer p { color:#666666;} #footer p a:link, #footer p a:visited, #footer p a:hover {color:#666666;} #footer .copyright {float:left; width:550px; } #footer .developer {float:right; width:200px; } /* @group lightbox --------------------------------------------------- */ #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;} #lightbox img{ width: auto; height: auto;} #lightbox a img{ border: none; } #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #imageContainer{ padding: 10px; } #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #imageContainer>#hoverNav{ left: 0;} #hoverNav a{ outline: none;} #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; } #prevLink { left: 0; float: left;} #nextLink { right: 0; float: right;} #prevLink:hover, #prevLink:visited:hover { background: url(http://www.brightsidelandscapes.com.au/images/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(http://www.brightsidelandscapes.com.au/images/nextlabel.gif) right 15% no-repeat; } #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; } #imageData{ padding:0 10px; color: #666; } #imageData #imageDetails{ width: 70%; float: left; text-align: left; } #imageData #caption{ font-weight: bold; } #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;} #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }