/* @group general styles --------------------------------------------------- */ html {height:100%; width:100%; } body {margin:0px; font-size:1em; font-family:"Lucida Grande",Helvetica,Arial,Verdana,sans-serif; background:url(../images/background.gif) repeat-y center top;} form,dl,dd,dt,h1,h2,h3,h4,h5,h6 {padding:0; margin:0;} ul {padding:0; margin:0 0 1em 0; } p {font-size: 0.75em; margin: 0 0 1.1em 0; padding: 0; line-height:1.5em; color:#666666;} h1 {font-size: 1.2em; font-family: Verdana, Geneva, Arial; padding: 0 0 0.1em 0; font-weight:normal; color:#FFFFFF;} h2 {font-size: 1.4em; padding: 0 0 0.5em 0; font-weight:normal; font-family:"Lucida Grande",Helvetica,Arial,Verdana,sans-serif; color:#0099cc; line-height:1.1em;} h3 {font-size: 0.9em; padding: 0 0 2em 0; font-weight:normal; font-family:"Lucida Grande",Helvetica,Arial,Verdana,sans-serif; color:#999999; line-height:1.4em;} h4 {font-size: 1em; padding: 0 0 0.5em 0; font-weight:bold; font-family:"Lucida Grande",Helvetica,Arial,Verdana,sans-serif; color:#333333; line-height:1.4em;} h5 {font-size: 0.9em; padding: 0 0 0.5em 0; font-weight:bold; font-family:"Lucida Grande",Helvetica,Arial,Verdana,sans-serif; color:#333333; line-height:1.4em;} a {outline:none;} a img {border: 0; padding:0;} a:link {color: #0099cc; text-decoration:none;} a:visited {color: #0099cc; text-decoration:none;} a:hover {color: #0099cc; text-decoration:none;} a:active {color: #0099cc; text-decoration:none;} /* Don't forget, additional header and link styles have been designated in the relevant section below! */ /* @group helper styles --------------------------------------------------- */ .cb {clear:both;} .blue {color:#0099cc; } .black {color:#333333; } /* @group page structure --------------------------------------------------- */ #wrapper { width:980px; margin:0 auto; } #header { height:114px; padding:8px 25px 0 25px; background:url(../images/header-bg.gif) repeat-x left bottom; } #logo { width:179px; height:59px; } #nav { margin:21px 0 0 0; padding:0; float:left; width: 604px; list-style:none; overflow:hidden; } #nav li { width: 99px; height: 34px; float: left; margin-right: 2px; } #nav li.contact { margin-right: 0; } #nav li a {display: block; text-indent:-9999px; height: 34px; width: 99px; background-image: url('../images/nav.gif'); background-repeat: no-repeat; } #nav li.home a, #nav li.home a:link, #nav li.home a:visited { background-position: 0 0; } #nav li.services a, #nav li.servives a:link, #nav li.services a:visited { background-position: -101px 0; } #nav li.portfolio a, #nav li.portfolio a:link, #nav li.portfolio a:visited { background-position: -202px 0; } #nav li.about a, #nav li.about a:link, #nav li.about a:visited {background-position: -303px 0; } #nav li.blog a, #nav li.blog a:focus, #nav li.blog a:active { background-position: -404px 0; } #nav li.contact a, #nav li.contact a:focus, #nav li.contact a:active {background-position: -505px 0; } #summary { height:93px; padding:0; } #summary h1 { height:93px; background:url(../images/summary-home.gif) no-repeat left top; text-indent: -9999px; margin:0; padding:0;} #flash { height:310px; } #snapshot { height:261px; } #snapshot.content-management { font-size:0.7em; } #title { height:65px; padding:25px 25px 0 25px; background:url(../images/title-bg.jpg) no-repeat left top; } #title.content-management { background:url(../images/title-content-management.jpg) no-repeat left top; } #title.ecommerce { background:url(../images/title-ecommerce.jpg) no-repeat left top; } #title.email-newsletters { background:url(../images/title-email-newsletters.jpg) no-repeat left top; } #title.blogs { background:url(../images/title-blogs.jpg) no-repeat left top; } #title.seo { background:url(../images/title-seo.jpg) no-repeat left top; } #title.hosting { background:url(../images/title-hosting.jpg) no-repeat left top; } #title.about { background:url(../images/title-about.jpg) no-repeat left top; } #title.services { background:url(../images/title-services.jpg) no-repeat left top; } #title.portfolio { background:url(../images/title-portfolio.jpg) no-repeat left top; } #title.contact { background:url(../images/title-contact.jpg) no-repeat left top; } #title.work { background:url(../images/title-work.jpg) no-repeat left top; } #title .breadcrumbs {width: 500px; padding:0 0 8px 0; color:#666666; } #title .breadcrumbs p { float:left; font-size:0.7em; color:#666666; margin:0; padding:0; line-height:1.4em;} #title .breadcrumbs ul { list-style:none; display: inline; font-size:0.7em; line-height:1.4em;} #title .breadcrumbs ul li { float:left; padding:0 6px 0 12px; background:url(../images/breadcrumb-item-sep.gif) no-repeat 0 5px; } #title .breadcrumbs ul li.first { padding:0 6px 0 7px; background:none; } #title .breadcrumbs a { color:#0099cc; } #services-overview { width:980px; background:url(../images/services-icons.jpg) no-repeat left bottom; } #services-overview .service { float:left; width:205px; padding:5px 20px 105px 20px;} #services-overview .service h3.content-management { text-indent: -9999px; height:17px; padding: 0 0 0.5em 0; background:url(../images/overview-content-management.gif) no-repeat left top;} #services-overview .service h3.ecommerce { text-indent: -9999px; height:17px; padding: 0 0 0.5em 0; background:url(../images/overview-ecommerce.gif) no-repeat left top;} #services-overview .service h3.email-newsletters { text-indent: -9999px; height:17px; padding: 0 0 0.5em 0; background:url(../images/overview-email-newsletters.gif) no-repeat left top;} #services-overview .service h3.blogs { text-indent: -9999px; height:17px; padding: 0 0 0.5em 0; background:url(../images/overview-blogs.gif) no-repeat left top;} #services-overview .service p { font-size:0.7em; color:#666666; margin: 0 0 0.5em 0; } #main-content { padding:25px 50px 0px 50px; background:url(../images/main-content-bg.jpg) no-repeat left top; } #main-content.home { padding:45px 25px 25px 20px; background:url(../images/home-main-content-bg.jpg) no-repeat left bottom; height:293px; } #main-content.home .text { float:right; width:440px; } #main-content ul { margin:0; padding:0; list-style:none; font-size:0.8em; color:#666666; } #main-content li { background-image:url(../images/bullet-arrow.gif); background-repeat:no-repeat; margin-left:0px; padding-left:15px; padding-bottom:10px; } #main-content .primary { float:left; width:570px; padding-bottom:15px; } #main-content .primary.large { float:left; width:880px; padding-bottom:15px; } #main-content .primary .web-design { width:312px; min-height:165px; padding:0 0px 10px 255px; background:url(../images/services-web-design.jpg) no-repeat left bottom; } #main-content .primary .content-management { width:312px; min-height:165px; padding:0 0px 10px 255px; background:url(../images/services-content-management.jpg) no-repeat left bottom; } #main-content .primary .ecommerce { width:312px; min-height:165px; padding:0 0px 10px 255px; background:url(../images/services-ecommerce.jpg) no-repeat left bottom; } #main-content .primary .email-newsletters { width:312px; min-height:165px; padding:0 0px 10px 255px; background:url(../images/services-email-newsletters.jpg) no-repeat left bottom; } #main-content .primary .blogs { width:315px; min-height:165px; padding:0 0px 10px 255px; background:url(../images/services-blogs.jpg) no-repeat left bottom; } #main-content .primary .seo { width:315px; min-height:165px; padding:0 0px 10px 255px; background:url(../images/services-seo.jpg) no-repeat left bottom; } #main-content .primary .hosting { width:312px; min-height:165px; padding:0 0px 10px 255px; background:url(../images/hosting.jpg) no-repeat left bottom; } #main-content .primary .contact-details { float:left; width:290px; padding-top:20px; } #main-content .primary .contact-form { float:right; width:522px; padding-top:20px; } #main-content .primary .contact-form .bottom {height:36px; background:url(../images/contact-form-bottom.jpg) no-repeat left bottom;} #main-content .primary .contactform {width:500px; padding:5px 11px 0 11px; background:url(../images/contact-form-bg.jpg) no-repeat left top;} #main-content .primary .contactform h5 {padding:2px 11px 2px 11px; margin-top:20px; background-color:#ccc; display:block; clear:both;} #main-content .primary .contactform .row {clear: both; padding-top: 10px;} #main-content .primary .contactform .row span.label {float:left; width: 140px; padding-left:10px; font-size:0.75em;} #main-content .primary .contactform .row span.form {float:right; width: 290px; padding-right:10px; text-align: left;} #main-content .primary .contactform .row span.form input { border:1px solid #999999; width:290px; height:18px;} #main-content .primary .contactform .row span.form textarea { border:1px solid #999999; width:290px; height:98px;} #main-content .primary .contactform .row span.form select {width:150px; height:20px; border:1px solid #999; } #main-content .primary .contactform .row span.checkbox {float:right; width:300px; font-size:0.75em; color:#000; padding-bottom:5px;} #main-content .primary .contactform .buttons {padding:50px 0 0 200px;} #main-content .secondary { float:right; width:240px; } #main-content .row { width:100%; clear:both; } #main-content .row .col1 { float:left; width:276px; padding-right:26px; padding-bottom:25px; } #main-content .row .col2 { float:left; width:276px; padding-right:26px; padding-bottom:25px; } #main-content .row .col3 { float:right; width:276px; padding-bottom:25px; } #main-content .row .portfolio-text { padding-left:5px; } #main-content-footer { height: 50px; padding:0px 50px 0px 50px; background:url(../images/main-content-bottom.jpg) no-repeat left top; } #footer { padding:30px 20px 40px 20px; background:url(../images/footer-bg.gif) repeat-x left top #000000; color:#999999;} #footer .links { float:left; width:200px; padding-right:30px; } #footer .links h4 { font-size: 0.85em; color:#999999; } #footer .links ul { margin:0; padding:0; list-style:none; font-size:0.7em; } #footer .links li { border-bottom:1px solid #333333; padding:5px 0 5px 0; } #footer .links li.first { border-top:1px solid #333333; } #footer a:link {color: #999999; text-decoration:none;} #footer a:visited {color: #999999; text-decoration:none;} #footer a:hover {color: #0099cc; text-decoration:none;} #footer a:active {color: #999999; text-decoration:none;} #footer .info { float:right; width:240px;} #footer .info a.quote {display:block; width:240px; height:57px; text-indent:-9999em; background:url(../images/quote-footer-btn.gif) no-repeat left top; } #footer .info p { margin-top:20px; padding:20px 0 10px 0; border-top:1px solid #333333; border-bottom:1px solid #333333; color:#999999; font-size:0.7em;} /* @group page components --------------------------------------------------- */ /* @group unitip --------------------------------------------------- */ #unitip { position: absolute; z-index: 1000; top: -1000px; color: #fff; font: normal normal 0.75em/15px Verdana, Arial, Helvetica, sans-serif; display: none; } #unitippoint, #unitipmid, #unitipcap {position: relative; top: 0px; left: 0px; width: 250px; display: block; } #unitippoint { background: url(../images/TipPoint.png) no-repeat; height: 19px; overflow: hidden; } #unitipmid { background: url(../images/TipMid.png) repeat; width: 220px; height: auto; padding: 5px 15px; } #unitipcap { background: url(../images/TipCap.png) no-repeat; height: 7px; overflow: hidden; } /* @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; }