/* ==== The Spa Leamington 2010 - Constructed by JB and G Web Design (www.jbandg.co.uk)==== */

/* ==== Common ==== */

body, html {
margin: 0; 
padding: 0; 
font-family: Tahoma, Arial, Helvetica, sans-serif;
color: #434343;
font-size: 11px;
line-height: 23px;
background: url(/images/backgrounds/html.gif) top left repeat #403f3f;}
#pages {
width: 940px;
margin: 25px auto 0;
padding: 0;
background-color:#fff;
padding: 0 20px;}
.clear {
clear: both;}
.break {
margin:10px 0 10px 0;}

.notes {
font-size:10px;
line-height:18px;
color:#4f4f4f;}

.left-banner {margin-bottom:10px;}




/* ==== Header ==== */	

#header {
width: 940px;
height: 169px;
margin: 0;
padding: 0;
/*background: url(/images/backgrounds/header-spa-1.jpg) top left no-repeat #fff;*/
background-position: top;
background-position:left;
background:no-repeat;
background-repeat:no-repeat;
font: normal 11px "Georgia", "Times New Roman", Times, serif; color: #c6c6c6;
border-bottom:solid 1px #85746a;}

.headerleft {
float: left;
width: 240px;}

.headerright {
float: right;
width: 594px;
text-align:right;}

#headertopnav {
margin: 0;
padding: 20px 0 20px 0;}

#headertopnav a:link, #headertopnav a:visited, #headertopnav a:active {
color: #333333;
text-decoration:none;} 

#headertopnav a:hover {
text-decoration:underline;}

#headercall {
font-size: 25px;
height:30px;
display:block;
overflow:hidden;}

#headernumber {
font-size: 48px;
height:49px;
display:block;
overflow:hidden;}

#headeraddr {
font-size: 13px;}



/* ==== Navigation ==== */	



/* ====== FURTHER PHP BROWSER DEPENDANT STYLES LOCATED IN MENU INCLUDE FILE ====== */

#nav-wrapper {
width: 940px;
height: 74px;
margin: 0;
padding: 0;
font-size: 13px;
background: url(/images/backgrounds/nav.jpg) top left repeat-x #1a1816;
border-top: solid 1px #FFFFFF;
border-bottom: solid 1px #FFFFFF;}
#nav {
width: 940px;
height: 74px;
padding: 0;
float: left;
list-style: none;
margin: 0 auto;
padding: 0;}
#nav ul {
list-style: none;
margin: 0 auto;
padding: 0;	}
#nav li {
float: left;	
margin: 0;
background: url(/images/backgrounds/nav-divide.jpg) top right no-repeat;}

#nav li.last {
background: none;}

#nav a {
text-decoration: none;
display: block;
margin: 0;
padding: 10px 11px 13px 10px; 
color: #908681;
font: normal 13px Tahoma Arial, Helvetica, sans-serif;

}

#nav a.contact {
padding-right: 16px;}

#nav a:link .title, #nav a:active .title, #nav a:visited .title {
color: #dfdfdf;
font: normal 16px "Georgia", "Times New Roman", Times, serif;}

#nav a:hover .title {
color: #f6f6f6;
font: normal 16px "Georgia", "Times New Roman", Times, serif;}

#nav a .navbreak {
height: 5px;
display:block;}

#nav a .caption {
font-weight:normal;
font: 11px "Georgia", "Times New Roman", Times, serif;
font-style:italic;}

#nav a:hover {
color: #b8b8b8;}



#nav li a:hover {
color: #fff;
text-decoration: none;
background: url(/images/backgrounds/nav-hover.jpg) top left repeat-x #4592a0;}







ul.dropdown li:hover > ul {
	visibility: visible;
}
/* top level navigation link styling */
ul.dropdown,
ul.dropdown li {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 597;
	float: left;
	vertical-align: middle;
}
ul.dropdown a:link,
ul.dropdown a:visited {
	margin: 0;
	display: block;
	padding: 0;
	text-decoration: none;
}
ul.dropdown a:hover {
	margin: 0;
	display: block;
	padding: 0;
	text-decoration: none;
}




/*drop-down navigation block link styling */
ul.dropdown ul {
	float: left;
	width: 190px;
	margin: 0;
	padding: 0;
	visibility: hidden;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 598;
}
ul.dropdown ul a:link,
ul.dropdown ul a:visited {
	width: 190px;
	display: block;
	border-top: solid 1px #5d4d3e;
	margin: 0;
	padding: 5px 0 5px 6px;
	color: #a79d98;
	background: #4a3c30;
}
ul.dropdown ul a:hover {
	width: 190px;
	display: block;
	margin: 0;
	border-top: solid 1px #5d4d3e;
	padding: 5px 0 5px 6px;
	color: #fff;
}
/* drop out navigation block link styling */
ul.dropdown ul li ul {
	float: left;
	width: 190px;
	margin: 0;
	padding: 0;
	top: 0px;
	left: 100%;
	display: block;
}
ul.dropdown ul li ul a:link,
ul.dropdown ul li ul a:visited {
	width: 190px;
	display: block;
	margin: 0;
	padding: 5px 0 5px 6px;
	border-top: solid 1px #5d4d3e;
	color: #fff;	
	background: #4a3c30;
}
ul.dropdown ul li ul li a:hover {
	width: 190px;
	display: block;
	margin: 0;
	padding: 5px 0 5px 6px;
	border-top: solid 1px #5d4d3e;
	color: #fff;
}



/* ======= Quick Navigation ======= */


#quicknav {
background: url(/images/backgrounds/quicknav.jpg) top left no-repeat;
width: 196px;
padding: 28px 0 0 32px;}

#quicknav p {
line-height:normal;}

#quicknav .quicknavtitle {
font-size: 17px;}

#quicknav ul.menu, ul.menu ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
  width: 160px;
}

#quicknav ul.menu a {
  display: block;
  text-decoration: none;	
}

#quicknav ul.menu li {
  margin-top: 1px;
background: url(/images/quicknav/arrow.jpg) top left no-repeat;
padding: 0 0 0 18px;
}

#quicknav ul.menu li a {
  /*background: #333;*/
  color: #545454;	
  padding: 0 0 0 4px;
  height:23px;
}

#quicknav ul.menu li a {
  /*background: #ffe667;*/
  color: #545454;	
  padding: 0 0 0 4px;
}


#quicknav ul.menu li a:link, #quicknav ul.menu li a:visited {
  /*background: #ffe667;*/
  color: #545454;	
  padding: 0 0 0 4px;
  text-decoration:none;
}

#quicknav ul.menu li a:hover {
  background: #dbdbdb;
  text-decoration:none;
  padding: 0 0 0 4px;
}

#quicknav ul.menu li ul li a:link, #quicknav ul.menu li ul li a:visited {
  color: #545454;
  padding-left: 6px;
  width: 118px;
  text-decoration:none;
}

#quicknav ul.menu li ul li a:hover {
  background: #dbdbdb;
  text-decoration:none;
  padding-left: 6px;
}

.clickeditem {
background-color:#000000;}



.dayspa-left, .aesthetics-left, .hair-left, .beauty-left {
padding: 0; 
margin: 0;}

.quicknav-bottom {
background: url(/images/backgrounds/quicknav-bottom.jpg) top left no-repeat;
width: 228px;
height: 60px;}



/* ===== Generic Headings ===== */

h1 {
margin: 0 0 8px 0;
padding: 0;
font: normal 22px Tahoma, Verdana, Arial; color: #3d2f26;}

h2 {
margin: 15px 0 10px 0;
padding: 0 0 0 0; 
font: normal 18px Tahoma, Verdana, Arial; color: #3d2f26;
}

h3 {
margin: 0 0 10px 0;
padding: 0 0 0 0; 
font: normal 16px Tahoma, Verdana, Arial; color: #3d2f26;
}


/* ===== Content Layout  ===== */ 

#content {
width: 940px;
margin: 0 0 0 0;
padding: 0;
background:#fff;}
.main-rotating-images {
margin: 0 0 22px 0;
padding: 0;
display: block;}
#content p {
margin: 0 0 10px 0;
padding: 0;	}	
#content a, #content a:link, #content a:visited {
color: #4797a5;
padding: 0;
text-decoration: none;}	
#content a:hover {
color: #4797a5;
padding: 0;
text-decoration: underline;}



#main { /* left and middle column */
width: 760px;
float: left;
margin: 0;
padding: 15px 0 0 0;}
#main-left { /*  far left column */
width: 228px;
float: left;
margin: 0;
padding: 0;}
#main-left p{ 
margin-bottom: 18px;}
#main-right { /*  middle column */
width: 520px;
float: right;
margin: 0;
padding: 5px 0 0 0;}

#main-right ul {
margin: 0 0 10px 20px;
list-style-type:disc;
padding: 0;	}
#main-right ul li {
padding: 0 0 5px 0;
margin: 0 0 0 5px;}
#main-right ul li ul {
margin:0 0 2px 20px;
padding:0;}



#right { /* far right column */
float: right;
margin: 0 0 20px 0;
width: 160px;
padding: 15px 0 0 0;}
#right p {
margin:0 0 10px 0;
padding:0;
line-height:16px;
color:#434343;}


#right a, #right a:link, #right a:visited {
color: #ffffff;
padding: 0;
text-decoration: none;
font-weight:bold;}	
#right a:hover {
color: #ffffff;
padding: 0;
text-decoration: underline;
font-weight: bold;}

#breadcrumbs {
border-bottom: solid 1px #e1e1df;
margin: -5px 0 10px 0;}

#breadcrumbs p {
margin-bottom: 5px;}




/* ===== Homepage Slider ===== */

#homeslide, #homeslide img {
margin: 0 0 0 0;
z-index:99;}

#home-slider {
margin:0; 
padding:0;
} 

#home-slider, #home-slider ul, #home-slider ul li {
list-style:none;
float:left;}

.stripViewer .panelContainer .panel ul {
 float: left;
 text-align: left;
 margin: 0;
   height:357px;
 overflow:hidden;
}
		
.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
 margin: 0;
 position: relative;
 width: 940px;
   height:357px;
 overflow:hidden;

}

/* These 2 lines specify style applied while slider is loading */
.csw {
 width: 940px;
 height: 30px;
 overflow:auto;
  height:357px;
 overflow:hidden;
}

.csw .loading {
 margin: 0;
 text-align: center;
 background: url('/images/home/loader.gif') no-repeat 200px 4px;
 height:30px;
}

.stripViewer { /* This is the viewing window */
 position: relative;
 border: 0; /* this is the border. should have the same value for the links */
 margin: 0;
 width: 940px; /* Also specified in  .stripViewer .panelContainer .panel  below */
 clear: both;
 
   height:357px;
 overflow:hidden;
}


.main-feature-image {
 padding: 0;
 margin: 0;
 float: left;
/* clear: both;*/
}

.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
 position: relative;
 left: 0;
 top: 0;
 width: 940px;
 list-style-type: none;
/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */}

.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
 float:left;
 height: 100%;
 position: relative;
 width: 940px; /* Also specified in  .stripViewer  above */}
		
.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
 float:left;
 margin:0;
 padding: 0;
 
 height:357px;
 overflow:hidden;}
		
.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
 margin: 0 0 0 830px;
 padding: 0;
 float:left;
 position: absolute;
 top: 602px;
 width: 200px;
 display:none;
}
		
.stripNav ul { /* The auto-generated set of links */
 list-style: none;
}
		
.stripNav ul li {
 float: left;
 margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */
}
		
#home-slider .stripNav a { /* The nav links */
 font-size: 10px;
 font-weight: bold;
 text-align: center;
 line-height: 18px;
 margin-right:3px;
 background: #c6e3ff;
 color: #484848;
 text-decoration: none;
 display: block;
 padding: 0 7px;
}
		
#home-slider .stripNav li.tab1 a,
#home-slider .stripNav li.tab2 a,
#home-slider .stripNav li.tab3 a,
#home-slider .stripNav li.tab4 a,
#home-slider .stripNav li.tab5 a {
 background: #b3b3b3;
}

#home-slider .stripNav li a:hover {
 background: #ebebeb;
}
		
#home-slider .stripNav li a.current {
 background: #d7d7d7;
 color: #484848;
}
		
.stripNavL, .stripNavR { 
 display: none;
}


/* home banners */

.home-banners {margin-bottom:10px; display:block; }

/* ===== Price Tables ===== */

#pricetable {

	border: 1px solid #e1e1df;
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	background-color: #f4f4f4;
	margin: 0 0 13px 0;  }
#pricetable p {
	margin: 0;
	padding: 0; }
#pricetable td {
	border: 1px solid #e1e1df;
	padding: 2px 6px;
	margin: 0 }
#pricetable td.subheader {
	background-color: #ccd8ba; }
#pricetable th {
	border-left: 1px solid #e1e1df;
	border-right: 1px solid #e1e1df;
	border-bottom: 1px solid #e1e1df;
	background-color: #ededed;
	font-weight: bold;
	padding: 2px 6px;
	margin: 0;
	text-align: left; }
#pricetable tr.stripe {
background-color:#f6f6f6;}

.bookarrow {
float: left;
margin: 5px 15px 5px 0;}

.treatment-th {
background-color:#dfdfdf;
font-weight:bold;}



/* ==== Polaroid Styles ==== */	

.polaroid {
float:right;
margin: 0 5px 15px 15px;}

.polaroid-title {
width: 355px;}


/* ==== Split Table Styles ==== */	

.splittd-left {
border-right: solid 1px #e1e1df;}

.splittd-right {
padding-left: 15px;}

.splittd-break {
margin: 5px 0 8px 0;}

/* ====== Main Contact Form =====  */

#contact  {
width:430px;
margin:0 0 0 0;
padding:15px;
background:url(../images/contact-form-bg.gif) top left no-repeat #ff9702;
color:#662f07;
}
.formtextfield { 
width:215px;
margin:0 0 12px 0;
padding:4px 0 4px 3px;
/*height:17px;*/
font: bold 10px Tahoma, Arial, Helvetica, sans-serif; color: #aaaaaa;
color: #6c6c6c;
}
.formdropdownfield { 
width:220px;
margin:0 0 12px 0;
padding:4px 0 4px 3px;
/*height:17px;*/
font: bold 10px Tahoma, Arial, Helvetica, sans-serif; color: #aaaaaa;
color: #6c6c6c;
}
.formtextarea {
width:210px;
height:120px;
padding:4px;
font: bold 10px Tahoma, Arial, Helvetica, sans-serif; color: #aaaaaa;
color: #6c6c6c;
}
.basicsubmitbutton {
width: 220px;
height: 38px;
margin: 10px 0 0 0;
padding: 0;
border:none;
background:url(/images/main-contact-button.gif) top left no-repeat;
cursor:pointer;}



/* ==== footer ==== */

#footer {
width: 900px;
margin: 20px 0 0 0;
padding: 0 20px;
color: #464646;
font-size: 11px;
background:url(/images/backgrounds/footer.jpg) top left repeat-x #e3e2e2;}

#footer p {
margin: 0 0 12px 0;
padding: 0;	}
	
#footer a, #footer a:link, #footer a:visited {
color: #464646;
text-decoration: none;
font-weight:normal;	}
	
#footer a:hover {
color: #1b1b1b;
text-decoration: underline;
font-weight:normal;		}

.footertitle {
font-size: 14px;
color:#464646;}

.footericoncell {
width: 51px;}

.footertitlecell {
padding-top: 14px;}

.footericon {
margin: 0 10px 0 0;}

.footerleft {
width: 550px;
float:left;
background:url(/images/backgrounds/footer-divide.jpg) top right no-repeat;
padding: 20px 20px 0 0;}

.footerright {
width: 305px;
float: right;
padding: 20px 0 0 0;}



/* ======= Paypal Form for Gift Vouchers ========== */


#giftvouchers {
width: 498px;
background:url(/images/backgrounds/paypal-form.jpg) bottom left no-repeat #efefef;
font-size:11px;
padding: 10px;
border:solid 1px #dadada;}

#giftvouchers .fieldstyle {
width: 180px;
font-size: 11px;
color:#413121;
padding: 4px 2px;
border:solid 1px #dadada;}

#giftvouchers .dropstyle {
width: 185px;
font-size: 11px;
color:#413121;
padding: 4px 2px;
border:solid 1px #dadada;}

#giftvouchers .ordernow {
margin: 6px 0 0 0;}






/* ====== Quick Contact Form =====  */

#quickcontact  {
width: 305px;
margin: 0;
padding: 0 0 15px 0;}
#quickcontact input { 
font: normal 10px Tahoma, Arial, Helvetica, sans-serif; color: #8e8e8e;
width: 235px;
margin: 0 0 8px 0;
padding: 4px 0 4px 2px;
/*border: solid 1px #fff;
background-color:#f1f1f1;*/}
#quickcontact textarea {
font: normal 10px Tahoma, Arial, Helvetica, sans-serif; color: #8e8e8e;
width: 235px;
height:40px;
margin: 0 0 8px 0;
padding: 4px 0 4px 2px;}
#quickcontact input.submit {
font: bold 11px Tahoma, Arial, Helvetica, sans-serif; color: #fff;
width: 116px;
height: 29px;
margin: 5px 0 0 0;
padding: 0;
border:none;
background:url(/images/footer/quick-contact-submit.jpg) top left no-repeat;
cursor:pointer;}

#quickcontact input.required.error, #quickcontact select.required.error, #quickcontact textarea.required.error{
	border: 1px solid #ce1d1d;
	background-color: #f1f1f1;
margin: 0 0 8px 0;
}

#quickcontact input.required, #quickcontact select.required, #quickcontact textarea.required, #quickcontact input.notrequired, #quickcontact select.notrequired, #quickcontact textarea.notrequired{
	border: 1px solid #fff;
	background-color: #f1f1f1;
margin: 0 0 8px 0;
}

div.error {
	color: #ce1d1d;
}




.cmxform fieldset p.error label { color: #fff; }
div.container {
	margin: 0 0 12px 0;
	color:#ffffff;
	background: url(/images/backgrounds/quick-validation.jpg) top left no-repeat;
width: 213px;
	height:88px;
	padding: 7px 0 0 92px;
	line-height:19px;
}
div.container ol li {
	list-style-type: disc;
	margin-left: 20px;
}
div.container { display: none }



/* ====== Main Contact Form =====  */


#maincontact input.required.error, #maincontact select.required.error, #maincontact textarea.required.error{
	border: 1px solid #ce1d1d;
	background-color: #f1f1f1;
margin: 0 0 8px 0;
}

#maincontact input.required, #maincontact select.required, #maincontact textarea.required, #maincontact input.notrequired, #maincontact select.notrequired, #maincontact textarea.notrequired{
width: 180px;
font-size: 11px;
color:#413121;
padding: 4px 2px;
border:solid 1px #dadada;
}


#maincontact textarea {
font: normal 11px Tahoma, Arial, Helvetica, sans-serif; color: #8e8e8e;
width: 235px;
height:40px;
margin: 0 0 8px 0;
padding: 4px 0 4px 2px;}


div.maincontainer {
background-color:#f8f8f8;
border:solid 1px #919193;
	margin: 0 0 12px 0;
	color:#ce1d1d;
width: 485px;
	height:88px;
	padding: 7px 0 0 10px;
	line-height:19px;
}
div.maincontainer ol li {
	list-style-type: disc;
	margin-left: 20px;
}


div.maincontainer { display: none }


#maincontact input.submit {
font: bold 11px Tahoma, Arial, Helvetica, sans-serif; color: #fff;
width: 140px;
height: 30px;
margin: 5px 0 0 0;
padding: 0;
border:none;
background:url(/images/send-enquiry.jpg) top left no-repeat;
cursor:pointer;}



/* ====== Sifr ====== /*


/* These are standard sIFR styles... do not modify */



.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}

.sIFR-replaced {
	visibility: visible !important;
}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
  display: none !important;
}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash h1, h2, .quick-contact-header, .why-choose-header {
	visibility: hidden;
}