* { 
margin: 0;
padding: 0;
}

body {
background: #dddddd url(/images/.design/ol_bg_sand_01.jpg) top left repeat;
color: #383838;
font-family: arial, helvetica, verdana, sans-serif;
font-size: 12px;
text-align: center; /* for IE with luv */
}

/* Semantic Content Styles */
/* -------------------------------- */

h1, h2, h3, h4, h5, h6 {line-height: 1.5em;}
h1 {font-size: 24px;}
h2 {font-size: 20px;}
h3 {font-size: 16px;}
h4 {font-size: 12px;}
h5 {font-size: 11px;}
h6 {font-size: 9px;}
p {font-size: 12px;}
strong, b {font-weight: bold;}
em, i {font-style: italic;}
img {border: 0;} /* keeps IE from always drawing a border around hyperlinked images */
code {font-family: courier new, courier, monospace;}

/* Hyperlink Styles */
/* -------------------------------- */

a {color: #999; text-decoration: underline;}
a:hover {color: #aaa; text-decoration: none;}

/* Form Styles */
/* -------------------------------- */

input.text {} /* to stylize different types of inputs I need to give them classes, because IE doesn't support [attribute] CSS selectors */
input.radio, input.checkbox {border: 0; background: transparent;} /* keeps browsers from inadvertently drawing borders around these elements, and fixes an awful looking background-color overflow problem in IE */
input.image {border: 0;} /* keeps browsers from in advertently drawing borders around these elements */

/* Layout Styles */
/* -------------------------------- */

div#wrapper {
position: relative;
width: 780px;
margin: 0 auto 0 auto;
text-align: left;
background: url(/images/.design/osbody_bg_01.gif) top left repeat-y;
}

div#whopper {
position: relative;
width: 760px;
padding-left: 10px;
}

div#main {
position: relative;
width: 760px;
background: url(/images/.design/oscontentFooter_bg_01.gif) bottom left no-repeat;
}

div#header {
position: relative;
width: 760px;
height: 98px;
}

div#headerLogo {
position: relative;
width: 468px;
height: 98px;
float: left;
}
div#headerLogo h1 {}
div#headerLogo h1 a { /* typically do an image replacement for the text and logo, here */
display: block;
width: 468px;
height: 98px;
text-decoration: none;
font: normal 24px/1.6em verdana, helvetica, arial, sans-serif;
text-indent: -9999px;
background: url(/images/.design/osheaderLogo_bg_01.jpg) top left no-repeat;
}

div#headerRight {
position: relative;
width: 292px;
height: 98px;
float: right;
}
div#headerRight h1 {}
div#headerRight h1 a { /* typically do an image replacement for the text and logo, here */
display: block;
width: 292px;
height: 98px;
text-decoration: none;
font: normal 24px/1.6em verdana, helvetica, arial, sans-serif;
text-indent: -9999px;
background: url(/images/.design/osheaderRight_bg_01.jpg) top left no-repeat;
}

div#postHeader {
position: relative;
width: 760px;
height: 18px;
background: url(/images/.design/ospostHeader_bg_01.gif) top left repeat-x;
}

div#colOne {
position: relative;
width: 184px;
float: left;
border-right: 1px solid #FFFFFF;
}

div#colTwo {
position: relative;
width: 575px;
float: right;
}

div#mainImage {
position: relative;
width: 575px;
height: 250px;
background: url(/images/.design/osmainImage_bg_01.jpg) top left no-repeat;
}

div#preFooter {
position: relative;
width: 760px;
height: 90px;
border-bottom: 1px solid #FFFFFF;
background: url(/images/.design/osfooterBoxes_bg_01.gif) top left repeat-y;
}

div#leftBox {
position: relative;
width: 506px;
float: left;
}

div#rightBox {
position: relative;
width: 254px;
float: right;
}

div#spaBox {
position: relative;
height: 90px;
width: 236px;
float: left;
}
div#spaBox h1 {}
div#spaBox h1 a {
display: block;
width: 236px;
height: 98px;
text-indent: -9999px;
background: url(/images/.design/spa_special_btn1_ani.gif) top left no-repeat;
}

div#pamperBox {
position: relative;
width: 185px;
height: 80px;
float: right;
padding: 5px 3px 5px 80px;
background: url(/images/.design/osfooterPamper_bg_01.jpg) 5px 0px no-repeat;
}
div#pamperBox p {
color: #FFFFFF;
font-family: arial, verdana, sans-serif;
font-size: 12px;
padding: 0;
}
div#pamperBox p a {
color: #FFFFFF;
text-decoration: none;
}
div#pamperBox p a:hover {
text-decoration: underline;
}

div#overleafBox {
position: relative;
width: 179px;
height: 90px;
padding: 0 0 0 75px;
color: #FFFFFF;
font-family: arial, verdana, sans-serif;
font-size: 12px;
background: url(/images/.design/osfooterOverleaf_bg_01.jpg) 5px 0px no-repeat;
}
div#overleafBox p {
text-align: left;
color: #FFFFFF;
font-family: arial, verdana, sans-serif;
font-size: 11px;
padding: 7px 0 0 7px;
}
div#overleafBox a {
color: #FFFFFF;
font-size: 10px;
text-decoration: none;
}
div#overleafBox a:hover {
text-decoration: underline;
}
div#overleafBox table {
text-align: center;
}

div#postFooter {
position: relative;
width: 780px;
height: 40px;
margin: 0 auto 0 auto;
text-align: left;
background: url(/images/.design/ospostFooter_bg_01.gif) top left no-repeat;
}
div#postFooter p {
padding-top: 15px;
color: #333333;
font-family: arial, verdana, sans-serif;
font-size: 10px;
text-align: center;
}

div#overleafSpa {
position: absolute;
top: 38px;
left: 564px;
}
div#overleafSpa h1 {}
div#overleafSpa h1 a { /* typically do an image replacement for the text and logo, here */
display: block;
width: 195px;
height: 36px;
text-decoration: none;
font: normal 24px/1.6em verdana, helvetica, arial, sans-serif;
text-indent: -9999px;
background: url(/images/.design/osoverleafSpa_bg_02.jpg) top left no-repeat;
}

div#contentHeader {
position: relative;
width: 575px;
height: 120px;
}

html>body div#colTwo {
height: auto;
}

/* Content Area Styles */
/* -------------------------------- */

div#content {
position: relative;
width: 545px;
padding: 0 20px 0 10px;
font-family: arial, verdana, helvetica, sans-serif;
font-size: 12px;
overflow: hidden;
}
div#content p, div#content li {font-size: 12px; line-height: 1.3em;}
div#content p {padding: 3px 40px 3px 0px; line-height: 1.2em;}
div#content li {}
div#content ul, div#content ol { /* these are pretty good default values... i rarely customize these */
margin: 0 0 0 25px;
padding: 3px 10px 4px 15px;
list-style-image: url(/images/Images/Overleaf_Spa/osULTag_bg_02.gif);
}
div#content ul li {
line-height: 1.5em;
font-size: 12px;
color: #663300;
font-weight: bold;
}
div#content li {
padding: 0 0 5px 0;
}
div#content ul li a {
text-decoration: underline;
line-height: 1.5em;
font-size: 12px;
color: #663300;
font-weight: bold;
}
div#content h1, 
div#content h2, 
div#content h3, 
div#content h4, 
div#content h5, 
div#content h6 {
padding: 5px 0 5px 0;
line-height: 1.3em; 
color: #663300;
}
div#content h1 {font-size: 18px;}
div#content h2 {font-size: 16px;}
div#content h3 {font-size: 14px;}
div#content h4 {font-size: 13px;}
div#content h5 {font-size: 12px;}
div#content h6 {font-size: 11px;}
div#content a {
color: #663300;
text-decoration: none;
}
div#content a:hover {text-decoration: underline;}
div#content img {
border: 1px solid #DDDDDD;
padding: 2px;
}

div#footer {
height: 23px;
clear: both;
}

/* Navigation Styles */
/* -------------------------------- */

div#nav {
width: 184px;
position: relative;
}
div#nav ul {
list-style: none;
}
div#nav ul li {display: inline;}
div#nav ul li a {
display: block;
width: 184px;
padding: 5px 0 2px 0;
color: #FFFFFF;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
line-height: 22px;
text-decoration: none;
text-indent: 35px;
background: #C3AB71 url(/images/.design/osdragonfly_bg_01.gif) 5px 5px no-repeat;
border-bottom: 1px solid #FFFFFF;
}
div#nav ul li.current a, div#nav ul li.on a {
text-decoration: underline;
background: #AD9562 url(/images/.design/osdragonfly_bg_02.gif) 5px 5px no-repeat;
}
div#nav ul li a:hover {
background: #AD9562 url(/images/.design/osdragonfly_bg_02.gif) 5px 5px no-repeat;
}
div#nav ul ul {} /* styles for nested sub navigation */
div#nav ul ul li {}

div#nav ul ul li a, div#nav ul li.current ul li a {
width: 174px;
padding-left: 10px;
font-size: 11px;
line-height: 15px;
height: 15px;
background: #CEBA8B url(/images/.design/ossecNav_bg_01.gif) 35px 13px no-repeat;
}
div#nav ul ul li.current a, div#nav ul li.current ul li a {
text-decoration: underline;
background: #CEBA8B url(/images/.design/ossecNav_bg_01.gif) 35px 13px no-repeat;
}
div#nav ul ul li a:hover {
background: #CEBA8B url(/images/.design/ossecNav_bg_01.gif) 35px 13px no-repeat;
text-decoration: underline;
}
div#nav ul li.on ul li a {
background: #CEBA8B;
text-decoration: none;
}
div#nav ul li.on ul li.on a {
text-decoration: underline;
}

div#footerNav {
position: relative;
width: 570px;
}
div#footerNav ul {
padding-left: 15px;
list-style: none; 
text-align: left;
}
div#footerNav ul li {
display: inline; 
line-height: 23px;
padding: 0 3px 0 3px;
border-right: 1px solid #FFFFFF;
}
div#footerNav ul li.mlast {
border: 0;
}
div#footerNav ul li a {
color: #FFFFFF;
font-family: arial, verdana, helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
line-height: 13px;
}
div#footerNav ul li a:hover {
text-decoration: underline; 
}
div#footerNav ul ul {display: none;}

/* Search Form Styles */
/* -------------------------------- */

div#search {
position: relative;
height: 70px;
width: 165px;
padding: 20px 0 0 5px;
}
div#search p {
color: #FFFFFF;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
padding-bottom: 3px;
}
div#search div#searchnow {
float:left;
}
input#searchboxer {
position: relative;
width: 161px;
height: 19px;
border: 1px solid #666666;
background: #FFFFFF;
vertical-align: text-middle;
text-align: left;
text-indent: 3px;
margin-bottom: 5px;
}
input#gobabygo {
position: relative;
vertical-align: text-bottom;
}
div#search img {}
div#search input {}
div#search input.text { /* remember to assign the class to the HTML elements */
padding: 2px;
color: #999;
}

div#searchRelated {float: right; clear: right; width: 150px;}
div#searchRelated span.description {}

/* Print and Email Styles */
/* styles for "print this page" and "email this page" container, links */
/* -------------------------------- */

div#pande {
position: absolute;
top: 5px;
right: 20px;
}
div#pande p {padding: 0;}
div#pande p a {
color: #FFFFFF;
font-size: 10px; 
text-decoration: none;
}
div#pande p a:hover {text-decoration: underline;}

/* menu PDF
/* -------------------------------- */

div#menuPDF {
width: 184px;
position: relative;
}
div#menuPDF ul {
list-style: none;
}
div#menuPDF ul li {display: inline;}
div#menuPDF ul li a {
display: block;
width: 184px;
padding: 5px 0 2px 0;
color: #FFFFFF;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
line-height: 22px;
text-decoration: none;
text-indent: 25px;
background: url(/images/.design/pdficon_small.gif) 5px 5px no-repeat;
}
div#menuPDF ul li a:hover {
}

/* Common Styles */
/* aside from .current, .designed and .powered, these are never changed.  never ever. */
/* -------------------------------- */

.current {}
.powered {
position: absolute;
top: 38px;
left: 15px;
}
.designed {}

.subHeader {
text-indent: -9999px;
margin: 10px 0 10px 0;
height: 20px;
}
.aromatherapy {background: url(/images/Images/Overleaf_Spa/osheaderAromatherapy_bg_01.jpg) top left no-repeat;}
.relaxation {background: url(/images/Images/Overleaf_Spa/osheaderRelaxation_bg_01.jpg) top left no-repeat;}
.deep{background: url(/images/Images/Overleaf_Spa/osheaderDeep_bg_01.jpg) top left no-repeat;}
.sea{background: url(/images/Images/Spa_Images/osheaderSea_bg_01.jpg) top left no-repeat;}
.expectant {background: url(/images/Images/Overleaf_Spa/osheaderExpectant_bg_01.jpg) top left no-repeat;}


.couplesmassage {background: url(/images/Images/Spa_Images/osheaderCouples_bg_01.jpg) top left no-repeat;}
.facesoul {background: url(/images/Images/Spa_Images/osheaderRenewing_bg_01.jpg) top left no-repeat;}
dragonfly {width: 237px;background: url(/images/Images/Overleaf_Spa/osdragonflyHeader_bg_01.gif) top left no-repeat;}
.offerings {background: url(/images/Images/Overleaf_Spa/osspaOfferingsHeader_bg_01.gif) top left no-repeat;}
.bodycare {background: url(/images/Images/Overleaf_Spa/osbodyCareHeader_bg_01.gif) top left no-repeat;}
.vichy {background: url(/images/Images/Overleaf_Spa/osVichyHeader_bg_01.jpg) top left no-repeat;}
.cran {background: url(/images/Images/Spa_Images/osCranHeader_bg_01.jpg) top left no-repeat;}
.mud {background: url(/images/Images/Spa_Images/osMudHeader_bg_01.jpg) top left no-repeat;}
.seaweed {background: url(/images/Images/Overleaf_Spa/osseaweedHeader_bg_01.jpg) top left no-repeat;}
.honey {background: url(/images/Images/Overleaf_Spa/oshoneyHeader_bg_01.jpg) top left no-repeat;}
.honey2 {background: url(/images/Images/Spa_Images/oshoneyHeader_bg_02.jpg) top left no-repeat;}
.peppermint {background: url(/images/Images/Overleaf_Spa/ospeppermintHeader_bg_01.jpg) top left no-repeat;}
.european {background: url(/images/Images/Overleaf_Spa/oseuropeanHeader_bg_01.jpg) top left no-repeat;}
.european2 {background: url(/images/Images/Spa_Images/Facial_Treatment/oseuropeanHeader_bg_02.jpg) top left no-repeat;}
.aging {background: url(/images/Images/Spa_Images/osageHeader_bg_01.jpg) top left no-repeat;}
.seaweedFacial {background: url(/images/Images/Overleaf_Spa/osseaweedFacialHeader_bg_01.jpg) top left no-repeat;}
.hydra {background: url(/images/Images/Overleaf_Spa/oshydraHeader_bg_01.jpg) top left no-repeat;}
.ultimate {background: url(/images/Images/Overleaf_Spa/osultimateHeader_bg_01.jpg) top left no-repeat;}
.seaEscape {margin-left: 288px;background: url(/images/Images/Overleaf_Spa/osseaEscapeHeader_bg_01.jpg) top left no-repeat;}
.seaEscape2 {background: url(/images/Images/Spa_Images/Facial_Treatment/osheaderSea_bg_02.jpg) top left no-repeat;}
.vita {margin-left: 288px;background: url(/images/Images/Overleaf_Spa/osvitaHeader_bg_01.jpg) top left no-repeat;}
.vita2 {background: url(/images/Images/Overleaf_Spa/osvitaHeader_bg_01.jpg) top left no-repeat;}
.gentlemen {margin-left: 288px;background: url(/images/Images/Overleaf_Spa/osgentlemenHeader_bg_01.jpg) top left no-repeat;}
.facials {background: url(/images/Images/Overleaf_Spa/osfacialsHeader_bg_01.gif) top left no-repeat;}
.massages {background: url(/images/Images/Overleaf_Spa/osmassagesHeader_bg_01.gif) top left no-repeat;}
.spaVisit {background: url(/images/Images/Overleaf_Spa/osspaVisitHeader_bg_01.gif) top left no-repeat;}
.appointment {background: url(/images/Images/Overleaf_Spa/osappointmentHeader_bg_01.jpg) top left no-repeat;}
.arrival {background: url(/images/Images/Overleaf_Spa/osarrivalHeader_bg_01.jpg) top left no-repeat;}
.location {background: url(/images/Images/Overleaf_Spa/oslocationHeader_bg_01.jpg) top left no-repeat;}
.comfort {background: url(/images/Images/Overleaf_Spa/oscomfortHeader_bg_01.jpg) top left no-repeat;}
.healing {background: url(/images/Images/Overleaf_Spa/oshealingHeader_bg_01.jpg) top left no-repeat;}
.lateArrival {background: url(/images/Images/Overleaf_Spa/oslateArrivalHeader_bg_01.jpg) top left no-repeat;}
.attire {background: url(/images/Images/Overleaf_Spa/osattireHeader_bg_01.jpg) top left no-repeat;}
.cancellations {margin-left: 221px;background: url(/images/Images/Overleaf_Spa/oscancellationHeader_bg_01.jpg) top left no-repeat;}
.children {margin-left: 221px;background: url(/images/Images/Overleaf_Spa/oschildrenHeader_bg_01.jpg) top left no-repeat;}
.gratuities {margin-left: 221px;background: url(/images/Images/Overleaf_Spa/osgratuitiesHeader_bg_01.jpg) top left no-repeat;}
.repechageOffer {background: url(/images/Images/Overleaf_Spa/osrepechageOfferHeader_bg_0.gif) top left no-repeat;}
.hydro {background: url(/images/Images/Overleaf_Spa/oshydroHeader_bg_01.gif) top left no-repeat;}
.facilities {background: url(/images/Images/Overleaf_Spa/osheaderFacilities_bg_02.jpg) top left no-repeat;}
.waxing {background: url(/images/Images/Overleaf_Spa/oswaxingHeader_bg_01.gif) top left no-repeat;}
.alacarte {background: url(/images/Images/Spa_Images/osalacarteHeader_bg_01.gif) top left no-repeat;}
.spahome {height: 90px;background: url(/images/Overleaf_Spa/osspahomeHeader_bg_01.jpg) top left no-repeat;}
.otherServices {background: url(/images/Images/Overleaf_Spa/osotherServicesHeader_bg_01.gif) top left no-repeat;}
.quality {background: url(/images/Images/Overleaf_Spa/osqualityProductsHeader_bg_.gif) top left no-repeat;}
.repechage {margin-left: 115px;background: url(/images/Images/Overleaf_Spa/osrepechageHeader_bg_01.gif) top left no-repeat;}
.beeswax {background: url(/images/Images/Overleaf_Spa/osbeeswaxHeader_bg_01.gif) top left no-repeat;}
.innersense {background: url(http://www.overleafspa.com/images/products/innerse-product-header.gif) top left no-repeat;}
.dermalogica {margin-top: 20px;background: url(/images/Images/Overleaf_Spa/osredermalogicaHeader_bg_01.gif) top left no-repeat;}
.harmony {background: url(/images/Images/Overleaf_Spa/osreharmonyHeader_bg_01.gif) top left no-repeat;}
.steam {width: 220px;background: url(/images/Images/Overleaf_Spa/osheaderSteam_bg_01.jpg) top left no-repeat;}
.oceanview {background: url(/images/Images/Overleaf_Spa/osheaderOceanView_bg_01.jpg) top left no-repeat;}
.detox {background: url(/images/Images/Overleaf_Spa/osheaderDetox_bg_01.jpg) top left no-repeat;}
.detox2 {background: url(/images/Images/Spa_Images/osheaderDetox_bg_02.jpg) top left no-repeat;}
.aroma {background: url(/images/Images/Overleaf_Spa/osheaderAroma_bg_01.jpg) top left no-repeat;}
.aroma2 {background: url(/images/Images/Spa_Images/osheaderAroma_bg_02.jpg) top left no-repeat;}
.green {background: url(/images/Images/Overleaf_Spa/osheaderGreen_bg_01.jpg) top left no-repeat;}
.green2 {background: url(/images/Images/Spa_Images/osheaderGreen_bg_02.jpg) top left no-repeat;}
.sip {background: url(/images/Images/Overleaf_Spa/osheaderSip_bg_01.jpg) top left no-repeat;}
.chrome {background: url(/images/Images/Overleaf_Spa/osheaderChrome_bg_01.jpg) top left no-repeat;}
.chrome2 {background: url(/images/Images/Spa_Images/osheaderChrome_bg_02.jpg) top left no-repeat;}
.gallery {background: url(/images/Images/Overleaf_Spa/osgalleryHeader_bg_01.gif) top center no-repeat;}
.privacy {background: url(/images/Overleaf_Spa/osprivacyHeader_bg_01.gif) top left no-repeat;}
.contact {background: url(/images/Images/Spa_Images/oscontactHeader_bg_01.gif) top left no-repeat;}
.spaTour {background: url(/images/Images/Spa_Images/osspaTourHeader_bg_01.gif) top center no-repeat;}
.gift {background: url(/images/Images/Spa_Images/osgiftCertsHeader_bg_01.gif) top left no-repeat;}
.cookies {margin-left: 298px;background: url(/images/Images/Spa_Images/oscookiesHeader_bg_01.gif) top left no-repeat;}
.teaForte {background: url(/images/Images/Spa_Images/osHeaderTeaForte_bg_01.gif) top left no-repeat;}

.imagePadRight {float: right; padding: 0px 40px 10px 10px;}
.imagePadLeft {float: left; padding: 0px 10px 10px 0px;}
.hr01 {margin: 10px 0 10px 0;line-height: 1px; border-bottom: 3px double #C3AB71;}
.hide {display: none;}
.cloak {visibility: hidden;}

.floatL {float: left;}
.floatR {float: right;}

.clear {clear: both; line-height: 1px; height: 1px;}
.clearL {clear: left;}
.clearR {clear: right;}

.center {text-align: center;}
.left {text-align: left;}
.right {text-align: right;}

table {
font-family: arial, verdana, helvetica, sans-serif;
font-size: 12px; 
line-height: 1.3em;
}

table.map p {margin-left: 5px;}
table.mile {text-indent: 5px; line-height: 17px;}

.purefocus {background: url(/images/Images/Spa_Images/osheader-PureFocus.jpg) top left no-repeat;} 
.botanical {background: url(/images/Images/Spa_Images/osheader-Botanical.jpg) top left no-repeat;} 
.elemental_nature {background: url(/images/Images/Spa_Images/osheader-ElementalNature.jpg) top left no-repeat;}

