/* CSS Document */

/* Global Layout Styles */

html,body{margin:0;padding:0}

@font-face {
    font-family: 'PercolatorRegular';
    src: url('percolator-webfont.eot');
    src: url('percolator-webfont.eot?#iefix') format('embedded-opentype'),
         url('percolator-webfont.woff') format('woff'),
         url('percolator-webfont.ttf') format('truetype'),
         url('percolator-webfont.svg#PercolatorRegular') format('svg');
    font-weight: normal;
    font-style: normal; }

body {
font: 0.9em/1.5em "Trebuchet MS", Verdana, sans-serif;
background: #272627  url(../assets/generic/new_21010_bg.gif) repeat-x top fixed;
text-align:center;
color: #272627;
}

#container {
position:relative;
background:#FFF;
width: 760px;
margin: 0 auto;
}

#header {
float:left;
width: 100%;
height: 120px;
}

#navigation {
width: 400px;

margin:0 auto;
padding:0;
}

#sub_nav {
float:left;
width: 100%;
height: auto;
background: #292829 url(../assets/generic/nav_bg.gif) repeat-x;
padding: 0.3em 0 0.3em 0;
margin:1px 0 1px 0
}

#banner {
float:left;
height: 182px;
width: 760px;
border-bottom: 8px solid #272627;
margin:0;
padding:0;
}

#content {
position:relative;
float:left;
width:100%;
margin:0;
padding:0 0 1em 0;
min-height: 300px;
}

#content div.left {float:left; background-color:#3300CC;}

#content.male {background:#000;}

#secondary {
padding: 0.5em 0;
width: 100%;
float:left;
border-top: 5px solid #692758;
border-bottom: 2px solid #692758;
background:#272627;
}

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

p b.name {font-size:24px; margin-top:5px;}
p b.job {font-size:16px; color:#666;}

/* HEADER Layout Styles */
#header h1 {
background: url(../assets/generic/the-haven-on-the-loch-logo.gif) no-repeat;
text-indent: -9999px;
width:459px;
height: 138px;
margin:0 0 0 15px;
padding:0;
float:left;
}

#header h1 a {
display:block;
width: 492px;
height:117px;
overflow:hidden;
}

#header p.address {
float:right;
color: #272627;
padding: 0 1em;
font-size: 0.75em;
line-height: 1.5em;
text-align: right;
margin-top:25px;
}

#header p a:link, #header a:visited {
color: #272627 ;
text-decoration:none;
}

#header p a:hover, #header a:active {
color: #482640;
text-decoration:underline;
}

/* NAVIGATION Layout Styles */
#navigation ul {
float:left;
margin:20px 0 0 0;
padding:0; 
}

#navigation ul li {
float:left;
display:inline;
list-style-type:none;
padding:0;
margin:0;
}

#navigation ul li a {
height:34px; 
width:400px; 
overflow:hidden; 
display:block;
text-indent:-9999px;
}

#navigation li a:link, 
#navigation li a:visited {background: url(../assets/generic/treatments_button.jpg) no-repeat;}
#navigation li a:hover, 
#navigation li a:active {background-position: 0 -34px;}


#sub_nav ul {
text-align:center;
margin:0 auto;
padding:0;
display: inline;
}


#sub_nav li a {
padding:0 0.5em;
margin:0;
}


#sub_nav li.last {
border: none;
}


#sub_nav li {
list-style-type: none;
display: inline;
color: #fff;
font-size: 0.8em;
font-weight: bold;
border-right: 1px solid;
padding:0;
margin:0;
text-transform:uppercase;
letter-spacing:1px;
} 

#sub_nav li.bottom {
text-transform:none;
letter-spacing:0;
} 

#sub_nav li a:link, #sub_nav li a:visited {
color:#fff;
text-decoration:none;
}

#sub_nav li a:hover, #sub_nav li a:active {
color:#c166ac;
background:url(../assets/generic/nav_bg_roll.gif) top center no-repeat;
padding:7px 0.5em 0 0.5em;
}

#sub_nav li.bottom a:link, #sub_nav li.bottom a:visited {
color:#fff;
text-decoration:none;
}

#sub_nav li.bottom a:hover, #sub_nav li.bottom a:active {
color:#c166ac;
background:url(../assets/generic/nav_bg_roll_bot.gif) bottom center no-repeat;
padding:0 0.5em 6px 0.5em;
}


/* SECOND NAVIGATION Layout Styles */
#secondary ul li{
font-size: 0.75em;
line-height: 2em;
font-weight: bold;
list-style-type: none;
display:inline;
border-right: 1px solid #692758;
}

#secondary ul, #secondary li {
margin:0;
padding:0 0.5em;
}

#secondary li.last {
border:none;
}

#secondary li a:link, #secondary li a:visited {
color:#fff;
text-decoration: none;
}

#secondary li a:hover, #secondary li a:active {
color:#692758;
text-decoration: none;
}

/* Highlight Page Layout Styles - MAIN */
body#treat a#treatnav {background: url(../assets/generic/treatments_button.jpg) no-repeat 0 -34px;}

body#home a#subhomenav,
body#treat a#subtreatnav,
body#club a#clubnav,
body#gv a#giftnav,
body#promo a#promonav,
body#promonth a#promonthnav,
body#info a#infonav,
body#news a#newsnav,
body#contact a#contactsubnav
{
color:#c166ac;
text-decoration:underline;
background:url(../assets/generic/nav_bg_roll.gif) top center no-repeat;
padding:7px 0.5em 0 0.5em;
}

body#gv a#giftnav,
body#info a#infonav,
body#news a#newsnav,
body#contact a#contactsubnav
{
color:#c166ac;
background:url(../assets/generic/nav_bg_roll_bot.gif) bottom center no-repeat;
padding:0 0.5em 6px 0.5em;
}


/* Highlight Page Layout Styles - SECOND*/
body#home a#homenav,
body#work a#worknav,
body#team a#teamnav,
body#brochure a#brochurenav,
body#clients a#clientsnav,
body#contact a#contactnav,
body#find a#findnav,
body#sitemap a#sitemapnav,
body#photo a#photonav
{
color:#692758;
text-decoration:underline;
}


/* BANNER Layout Styles */
#banner h2 {
height: 182px;
width: 760px;
text-indent: -9999px;
margin:0;
padding:0;
}

#banner h2.treatments {background: url(../assets/banner/treatments.jpg) no-repeat top center;}
#banner h2.info {background: url(../assets/banner/information.jpg) no-repeat top center;}
#banner h2.team {background: url(../../shared/team/team2011.jpg) no-repeat top center;}
#banner h2.contact {background: url(../assets/banner/contact-us.jpg) no-repeat top center;}
#banner h2.find {background: url(../assets/banner/how-to-find-us.jpg) no-repeat top center;}
#banner h2.photo {background: url(../assets/banner/photo-gallery.jpg) no-repeat top center;}
#banner h2.clients {background: url(../assets/banner/clients.jpg) no-repeat top center;}
#banner h2.special {background: url(../assets/banner/special-offer.jpg) no-repeat top center;}
#banner h2.workwithus {background: url(../assets/banner/work-with-us.jpg) no-repeat top center;}
#banner h2.thankyou {background: url(../assets/banner/thankyou.jpg) no-repeat top center;}
#banner h2.giftvoucher {background: url(../assets/banner/gift-voucher.jpg) no-repeat top center;}
#banner h2.birthdaybanner {background: url(../assets/banner/birthday.jpg) no-repeat top center;}


/* CONTENT Layout Styles */
#content p {
text-align: justify;
font-size: 0.9em;
float:left;
padding:0.7em;
margin:0;
}

b {color: #482640;}

#content p em {
font-weight:bold;
color: #482640;
}

#content.male p em {
font-weight:bold;
color: #ffe5b8;
}

#content p em.small, span.small {
font-weight:normal;
color: #666;
font-size: 0.9em;
}

#content p.top {
margin-bottom:0.8em;
}

#content p.treatments {
border: 1px solid #999;  
width: 95%;
margin:0.5em 0 0.8em 0.8em;
}

#content p.nobg {
background:none;
}

#content p.wabbit {
background: url(../assets/generic/treatment-bg-stones-bunny.jpg) no-repeat top right;}

#content p.xmas {background: url(../assets/generic/treatment-background-xmas.gif) repeat-y top right;}

#content p.male {
color:#ffe5b8;
background:none;
border: 1px dashed #d21249;
}

#content.male h4 {
color: #d21249;
font-size:1.3em;
text-align:left;
padding: 0 0 0 0.5em;
}

#content b.extra {
font-size:1.4em;
font-weight:bold;
}

.shift {float:left; clear:left; margin-top:10px;}
.shift1 {float:left; margin-top:10px; width:100%;}

span.promosmall {
font-size:0.8em;
line-height: 0.9em;
}

#content img {border:none;}

.gallery {
width:170px;
height: 220px;
padding:0;
margin:5px 5px 0 5px;
float:left;
text-align:center;
}

.gallery p {
float:left;
clear:left;
font-size:0.8em;
line-height: 1em;
padding:0;
margin:0;
}

.gallery img {
text-align:center;
float:left;
}

#content img.lb {

}

#content a:link img.lb, #content a:visited img.lb {
border: 1px solid #000;
margin:0;
padding:5px;
}

#content a:hover img.lb, #content a:active img.lb {
border: 1px solid #999;
}

#content img.find {
float:left;
padding: 0.5em 0.8em 0.5em 0.5em;
}

#content img {
padding: 0.5em 0.8em 0.5em 0.5em;
float:left;
}

#content p.tall {
height:200px;
}

#content a:link, #contenthome a:link, #content a:visited, #contenthome a:visited {
color: #000;
text-decoration:underline;
}

#content a:hover, #contenthome a:hover, #content a:active, #contenthome a:active {
color: #482640;
text-decoration:none;
}

#content p.more a:link, #content p.more a:visited {
color: #643354;
font-weight: bold;
text-decoration:none;
}

#content p.more a:hover, #content p.more a:active {
color: #a77997;
font-weight: bold;
text-decoration:underline;
}


div.treatments {
float:left;
border: 1px solid #CCC;
background:url(../assets/generic/treatment-background-new.gif) no-repeat top right;
width: 96%;
margin:0.5em 0 0.8em 0.8em;
}

div.treatments.half {
	width:350px;
	float:left;
	clear:left;
}
div.treatments.half.right {
	width:370px;
	float:right;
	clear:right;
	margin-right:10px;
}

#content p.treatments {
border: 1px solid #CCC;
background:url(../assets/generic/treatment-background-new.gif) no-repeat top right;
width: 95%;
margin:0.5em 0 0.8em 0.8em;
}

#content img.fr {
float:right;
clear:right;
}

.sitemap {
float:left;
font-weight:bold;
text-align:left;
}

.sitemapright {
padding-right:3em;
float:right;
font-weight:bold;
text-align:left;
}

.sitemap li ul {
font-weight: normal;
}


/* PROMOTION PAGE Layout Styles */
/* ALL THAT NEED ALTERED */



.promopage {
float:left;
margin:10px 0 15px 36px;
padding:0;
width: 688px;
height: 140px;
}

#content img.right {
float:right;
margin:0;
padding:0;
}

#content img.left {
float:left;
margin:0;
padding:10px;
}

.promopage h3 {
text-indent:-9999px;
margin:0;
padding:0;
}

#content p.product {
width:300px;
font-weight:bold;
text-align:left;
padding:40px 0 0 200px;
color:#fff;
line-height:1.2em;
font-size:0.8em;
}

#content p.promop {
padding: 95px 0 0 320px;
color:#cc3333;
line-height:1.2em;
font-size:11px;
}

#content p.promop b {color:#fff}

.promopage a:link, .promopage a:visited {font-weight: bold;}
.promopage a:hover, .promopage a:active {color:#fff;}

#content a.white:link, #content a.white:visited {color:#fff;}
#content a.white:hover, #content a.white:active {color: #cc3333}

#content a.white2:link, #content a.white2:visited {color: #fff}
#content a.white2:hover, #content a.white2:active {color: #000}

/* PROMOTION PAGE graphics adverts */



.promopage.june09promo {background: url(../assets/promotions/june-holistic_ex.jpg) no-repeat;}
.promopage.july09promo {background: url(../assets/promotions/july-holiday_ex.jpg) no-repeat;}
.promopage.august09promo {background: url(../assets/promotions/august-massage_ex.jpg) no-repeat;}
.promopage.sept09promo {background: url(../assets/promotions/sept-organic_ex.jpg) no-repeat;}
.promopage.nov09promo {background: url(../assets/promotions/november-lava_ex.jpg) no-repeat;}
.promopage.spring10_candle {background: url(../assets/promotions/spring_candle_ex.jpg) no-repeat;}
.promopage.july10_beach {background: url(../assets/promotions/july10_beach_ex.jpg) no-repeat;}
.promopage.dec_eyebrow {background: url(../assets/promotions/dec_eyebrow_ex.jpg) no-repeat;}
.promopage.jan_massage {background: url(../assets/promotions/jan_massage_ex.jpg) no-repeat;}
.promopage.feb_march {background: url(../assets/promotions/feb_march_ex.jpg) no-repeat;}
.promopage.spring {background: url(../assets/promotions/spring_ex.jpg) no-repeat;}
.promopage.june {background: url(../assets/promotions/june_dermalogica_ex.jpg) no-repeat;}
.promopage.dermasummer {background: url(../assets/promotions/derma_summer_ex.jpg) no-repeat;}
.promopage.septpic {background: url(../assets/promotions/sept-pic-ex.jpg) no-repeat;}
.promopage.pickmeup {background: url(../assets/promotions/winter-2011-pickmeup_ex.jpg) no-repeat;}
.promopage.warmer {background: url(../assets/promotions/winter-2011-warmer_ex.jpg) no-repeat;}
.promopage.justbe {background: url(../../shared/promotions/feb_justbe.jpg) no-repeat;}


/* PROMOTION PAGE banners */
#banner h2.promo {background: url(../assets/banner/promo-nov.jpg) no-repeat top center;}
#banner h2.product {background: url(../assets/banner/product-nov.jpg) no-repeat top center;}

/* PROMOTION PAGE titles */ 
#content h2.tpromo {background: url(../assets/titles/promo/march-mothers.gif) no-repeat;} 
#content h2.tproduct {background: url(../assets/titles/product-month.gif) no-repeat;} 

/* CONTENT TITLES Layout Styles */

#content h2, #contenthome h2 {
text-align:left;
font-size:18pt;
font-family: 'PercolatorRegular', Arial, sans-serif;
padding:0;
color:#482640;
margin: 0.5em 0 0.5em 0.3em;
}

/*#contenthome h2.welcome {background: url(../assets/titles/welcome.gif) no-repeat;}
#content h2.infotitle {background: url(../assets/titles/information.gif) no-repeat;}
#content h2.teamtitle {background: url(../assets/titles/the-team.gif) no-repeat;}
#content h2.contacttitle {background: url(../assets/titles/contact-us.gif) no-repeat;}
#content h2.gifttitle {background: url(../assets/titles/gift-voucher.gif) no-repeat;}
#content h2.gifttatitle {background: url(../assets/titles/thankyou.gif) no-repeat;}
#content h2.subscribetitle {background: url(../assets/titles/thankyou.gif) no-repeat;}
#content h2.findtitle {background: url(../assets/titles/find-us.gif) no-repeat;}
#content h2.sitetitle {background: url(../assets/titles/sitemap.gif) no-repeat;}
#content h2.treattitle {background: url(../assets/titles/the-haven-treatments.gif) no-repeat;}
#content h2.clubtitle {background: url(../assets/titles/club-haven.gif) no-repeat;}

#content h2.phototitle {background: url(../assets/titles/photo-gallery.gif) no-repeat;}
#content h2.scenetitle {background: url(../assets/titles/scenery.gif) no-repeat;}
#content h2.bbsa07title {background: url(../assets/titles/spa2007.gif) no-repeat;}
#content h2.bbsa08title {background: url(../assets/titles/spa2008.gif) no-repeat;}
#content h2.bbsa09title {background: url(../assets/titles/spa2009.gif) no-repeat;}
#content h2.renotitle {background: url(../assets/titles/renovations.gif) no-repeat;}
#content h2.misctitle {background: url(../assets/titles/misc.gif) no-repeat;}
#content h2.drymentitle {background: url(../assets/titles/drymen_photos.gif) no-repeat;}

#content h2.clientstitle {background: url(../assets/titles/what-our-clients-think.gif) no-repeat;}
#content h2.earstitle {background: url(../assets/titles/ear-piercing.gif) no-repeat;}
#content h2.specialtitle {background: url(../assets/titles/special-offers.gif) no-repeat;} 
#content h2.worktitle {background: url(../assets/titles/work-with-us.gif) no-repeat;} 
#content h2.promonthtitle {background: url(../assets/titles/product-month.gif) no-repeat;} 
*/

#content h3.download, #content h3.downloadprt {
padding:0;
text-indent: -9999px;
float:left;
margin: 0.8em 0 0.2em 0.3em;
}

#content h3.download a:link, #content h3.download a:visited {
display:block;
height:33px;
width:424px;
background:url(../assets/titles/download.gif) no-repeat;
overflow:hidden;
}

#content h3.download a:hover, #content h3.download a:active {
background:url(../assets/titles/download-r.gif) no-repeat;
}

#content h3.downloadprt a:link, #content h3.downloadprt a:visited {
display:block;
height:33px;
width:424px;
background:url(../assets/titles/download-print.gif) no-repeat;
overflow:hidden;
}

#content h3.downloadprt a:hover, #content h3.downloadprt a:active {
background:url(../assets/titles/download-print-r.gif) no-repeat;
}


/* FOOTER Layout Styles */

#footer p {
float:left;
font-size: 0.8em;
text-align:left;
padding: 0.5em 0;
color:#fff;
}

#footer p b {color:#fff;}

#footer p a:link, #footer p a:visited {
text-decoration:none;
color: #fff;
}

#footer p a:hover, #footer p a:active {
text-decoration:underline;
color: #7b416d;
}

#footer p#valid {
float:left;
padding-left: 1.5em;
}

#footer p#build {
line-height:1.3em;
font-size: 0.7em;
float: right;
padding-right: 1.5em;
}


/* Form Layouts */


form#havenform {
width:720px;
padding:10px;  
font-size:1em; 
float:left;
}

form#havenform p {
text-align:left; 
padding:15px 5px 5px 0; 
margin:0;
}

form#havenform fieldset#hidden {
display:none;
}

form#havenform fieldset#feedback p {padding:4px; margin:0;}

form#havenform fieldset {
display:block; 
border:1px dotted #000; 
padding:5px 5px 5px 10px; 
margin-bottom:1em; 
line-height:1.5em;  
float:left;
width:90%;
}

form#havenform fieldset:hover {
border:1px dotted #482640; 
}

form#havenform legend {
font-size:0.9em; 
font-weight:bold; 
border:1px solid #482640; 
margin-bottom:15px; 
padding:6px; 
background: #272627; 
color:#fff;
}

* html form#havenform legend { padding:5px; margin:0;}

form#havenform label {
clear:left; 
display:block; 
float:left; 
width:150px; 
text-align:left; 
padding-right:10px; 
color:#000; 
margin-bottom:0.5em;}

form#havenform label.small {font-size:0.8em; font-weight:bold; padding-right:0;}


form#havenform input {
float:left;
border:1px solid #666; 
padding-left:0.5em; 
margin-bottom:0.6em; 
width:280px; 
background:#936988;
color: #000;
}

form#havenform input.thin {
width:200px; 
}

fieldset#interest input {
width: 20px;
padding-top: 0.5em; 
}


form#havenform input:hover { background:#fff; border:1px solid #272627; color:#272627;}
form#havenform input:focus {background:#fff; border:1px solid #272627; color:#272627;}

form#havenform select {margin:0 0 1em 0.5em;}

form#havenform textarea {
float:left;
width:410px; 
height:10em; 
border:1px solid #666; 
padding:0.5em; 
overflow:auto;
background: #936988;
color:#000;
}

form#havenform textarea:hover { background:#fff; border:1px solid #482640; color:#000;}
form#havenform textarea:focus {background:#fff; border:1px solid #482640; color:#000;}


form#havenform #button1, form#havenform #button2 {
clear:right;
color:#fff; 
padding-right:0.5em; 
cursor:pointer; 
width:205px; 
margin-left:8px; 
background: #482640; 
border:1px solid; 
border-color: #999 #999 #333 #333;
}

form#havenform #button1:hover, form#havenform #button2:hover {
color:#fff; 
background:#272627; 
border:1px solid; 
border-color:#333 #333 #999 #999; 
}

form#payform {
padding:1em;
}

form#payform input {
padding: 1em 0;
}