/* colours
#B30538 red
#C1D82E green
#FCF4D1 content background
#F3E9BA menu background
#E5DAA4 menu hover and ad background
#D6CA8E page background
#BCB074 dashed border colour
*/

/* creates persistent vertical scroll bar in Safari, Firefox (Mac) and Mozilla (Mac) to prevent horizontal shifting of #outerBox div when vertical scroll bar disappears */
html, body {
	height: 100%;
	}

body {
	margin: 15px 0px 0px 0px;
	padding: 0px; /* need to set body margin and padding to get consistency between browsers. */
	background-color: #D6CA8E;
	background-image: url("../images/bms.gif");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: 0% 50%;
	color: #000000;
	font-family: Garamond, AGaramond, "Adobe Garamond", Minion, "Times New Roman", Times, serif;
	font-size: 14px;
	text-align: center; /* hack for IE5/Win to centre outerBox div */
	}

table {
	width: 450px;
	background-color: #F3E9BA;
	color: #000000;
	/*border: solid thin #D6CA8E;*/
	}

th {
	background-color: #B30538;
	color: #ffffff;
	padding: 5px;
    }

td {
	padding: 5px;
	}
	
#subscribeform td {
  padding: 3px;
}
	
a img {
	border: 0;
	}

.altrow {
	background-color: #D6CA8E;
	color: #3f2a13;
	}

/* this is for the embedded Google Map */
#map {
   width: 400px; 
   height: 300px;
   background-color: #FCF4D1;
   color: #000000;
   margin-bottom: 15px;
   }
	
/* floating image id to place the image over the page content id in the layout */
#imageFloat {
   position: absolute;
   top: 245px;
   left: 70px;
   z-index: 1;
   width: 255px;
   height: 240px;
   background-color: #FCF4D1;
   color: #000000;
   float: right;
   visibility: hidden;
   }

/* invisible div for top-of-page named anchor */
#top {
	position: absolute;
	top: 0px;
	height: 1px;
	}

/* outermost container div that centres everything horizontally */
#outerBox {
	width: 780px;
	margin: 0px auto; /* right and left margin widths set to "auto" to centre outerBox div */
	padding: 0px;
	text-align: left; /* counteract IE5/Win hack in body selector */
	}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  
	top banner
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

/* top banner container for three sliced images */
#banner {
	position: relative;
	width: 100%;
	height: 165px;
	margin: 0px;
	padding: 0px;
	background-color: transparent;
	color: #FCF4D1;
	}

/* logo div and left edge of drop shadow */
#banner #image1 {
	width: 440px;
	height: 165px;
	margin: 0px;
	padding: 0px;
	background-color: transparent;
	}

/* banner images div */
#banner #image2 {
	position: absolute;
	top: 0px;
	left: 440px;
	width: 315px;
	height: 165px;
	margin: 0px;
	padding: 0px;
	}

/* right edge of drop shadow div */
#banner #image3 {
	position: absolute;
	top: 0px;
	left: 755px;
	width: 25px;
	height: 165px;
	margin: 0px;
	padding: 0px;
	}

/* removes extra space inserted below image in IE6/Win */
#banner #image1 img,
#banner #image2 img,
#banner #image3 img {
	display: block;
	}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  
	content, menu and footer divs
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

/* inner container that holds divs for content and menu */
#innerBox {
	position: relative; /* required to establish containing box for topOfPage div's absolute positioning */
	width: 740px; /* explicit width or height required for IE6/Win to establish div as "having layout" so subsequent absolute positioned box will recognize it as the containing ancestor */
	margin: 0px 0px 0px 40px;
	padding: 0px;
	background-image: url("../images/content.gif"); /* content area background and drop shadow */
	background-color: transparent;
	
	}

/* left div for page content */
#content {
	float: left;
	display: inline; /* fixes "doubled float margin" bug in IE/Win (see: http://www.positioniseverything.net/explorer/doubled-margin.html) */
	width: 459px;
	margin-left: 25px;
	padding: 0px 35px 10px 35px; /* set text margins */
	border: 1px solid #FCF4D1; /* removes top margin */
	background-color: transparent;
	}

/* right div for menu */
#menu {
	float: right;
	display: inline; /* fixes "doubled margin float" bug in IE/Win */
	width: 158px;
	margin-right: 25px;
	padding: 0px 0px 50px 0px; /* bottom padding leaves space for #topOfPage div */
	background-color: #F3E9BA;
	/*border-left: 3px solid #000;FCF4D1 */
	}

/* text contact to appear under menu */
#menu .contact {
	width: 126px;
	margin: 2em auto 0 auto;
	padding: 5px;
	border-top: 3px solid #C6BA7F;
	border-left: 3px solid #C6BA7F;
	border-right: 3px solid #FCF4D1;
	border-bottom: 3px solid #FCF4D1;
	background-color: #E5DAA4;
	font-size: .90em;
	line-height: 1.4em;
	text-align: center;
	}
#phone {
	padding-top: 5px; 
	color: #B30538; 
	font-size: 1.6em; 
	font-weight: bold;
	}
	
#email a:link,
#email a.visited,
#email a.focus,
#email a.hover,
#email a.active  {
	color: #B30538; 
	background-color: transparent;
	}

/* div for top of page link */
/* doesn't work in IE5/Mac. positions itself relative to banner area */
#topOfPage {
	position: absolute;
	right: 25px;
	bottom: 85px;
	width: 156px;
	background-color: #F3E9BA;
	}

/* footer links and copyright text */
#footer {
	clear: both;
	width: 620px;
	margin-left: 25px;
	padding: 10px 35px 10px 35px;
	background-color: #B30538;
	color: #C1D82E; /*#F3E9BA;*/
	text-align: center;
	font-weight: bold;
	}

/* contains image for bottom border and drop shadow */
#bottom {
	height: 30px;
	}

/* removes extra space inserted below image in IE6/Win */
#bottom img {
	display: block;
	}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  
	headings
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

h1 {
	margin-top: 15px;
	margin-bottom: 10px;
	padding-left: 30px;
	padding-top: 10px; /* to ensure background image isn't cropped */
	background: url("../images/h1.gif") #FCF4D1 0% 0% no-repeat;
	color: #B30538;
	font-size: 1.75em;
	font-weight: bold;
	}

h2 {
	margin-bottom: 10px;
	padding-top: 10px;
	color: #B30538;
	font-size: 1.5em;
	font-weight: bold;
	}

h3 {
	margin-bottom: 10px;
	padding-top: 10px;
	color: #B30538;
	font-size: 1.35em;
	font-weight: bold;
	}

h4 {
	margin-bottom: 0px;
	padding-top: 10px;
	color: #B30538;
	font-size: 1.15em;
	font-weight: bold;
	}



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  
	content formatting
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

p, dl {
	background-color: #FCF4D1;
	line-height: 1.5em;
	}

ul, ol {
	line-height: 1.35em;
	}

ul.compact {
	line-height: 1em;
	}

ul li, ol li {
	padding: .25em 0 .25em 0;
	background-color: #FCF4D1;
	}

dl dt {
	font-weight: bold;
	}

/* black border with transparent background */
.boxedText {
	background-color: #C1D82E; 
	color: #000; 
	padding: 1ex;
	border: 1px dashed #000;
	}

/* black border with darker background */
.boxedTextDark {
	background-color: #F3E9BA; 
	color: #000; 
	padding: 1ex;
	border: 1px dashed #000;
	}

hr {
	height: 1px;
	color: #000;
	}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  
	massage and package descriptions 
	(enclose a series of these in a div with .service class)
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

/* service title */
#content .service h2 {
	margin-bottom: .5em; 
	border-bottom: 1px solid #000;
	background-color: #FCF4D1;
	color: #000;
	font-size: 1em;
	font-weight: bold;
	}

/* service description */
#content .service p {
	margin-top: 0px;
	}

/* list of durations and prices */
#content .service ul {
	margin-bottom: 0px;
	}

/* use regular unordered list for simple, single-line durations and prices */
#content .service ul li {
	line-height: 1em;
	}

/* assign class of .multiline to unordered lists with durations, prices and additional info (multiline list items) */
#content .service ul.multiline li {
	padding-bottom: .5em;
	line-height: 1.35em;
	}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  
	esthetics descriptions 
	(enclose each esthetics service in a div with .esthetics class)
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

#content .esthetics {
	position: relative;
	width: 458px;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	}

/* div enclosing divs for service name and price */
#content .esthetics .title {
	margin-bottom: .5em;
	padding-top: 1em;
	padding-bottom: 3px;
	border-bottom: 1px solid #000;
	}

#content .esthetics .title .name {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 90%;
	}

#content .esthetics .title .name h2 {
	margin-bottom: .5em; 
	color: #000;
	font-size: 1em;
	font-weight: bold;
	display: inline;
	}

#content .esthetics .title .price {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 10%;
	font-weight: bold;
	text-align: right;
	}

/* service description */
#content .esthetics p {
	margin-top: 0px;
	}

/* list of durations and prices */
#content .esthetics ul {
	
	}

/* use regular unordered list for simple, single-line durations and prices */
#content .esthetics ul li {
	line-height: 1em;
	}

/* assign class of .multiline to unordered lists with durations, prices and additional info (multiline list items) */
#content .esthetics ul.multiline li {
	padding-bottom: .5em;
	line-height: 1.35em;
	}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  
	faux two-column table
	 - only works if content in 2nd column is the same length or shorter than 
	   content in the first column. (The first column's content expands the
	   twoColumnDiv.)
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

#content .twoColumnDiv {
	position: relative;
	width: 400px;
	margin-left: 30px;
	}

#content .twoColumnDiv .colOne {
	width: 190px;
	}

#content .twoColumnDiv .colTwo {
	position: absolute;
	top: 0px;
	left: 210px; /* 20px space between columns */
	width: 190px;
	}

#content .twoColumnDiv h2 {
	margin-top: 0px;
	color: #000;
	font-size: 1em;
	font-weight: bold;
	}



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  
	menu hyperlinks - image preload
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

/* Method to preload hover and URHere images. Assign them as background images on elements that don't have backgrounds and position them off-screen. Assign a transparent background to avoid changing the background of the selector element.
http://www.ilovejackdaniels.com/css/preloading-images-with-css/ */
#banner #image1 {
	background: url("../images/menuBullet_lg_hover.gif") transparent -1000px -1000px no-repeat;
	}
#banner #image2 {
	background: url("../images/menuBullet_sm_hover.gif") transparent -1000px -1000px no-repeat;
	}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  
	menu hyperlinks - main categories
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

#menu a.main:link,
#menu a.main:visited,
#menu a.main:focus,
#menu a.main:hover,
#menu a.main:active {
	display: block;
	padding: 6px 10px 4px 30px;
	border-bottom: 1px dashed #BCB074;
	font-family: Garamond, AGaramond, "Adobe Garamond", Minion, "Times New Roman", Times, serif;
	font-size: .9em;
	text-decoration: none;
	}

#menu a.main:link,
#menu a.main:visited,
#menu a.main:focus {
	background: url("../images/menuBullet_lg.gif") transparent 1% 0% no-repeat;
	color: #000;
	}

#menu a.main:focus {
	outline-style: none; /* http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines */
	}

#menu a.main:hover,
#menu a.main:active {
	background: url("../images/menuBullet_lg_hover.gif") #C1D82E 1% 0% no-repeat;
	color: #B30538;
	}

.mainURHere {
	display: block;
	padding: 6px 10px 4px 30px;
	border-bottom: 1px dashed #BCB074;	
	border-left: 2px solid #FCF4D1;
	margin-left: -2px;
	background-color: #FCF4D1;
	color: #000;
	font-family: Garamond, AGaramond, "Adobe Garamond", Minion, "Times New Roman", Times, serif;
	font-size: .9em;
	font-weight: bold;
	}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  
	menu hyperlinks - subcategories
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

#menu a.sub:link,
#menu a.sub:visited,
#menu a.sub:focus,
#menu a.sub:hover,
#menu a.sub:active {
	display: block;
	padding: 6px 15px 4px 45px;
	border-bottom: 1px dashed #BCB074;
	font-family: Garamond, AGaramond, "Adobe Garamond", Minion, "Times New Roman", Times, serif;
	font-size: .9em;
	text-decoration: none;
	}

#menu a.sub:link,
#menu a.sub:visited,
#menu a.sub:focus {
	background: url("../images/menuBullet_sm.gif") transparent 1% 0% no-repeat;
	color: #000;
	}

#menu a.sub:focus {
	outline-style: none;
	}

#menu a.sub:hover,
#menu a.sub:active {
	background: url("../images/menuBullet_sm_hover.gif") #C1D82E 1% 0% no-repeat;
	color: #B30538;
	}

.subURHere {
	display: block;
	padding: 6px 15px 4px 45px;
	border-bottom: 1px dashed #BCB074;
	border-left: 2px solid #FCF4D1;
	margin-left: -2px;
	background-color: #FCF4D1;
	color: #000;
	font-family: Garamond, AGaramond, "Adobe Garamond", Minion, "Times New Roman", Times, serif;
	font-size: .9em;
	font-weight: bold;
	}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  
	content hyperlinks
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
 
#content a:link,
#content a:visited,
#content a:focus,
#content a:hover,
#content a:active {
	background-color: #FCF4D1;
	font-family: Garamond, AGaramond, "Adobe Garamond", Minion, "Times New Roman", Times, serif;
	/*font-weight: bold;*/
	text-decoration: underline;
	}

#content a:link {
	color: #000;
	}

#content a:visited {
	color: #333;
	}

#content a:focus {
	color: #000;
	outline-style: none;
	}

#content a:hover,
#content a:active {
	color: #B30538;
	}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  
	Top of Page hyperlink
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
 
#topOfPage a:link,
#topOfPage a:visited,
#topOfPage a:focus,
#topOfPage a:hover,
#topOfPage a:active {
	display: block;
	background: url("../images/triangle_up.gif") transparent 15% 60% no-repeat;
	color: #000;
	font-family: Garamond, AGaramond, "Adobe Garamond", Minion, "Times New Roman", Times, serif;
	text-decoration: underline;
	text-align: center;
	}

#topOfPage a:focus {
	outline-style: none;
	}

#topOfPage a:hover,
#topOfPage a:active {
	color: #B30538;
	}




/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  
	footer hyperlinks and copyright text formatting
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
 
#footer a:link,
#footer a:visited,
#footer a:focus,
#footer a:hover,
#footer a:active {
	padding: 0px 10px 0px 10px;
	background-color: #B30538;
	font-family: Garamond, AGaramond, "Adobe Garamond", Minion, "Times New Roman", Times, serif;
	font-weight: bold;
	text-decoration: underline;
	line-height: 1.5em;
	}

#footer a:link,
#footer a:visited,
#footer a:focus {
	color: #F3E9BA;
	}

#footer a:focus {
	outline-style: none;
	}

#footer a:hover,
#footer a:active {
	color: #C1D82E;
	}


/* copyright text */
#footer p {
	margin: 5px 0px 0px 0px;
	background-color: #B30538;
	color: #F3E9BA;
	font-weight: bold;
	font-style: italic;
	}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  
	images
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

#menu .menuImage {
	padding-top: 2em;
	margin-left: 1px;
	}

.rightAlignedImg {
	margin: 6px 0px 5px 20px;
	float: right;
}

.leftAlignedImg {
	margin: 6px 20px 5px 0px;
	float: left;
}

.imageBorder {
	border: 1px solid #666;
}

 
/* clear floats */

.clearLeft {
	clear: left;
}

.clearRight {
	clear: right;
}

.clearBoth {
	clear: both;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  
	alignment classes
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

/* Horizontal alignment classes - don't work with colgroups */

.hAlignPosition_1 {
	text-align: left;
}

.hAlignPosition_2 {
	text-align: center;
}

.hAlignPosition_3 {
	text-align: right;
}


/* Vertical alignment classes - don't work with colgroups */

.vAlignPosition_1 {
	vertical-align: top;
}

.vAlignPosition_2 {
	vertical-align: middle;
}

.vAlignPosition_3 {
	vertical-align: bottom;
}

.poweredphplist, font
  {
  display: none;
  }
  
.image
  {
  display: block;
  float: right;
  margin: 0px 0px 15px 10px;
  }
  
.contest
  {
  font-size: 18px;
  text-align: center;
  }

.fine
  {
  font-size: 14px;
  }