/* CSS Document */

/* -----------------------------------*/
/* ---------->>> GLOBAL <<<-----------*/ 
/* -----------------------------------*/

body, dd, dl, dt, fieldset, legend, blockquote, form, h1, h2, h3, h4, h5, h6, li, ol, ul {
	margin: 0;
	border: 0 none #FFFFFF;
	padding: 0;
	}

h1, h2, h3, h4, h5, h6, p.h2, ul.siteMap {
	color:#00B1EA;
	font-family:Georgia, Arial, Helvetica, sans-serif;
	}

h2, h3 {	color:#C79D76}
h1 {	margin-bottom:20px;	font-size:2em}
#lhsContent h1 {	margin-bottom:20px;	font-size:1.5em; font-weight:normal; line-height:1.5em}
h5 {	font-weight:normal; font-size:1.25em}
	
body {
	font: 0.8em Arial, Helvetica, sans-serif;
	line-height:1.8em;
	background: #FFF url(../images/bg.jpg) top left repeat-x;
	color: #777;
	}
	
a:link {	color: #666}
a:hover {color: #00B1EA;	text-decoration: none}
a:visited {	color: #000}

img {border: 0}

input, select, table, textarea, legend {
	font-family: Arial, Helvetica, sans-serif;
	}
	
textarea {	font-size:1em}

.pageClear {
	clear: both;
	height: 1px;
	overflow: hidden;
	margin-bottom: 20px;
	font-size: 1px;
	line-height: 1px;
	}
	
.hidden {
	position: absolute;
	left: -9999px;
	top: -9999px;
	height: 1px;
	width: 1px;
	overflow: hidden;
	}

/* -----------------------------------*/
/* ---->>> MAIN CONTAINERS <<<--------*/ 
/* -----------------------------------*/

#mainContainer {
	position:relative;
	top:35px;
	min-width:780px;	
	margin: 0 80px 0 80px;
	border: 3px solid #CCB19C;
	background: #FFF;
	}
	
* html #mainContainer
{
	w\idth: expression(document.documentElement.clientWidth < 780 ? "780px" : "auto");
	height:500px;
}

html, body {height: 100%}

#mainContent {	clear:both;	width:100%}
	

/* -----------------------------------*/
/* ------>>> PAGE HEADER <<<----------*/ 
/* -----------------------------------*/

#pageHeader {
	background-color:#FFF;
	height:170px;
	font-family:Georgia, Arial, Helvetica, sans-serif;
	}

#pageHeader #logo {
	position:absolute;
	top:0;
	left:0;
	background-color:#FFF;
	z-index:3;
	float:left;
	padding-right:10px;
	height:160px;
	color:#00B1EA;
	text-align:right;
	}
	
#pageHeader #logo img {	margin:10px;	margin-right:0}
#pageHeader #images {	float:right}
#pageHeader #images img {	padding-right:0}
	
/* -----------------------------------*/
/* ------>>> TOP NAVIGATION <<<-------*/ 
/* -----------------------------------*/

#topNavigation {
	height:80px;
	margin-bottom:10px;
	color:#00B1EA;
	font-family:Georgia, Arial, Helvetica, sans-serif;
	}
	
#topNavigation ul.serviceLinks {
	height:40px;
	background: #00B1EA url(../images/services-bg.gif) top left repeat-x;
	margin-bottom:20px;
	line-height:2em;	
	}
	
#topNavigation ul {	list-style:none;	height:2em}
	
#topNavigation li {
	float:left;
	padding-left:.7em;
	padding-right:.7em;
	line-height:1.4em;
	}

#topNavigation ul.mainLinks li.current {	font-weight:800}
#topNavigation ul.serviceLinks li {	line-height:2.8em}
#topNavigation a {	text-decoration:none}
#topNavigation ul.mainLinks a {	color: #00B1EA}
#topNavigation ul.serviceLinks a {	color: #FFF; 	padding-bottom:5px}
#topNavigation ul.mainLinks li a:hover {	text-decoration:underline}
#topNavigation ul.serviceLinks li a:hover, 
#topNavigation ul.serviceLinks li a.current {	border-bottom:2px solid #FFF}
	
/* -----------------------------------*/
/* ------>>> LHS AREAS <<<-------*/ 
/* -----------------------------------*/


#lhsContent {	width:340px;	float:left;	margin:0 10px 20px 10px}
#lhsContent img.row {	float:left;	width:148px}
	
p.h2 {	line-height:1.4em;	margin-top:0;	font-size:1.4em}
h3.space {	margin:20px 0 15px}
	
#mainInfo {
	margin:0 10px 20px 370px;
	padding-left:10px;
	border-left:3px solid #B9EAF9;
	}
#mainInfo h3 {	margin-bottom:15px;	margin-top:10px}
	
.promotion {	font-size:0.9em;	margin-bottom:20px}
.promotion li {	margin-left:1em}
.promotion img {	float:left;	width:150px}
.content {	margin-left:160px}
.content p {	margin:5px 0 10px 0}
	
/* -----------------------------------*/
/* -------->>> MAIN CONTENT <<<-------*/ 
/* -----------------------------------*/

#mainContent li {
	list-style:none;
	background:url(../images/bg-smallarrow.gif) no-repeat 0.3em 0.7em;
	margin-left:0;
	padding-left:1.7em;
	}
	
#mainContent li.pageTop {
	background-image:url(../images/bg-smallarrowup.gif);
	margin-top:20px;
	}
	
#mainContent ul.standard li {
	background:url(../images/bullet.gif) no-repeat 0.3em 0.6em;
	margin-left:1.5em;
	}
	
#mainContent ul.verticalMenu, #mainContent ul.galleryMenu, #caseStudyMenu {
	font-family: Georgia, Arial, Helvetica, sans-serif;
	}
	
#mainContent ul.verticalMenu {	margin-bottom:20px}
#mainContent ul.galleryMenu {	margin-bottom:30px}
	
#mainContent li.selected {
	list-style:none;
	background:none;
	margin-left:0;
	padding-left:0;
	font-weight:800;
	color:#00B1EA;
	}
	
#mainContent li h3 a {	color:#00B1EA}
#mainContent li a {	text-decoration:none}
#mainContent li a:hover {	text-decoration:underline}
	
blockquote {
	background: transparent url(../images/bg-quoteleft.gif) left top no-repeat;
	margin:15px 0;
	}
blockquote div {
  padding: 0 50px;
  background: transparent url(../images/bg-quoteright.gif) right bottom no-repeat;
}

.testimonial {	clear:both;	width:100%;	margin-bottom:20px}

.testimonial .image {	float:left;	width:340px;	margin-bottom:20px}
.testimonial .quote {	margin-left:380px}
	
#fullwidthContent {	padding:0 10px 20px 10px}
#fullwidthContent ul.verticalMenu li {	margin-bottom:10px}
#fullwidthContent ul.verticalMenu li img {	padding-top:10px;	padding-right:3px}
	
#fullwidthContent ul.verticalMenu li.videos img {	padding-top:10px;	padding-right:8%}
#fullwidthContent .galleryIntro {	float:left;	width:48%}
#fullwidthContent .videoIntro {	clear:both}

/* -----------------------------------*/
/* ------->>> PAGE FOOTERS <<<--------*/ 
/* -----------------------------------*/

#footerInside {	clear:both;	text-align:center;	height:30px}
#footerInside a {	margin:5px}
#footerOutside {
	margin: 45px 80px 30px 90px;
	padding-bottom:30px;
	font-size:0.85em;
	color:#777;
	text-align:center;
	}
#footerOutside ul {
	float:right;
	width:400px;
	list-style:none;	
	}
	#footerOutside li {
	text-align:right;
	position:relative;
	padding-left:3em;
	margin-right:5px;
	}
	
#footerOutside p {	font-size:0.9em}
#footerOutside p a {	text-decoration:none}
#footerOutside a {	color: #777}
#footerOutside a:hover {	color: #00B1EA}
	#footerOutside span {	margin-left:20px}
	
/* -----------------------------------*/
/* ------->>> CONTACT FORM <<<--------*/ 
/* -----------------------------------*/


form {	margin-bottom:20px}

fieldset {
	border:1px solid #AAA;
	padding:5px;
	padding-bottom:10px;
	}
	
legend {
	font:1.2em Georgia, Arial, Helvetica, sans-serif;;
	font-weight:800;
	color:#C69D76;
	margin:5px;
	margin-bottom:0;
	padding:10px;
	}

#contactForm {
	float:left;
	width:50%;
	padding-right:10px;
	}
	
#addressDetails {
	padding:10px;
	margin-left:53%;
	}
	
#contactForm p {
	clear: both;
	padding:0;
	margin:0;
	}  
  
#contactForm label {
  float: left;
  width: 35%;
  text-align: right;
  margin-right:10px;
  }

#contactForm input, #contactForm select, #contactForm textarea {
	float: left;
	width: 50%;
	text-align: left;
	padding-right:5%;
	margin-bottom:10px;
	padding-bottom:0;  
	}
	
#contactForm input.button {
	width:35%;
	margin-left:10px;
	float:none;
	text-align:center;
	}
  
/* -----------------------------------*/
/* ------->>> CASE STUDIES <<<--------*/ 
/* -----------------------------------*/


div.caseStudyOn, div.caseStudyOff {
	float:left;
	width:30%;
	padding:5px;
	margin-right:10px;
	}
	
div.caseStudyOn {	border:1px solid #00B1EA}

div.caseStudyOn img, div.caseStudyOff img {	float:left;	padding:0 5px 10px 0}
div.caseStudyOff h3, div.caseStudyOn h3 {	width:100%;	margin-bottom:5px}
div.caseStudyOn h3 {	color:#00B1EA}
	
#caseStudyDetail {	clear:left;	width:100%;	margin-top:20px}
#caseStudyDetail h2 {	margin:0 0 20px 0;	padding-top:20px}
	
#caseStudyMenu {
	float:left;
	width:14em;
	border:1px solid #B2B2B2;
	background-color:#F2F2F2;
	padding:10px;
	}
	
#caseStudyInfo {	margin-left:18em}	
	
/* -----------------------------------*/
/* ------->>> IMAGE GALLERY <<<-------*/ 
/* -----------------------------------*/

#imageGallery {
	text-align:center;
	position:relative; 
    width:780px; 
    height:346px; 
    margin:0 auto 30px auto; 
    border:1px solid #AAA;	
    }

/* Adding an image to prompt rollover of thumb images */
.indoor {background:url(../images/main/indoor-main.gif) no-repeat;}
.outdoor {background:url(../images/main/outdoor-main.gif) no-repeat;}
.poolcovers {background:url(../images/main/poolcovers-main.gif) no-repeat;}
.mosaics {background:url(../images/main/mosaics-main.gif) no-repeat;}
.sketch {background:url(../images/main/sketch-main.gif) no-repeat;}

.indoor, .outdoor, .poolcovers, .mosaics, .sketch {	
	background-color:#FFF;
	background-position: 380px 50px;
	}
	
/* Removing the list bullets and indentation - add size - and position */
#imageGallery ul {
	list-style-type:none;
	width:370px;
	height:340px;
	margin:3px; 
    float:left;
	margin-bottom:30px;
	}
	
#imageGallery li {    float:left}

/* Remove the images and text from sight */
#imageGallery a.gallery span {position:absolute; width:1px; height:1px; top:5px; left:5px; overflow:hidden; background:#fff;}

/* Adding the thumbnail images */
#imageGallery a.gallery, #imageGallery a.gallery:visited {display:block; color:#000;text-decoration:none;border:1px solid #777; margin:1px 2px 1px 2px; text-align:left; cursor:default;}
#imageGallery a {height:80px; width:115px;}

/* The Indoor thumbnail images */
#imageGallery a.indoorslidea {background:url(../images/thumb/indoor-img1.jpg);}
#imageGallery a.indoorslideb {background:url(../images/thumb/indoor-img2.jpg);}
#imageGallery a.indoorslidec {background:url(../images/thumb/indoor-img3.jpg);}
#imageGallery a.indoorslided {background:url(../images/thumb/indoor-img4.jpg);}
#imageGallery a.indoorslidee {background:url(../images/thumb/indoor-img5.jpg);}
#imageGallery a.indoorslidef {background:url(../images/thumb/indoor-img6.jpg);}
#imageGallery a.indoorslideg {background:url(../images/thumb/indoor-img7.jpg);}
#imageGallery a.indoorslideh {background:url(../images/thumb/indoor-img8.jpg);}
#imageGallery a.indoorslidei {background:url(../images/thumb/indoor-img9.jpg);}
#imageGallery a.indoorslidej {background:url(../images/thumb/indoor-img10.jpg);}
#imageGallery a.indoorslidek {background:url(../images/thumb/indoor-img11.jpg);}
#imageGallery a.indoorslidel {background:url(../images/thumb/indoor-img12.jpg);}

/* The Outdoor thumbnail images */
#imageGallery a.outdoorslidea {background:url(../images/thumb/outdoor-img1.jpg);}
#imageGallery a.outdoorslideb {background:url(../images/thumb/outdoor-img2.jpg);}
#imageGallery a.outdoorslidec {background:url(../images/thumb/outdoor-img3.jpg);}
#imageGallery a.outdoorslided {background:url(../images/thumb/outdoor-img4.jpg);}
#imageGallery a.outdoorslidee {background:url(../images/thumb/outdoor-img5.jpg);}
#imageGallery a.outdoorslidef {background:url(../images/thumb/outdoor-img6.jpg);}
#imageGallery a.outdoorslideg {background:url(../images/thumb/outdoor-img7.jpg);}
#imageGallery a.outdoorslideh {background:url(../images/thumb/outdoor-img8.jpg);}
#imageGallery a.outdoorslidei {background:url(../images/thumb/outdoor-img9.jpg);}
#imageGallery a.outdoorslidej {background:url(../images/thumb/outdoor-img10.jpg);}
#imageGallery a.outdoorslidek {background:url(../images/thumb/outdoor-img11.jpg);}
#imageGallery a.outdoorslidel {background:url(../images/thumb/outdoor-img12.jpg);}

/* The Pool Cover thumbnail images */
#imageGallery a.poolcoversslidea {background:url(../images/thumb/poolcovers-img1.jpg);}
#imageGallery a.poolcoversslideb {background:url(../images/thumb/poolcovers-img2.jpg);}
#imageGallery a.poolcoversslidec {background:url(../images/thumb/poolcovers-img3.jpg);}
#imageGallery a.poolcoversslided {background:url(../images/thumb/poolcovers-img4.jpg);}
#imageGallery a.poolcoversslidee {background:url(../images/thumb/poolcovers-img5.jpg);}
#imageGallery a.poolcoversslidef {background:url(../images/thumb/poolcovers-img6.jpg);}
#imageGallery a.poolcoversslideg {background:url(../images/thumb/poolcovers-img7.jpg);}
#imageGallery a.poolcoversslideh {background:url(../images/thumb/poolcovers-img8.jpg);}
#imageGallery a.poolcoversslidei {background:url(../images/thumb/poolcovers-img9.jpg);}
#imageGallery a.poolcoversslidej {background:url(../images/thumb/poolcovers-img10.jpg);}
#imageGallery a.poolcoversslidek {background:url(../images/thumb/poolcovers-img11.jpg);}
#imageGallery a.poolcoversslidel {background:url(../images/thumb/poolcovers-img12.jpg);}

/* The Mosaic thumbnail images */
#imageGallery a.mosaicslidea {background:url(../images/thumb/finishesandmosaics-img1.jpg);}
#imageGallery a.mosaicslideb {background:url(../images/thumb/finishesandmosaics-img2.jpg);}
#imageGallery a.mosaicslidec {background:url(../images/thumb/finishesandmosaics-img3.jpg);}
#imageGallery a.mosaicslided {background:url(../images/thumb/finishesandmosaics-img4.jpg);}
#imageGallery a.mosaicslidee {background:url(../images/thumb/finishesandmosaics-img5.jpg);}
#imageGallery a.mosaicslidef {background:url(../images/thumb/finishesandmosaics-img6.jpg);}
#imageGallery a.mosaicslideg {background:url(../images/thumb/finishesandmosaics-img7.jpg);}
#imageGallery a.mosaicslideh {background:url(../images/thumb/finishesandmosaics-img8.jpg);}
#imageGallery a.mosaicslidei {background:url(../images/thumb/finishesandmosaics-img9.jpg);}
#imageGallery a.mosaicslidej {background:url(../images/thumb/finishesandmosaics-img10.jpg);}
#imageGallery a.mosaicslidek {background:url(../images/thumb/finishesandmosaics-img11.jpg);}
#imageGallery a.mosaicslidel {background:url(../images/thumb/finishesandmosaics-img12.jpg);}

/* The design sketch thumbnail images */
#imageGallery a.poolsketcha {background:url(../images/thumb/sketch-img1.gif);}
#imageGallery a.poolsketchb {background:url(../images/thumb/sketch-img2.gif);}
#imageGallery a.poolsketchc {background:url(../images/thumb/sketch-img3.gif);}
#imageGallery a.poolsketchd {background:url(../images/thumb/sketch-img4.gif);}
#imageGallery a.poolsketche {background:url(../images/thumb/sketch-img5.gif);}
#imageGallery a.poolsketchf {background:url(../images/thumb/sketch-img6.gif);}
#imageGallery a.poolsketchg {background:url(../images/thumb/sketch-img7.gif);}
#imageGallery a.poolsketchh {background:url(../images/thumb/sketch-img8.gif);}
#imageGallery a.poolsketchi {background:url(../images/thumb/sketch-img9.gif);}
#imageGallery a.poolsketchj {background:url(../images/thumb/sketch-img10.gif);}
#imageGallery a.poolsketchk {background:url(../images/thumb/sketch-img11.gif);}
#imageGallery a.poolsketchl {background:url(../images/thumb/sketch-img12.gif);}

/* styling the hovers */
#imageGallery a.gallery:hover {border:1px solid #FFF;}
#imageGallery a.gallery:hover span {position:absolute; width:390px; height:270px; top:30px; left:372px; color:#000; padding:5px; background:#FFF; border:1px solid #777;}
#imageGallery a.gallery:hover img {border:1px solid #fff; float:left; margin-right:5px;}

/* -----------------------------------*/
/* --------->>> SITE MAP <<<----------*/ 
/* -----------------------------------*/

#siteMap h3 {	margin-top:15px;	margin-bottom:10px}
#siteMap li {	background:url(../images/bg-smallarrow.gif) no-repeat 0.5em 0.5em}
ul.siteMap  {	font-size:1.3em}
ul.siteMap ul.subList {	font-size:0.9em;	margin-bottom:15px}
ul.subList li {	margin-bottom:0}