/* -----------------------------------*/
/* ---------->>> 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 {	color:#9E8273;	font-weight:normal;	font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;}

h1 {	font-size:2.2em;	line-height:1.2em}
h2 {	font-size:1.9em;	line-height:1em;	color:#000}
h3 {	font-size:1.2em}
h4 {	font-size:1.6em}

ul {	list-style:none}

html, body {height:100%}
	
body {
	font: 0.7em Verdana, Arial, Helvetica, sans-serif;
	line-height:1.8em;
	color:#ECE6E3;
	padding:0;
	margin:0;
	}

a {			color:#9E8273;	text-decoration:underline;	background-color:transparant}
a:hover {	text-decoration:none}
a:visited {	color:#818181}

img {border: 0}

.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}

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

#header, #footer {
	text-align:center;
	background: #FFF url(../images/top-header.gif) bottom left repeat-x;
	color:#FFF;
	}
#header {height:80px}
#header h1, #footer h1 {color:#FFF;	padding:10px;	padding-top:20px}
#header h1 a {color:#FFF}

#footer h1 {font-size:1.4em}
#footer a {color:#FFF}
#footer h2 {font-size:1em;	color:#FFF;	padding:0}
#footer ul {width:90%;	margin:10px auto;	text-align:center}
#footer ul li{	display:inline;	padding:10px 5px}
#footer ul li a {color:#FFF}
#footer a:hover {text-decoration:underline}
#footer p {	padding-bottom:10px}

#credits {padding-bottom:20px;	text-align:center;	margin:10px auto;	color:#9E8273}
#credits h1, #credits h2 {	font-size:0.9em}
#credits a {color:#9E8273}
#credits a:hover {text-decoration:underline}
#credits p {color:#9E8273;	font-size:0.9em}

#logoNavigation {	margin-right:0;	padding-right:0;	padding-bottom:15px}
#navcontainer {width:980px}
#logo {	float:left;	width:17%;	background-color:#D8C6B7}
#logo img {	text-align:center;	float:right;	border-left:10px solid #FFF;	border-right:10px solid #FFF}


#nav-gallery {
	height:299px;
	border-left:5px solid #9E8273;
	font-size:0.8em;
	background-color:#D8C6B7;
	float:left;
	width:82%;
	}
#navigation {
	clear:none;
	float:left;
	height:299px;
	margin:0;
	border-right:1px solid #9E8273;
	width:160px;
	}
#main-photos {
	float:left;	
	width:530px;
	clear:none;
	}
#main-photos img {text-align:center}
#main-photos img, #main-photos div, #main-photos div.heading {	padding:5px}

	
#calltoaction {clear:none; float:right;	width:17%;	color:#000;	text-align:center;	position:absolute;	top:90px;	right:7px}
#calltoaction strong {font-size:2em}
#calltoaction em {font-size:1.4em;	font-style:normal;	font-weight:800}
#calltoaction li {width:100%}
#calltoaction li a {display:block;	background: transparent url('../images/action-bg.gif') top left no-repeat;	height:48px;	padding-top:10px;	width:100%;	color:#000;	text-decoration:none}
#calltoaction li a:hover, #calltoaction li a.selected {background-image:url('../images/action-bg-ro.gif');	color:#FFF}
#navigation li.current, #navigation li a {
	display:block;
	padding:5px;
	line-height:1.3em;
	background-color:#D8C6B7;
	border-bottom:1px solid #FFF;
	color:#000;
	margin:0;	
	}
* html #navigation li.current, * html #navigation li a {height:1px}
#navigation li a:hover, #navigation li.current {background-color:#9E8273;	color:#FFF}
#navigation a, #rhsContent a, #footer a, .summary a {text-decoration:none}



#mainContent {
	clear:both;
	margin:15px;
	padding:15px;
	padding-right:0;
	background-color:#ECE6E3;
	color:#9E8273;
	}
h2 {color:#9E8273}
#rhsContent h2.newsletter {font-weight:800}	
	
#lhsContent {width:60%;	float:left;	margin:0;	padding:0}
#rhsContent h2 {font-size:2.2em;	font-weight:normal}
#rhsContent h2 a {text-decoration:underline}
#rhsContent {margin:0;	margin-left:63%;	width:29%;	clear:none;	padding:0}
#lhsContent, #rhsContent, div.summary, #fullWidthContainer {border:1px solid #9E8273;	background-color:#FFF;	padding:10px;	margin-top:20px}
#imagery {float:right;	width:170px;	padding-left:10px}
#imagery img {border:1px solid #9E8273;	margin-bottom:20px}
#mainContent h1 a, #mainContent h2 a {background: url(../images/brown-arrow.gif) 0.2em 0.5em no-repeat;	padding-left:20px;	color:#9E8273; font-size:0.9em;	padding-bottom:0}
#mainContent h1 a:hover, #mainContent h2 a:hover {background-position: 0.5em 0.5em}
h2.available {font-size:1.6em;	color:#9E8273}
ul.column {float:left;	width:30%}
ol li {margin-left:30px}
ul.list {clear:both;	padding:5px}
ul.list li {background: transparent url(../images/brown-bullet.gif) 0.2em 0.5em no-repeat}
ul.column li, ul.list li {background: transparent url(../images/brown-bullet.gif) 0.2em 0.6em no-repeat;	padding-left:15px}
#imageKey ul.column li {background:none}
#imageKey ul.column {width:40%}
div.treatments li a, div.treatment-row li a, div.nextSteps a {background: #FFF url(../images/brown-arrow.gif) 20px 0.4em no-repeat;	padding-left:35px;	color:#9E8273; padding-bottom:5px}
div.treatments li a:hover, div.treatment-row li a:hover, div.nextSteps a:hover {background-position: 25px 0.4em}
div.treatments {padding:10px 5px}
div.treatments ul, div.treatment-row ul {padding-top:5px}
div.treatments li span {	font-size:0.8em}
ul.soon li {padding-left:35px}
div.summary {	width:25%;	float:left;	margin-right:5%}
div.summary div {text-align:center;	padding:10px 0;	width:95%;	margin:5px auto}
div.summary h2 a {background-color:#FFF}
div.treatment-row, .nextSteps {clear:left}
div.summary img {border:1px solid #9E8273}

#fullWidthContainer {	margin-right:10px}
.treatmentInfo {padding-right:15px;	margin-bottom:20px;	margin-right:200px;	border-top:4px solid #ECE6E3;	margin-top:10px;	padding-top:10px}
.treatmentInfo h1 {float:left;	width:70%}
.treatmentInfo h3 {float:right;	text-align:right; line-height:1.2em;	clear:none;	font-size:2em;	padding-top:5px;	padding-right:10px}
.treatmentInfo p {padding-top:10px;	width:95%;	clear:left}
.information {	margin-right:200px;	padding:10px;	margin-bottom:20px;	background-color:#ECE6E3; 	border:1px solid #9E8273}
.offer {	width:290px;	float:left;	margin-right:20px; padding:10px;	margin-bottom:20px;	background-color:#ECE6E3; 	border:1px solid #9E8273}

.nextSteps ul {margin-top:10px}
.testimonialColumn {float:left;	width:48%;	margin-right:1%}
.testimonial {background-color:#FAF9F8;	border-top:1px dotted #9E8273;	border-bottom:1px dotted #9E8273;	padding:10px;	margin-right:10px;	margin-bottom:20px}
.information h2 {padding:15px 0 5px 0}
blockquote {	margin:10px;	margin-bottom:15px;	background: transparent url(../images/open-quote.gif) left top no-repeat}
blockquote div {  padding: 0 20px;  background: transparent url(../images/close-quote.gif) right bottom no-repeat }
#clientLocations {	width:750px;	margin: 5px auto}
#imageKey {border:1px solid #9E8273;	padding:15px;	height:100px}

div.enquiryFormFields, div.newsletterForm {padding:10px;	font-size:1.2em;	margin:20px auto;	width:600px}
div.enquiryFormFields p {
	clear: both;
	padding-top:0;
	padding-bottom:10px;
	margin:3px;
	} 
div.enquiryFormFields p.checkbox {padding-bottom:0}
  
div.enquiryFormFields label {
  float: left;
  width: 35%;
  text-align: right;
  margin-right:10px;
  }

div.enquiryFormFields input, div.enquiryFormFields select, div.enquiryFormFields textarea {
	width:200px;
	float: left;
	text-align: left;
	padding-right:5%;
	margin-bottom:10px; 
	margin-left:5px; 
	}	
div.enquiryFormFields select {width:auto;	min-width:200px}
div.enquiryFormFields input.box {
	width:11px;
	margin:0;
	margin-right:10px;
	margin-top:3px}
	
	
div.enquiryFormFields textarea {	width:200px}
div.enquiryFormFields h2 {margin:0;	clear:both}
	
div.enquiryFormFields input.button {
	width:auto;
	margin:5px 10px;
	float:none;
	text-align:center;
	}
div.enquiryFormFields h5 {text-align:center;	margin:5px}
div.contactDetails h3 {font-size:2em}
div.contactDetails h4 {font-size:1.4em;	margin:10px}
div.contactDetails {float:left;	clear:none; width:30%;	text-align:center;	line-height:2.5em;	margin-top:40px}

div.openingTimes {	width:50%;	font-size:1.6em;	float:left}
div.openingTimes table {border:1px solid #9E8273;	margin-top:20px;	background-color:#FFF;	padding:25px}
div.openingTimes th {width:240px;	text-align:left;	padding-left:15px;	padding-bottom:10px}
div.openingTimes td {width:240px}
#mainContent p a {font-weight:800}
h2.available2007 {color:#9E8273}

iframe.googlemap {border:1px solid #9E8273}
div.photoslideshow {width:510px;	margin:20px auto;}
div.photoslideshow h3 {font-size:2em;	padding:20px 0;	text-align:center;	line-height:1.5em}
/* -----------------------------------*/
/* ------->>> IMAGE GALLERY <<<-------*/ 
/* -----------------------------------*/

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

/* Adding an image to prompt rollover of thumb images */
.salon {background:url(../images/main/beautysalon-main.gif) no-repeat;}

.salon {		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.beautysalona {background:url(../images/thumb/beautysalon-img1.jpg);}
#imageGallery a.beautysalonb {background:url(../images/thumb/beautysalon-img2.jpg);}
#imageGallery a.beautysalonc {background:url(../images/thumb/beautysalon-img3.jpg);}
#imageGallery a.beautysalond {background:url(../images/thumb/beautysalon-img4.jpg);}
#imageGallery a.beautysalone {background:url(../images/thumb/beautysalon-img5.jpg);}
#imageGallery a.beautysalonf {background:url(../images/thumb/beautysalon-img6.jpg);}
#imageGallery a.beautysalong {background:url(../images/thumb/beautysalon-img7.jpg);}
#imageGallery a.beautysalonh {background:url(../images/thumb/beautysalon-img8.jpg);}
#imageGallery a.beautysaloni {background:url(../images/thumb/beautysalon-img9.jpg);}
#imageGallery a.beautysalonj {background:url(../images/thumb/beautysalon-img10.jpg);}
#imageGallery a.beautysalonk {background:url(../images/thumb/beautysalon-img11.jpg);}
#imageGallery a.beautysalonl {background:url(../images/thumb/beautysalon-img12.jpg);}

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


/* gift voucher page */
#step1 {
	background-image:url(../images/step1.png);
	padding-left:60px;
	background-repeat:no-repeat;
	min-height:43px;
	line-height:43px;
	margin-bottom:10px;
	margin-top:15px;
}

#step2 {
	background-image:url(../images/step2.png);
	padding-left:60px;
	background-repeat:no-repeat;
	min-height:43px;
	line-height:43px;
	margin-bottom:10px;
}

#step3 {
	background-image:url(../images/step3.png);
	padding-left:60px;
	background-repeat:no-repeat;
	min-height:43px;
	line-height:43px;
	margin-bottom:10px;
}

#voucher-left {
	float:left;
}

#voucher-right {
	float:right;
	border:solid 1px #8D847D;
	padding:10px;
}

#voucher-right div.title {
	font-size:1.5em;
	line-height:2em;
}