@charset "UTF-8";
/* CSS Master for www.fountainofyouthmedispa.com
----------------------------------
Author: Waylon Baumgardner (waylonrobert@gmail.com) - (www.waylonrobert.com)
Creation: February 2009
Last Modified: October 24, 2009
Copyright: All rights reserved. 
----------------------------------
*/

/* ----- PAGE LAYOUT ------------------------------------------------- */

html, body { 
	background: #fff;
	color: #888888;
	font: 14px "Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
	margin: 0; 
	padding:0; 
	text-align:center; 
	} 

#banner {
	/*background: url(../images/banner2.jpg) no-repeat;*/ /*banner.php overrides*/
	height: 250px;
	margin: auto auto;
	width: 750px;
	}

#leftcol{
	background: #9cbfdb;
	color: #fff;
	float: left;
	height: 600px;
	position: relative;
	width: 250px; 
	}

#maincol{
	background: #fff;  
 	float: right; 
 	display: inline; 
 	position: relative; 
 	width: 475px;
 	}

#leftcol2 {
	width: 238px; 
	float: left; 
	position: relative; 
	background-color: #bda976; 
 	height: 300px;
 	}
 
#maincol2 {
	background-color: #bda976;  
	float: right; 
	display:inline; 
	position: relative; 
	width: 237px; 
	height: 300px;
	}


#pagewidth { 
	margin: auto auto;
	text-align: left;
	/*height: 575px;*/
	height: 100%;
	width: 750px;
	} 

.pagewidth2 {
	height: 575px;
	}
	
#stripes {
	background: url(../images/tri.gif) repeat-x;
	height: 48px;
	width: 100%;
	}

 /* *** Float containers fix:
 http://www.csscreator.com/attributes/containedfloat.php *** */ 
.clearfix:after {
 content: "."; 
 display: block; 
height: 0; 
 clear: both; 
 visibility: hidden;
 }
 
.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */

.clear {
clear: both;
height: 1px;
margin-top: -1px;
overflow: hidden;
}
	
/* --- TYPOGRAPHY --- */

a.leftnav {
	color: #f5f5f5; /*#e4f1fc*/
	text-decoration: none;
	}

a.leftnav:hover {
	color: #fff;
	text-decoration: underline;
	}

a {
	color: #5e89ad;
	text-decoration: none;
	}

a:hover {
	color: #75acd9;
	text-decoration: underline;
	}

p.push {
	padding: 0 5px 0 5px;
	color: #fff;
	}

h1 {
	color: #bda976;
	font-size: 18px;*/
	}
	
h2 {
	color: #4b8fc5;
	font-weight: bold;
	font-size: 15px;*/
	}
	
h3 {
	color: #9cbfdb;
	font-weight: bolder;
	font-size: 14px;
	line-height: 1.2em;
	margin-top: 1.2em;
	}
	
/* --- CONTENT CLASSES --- */

.ten {
	padding-left: 10px;
 	padding-top: 10px;
 	}

.five {
	padding: 0 5px 5px 5px;
	}
 
.fifteen {
 	padding-left: 15px;
 	}
 
.box1 {
 	border: 1px black solid;
 	height: 175px;
	}
 
.box2 {
 	background: #cfe6a0;
 	height: 200px;
 	margin-top: 15px;
 	}
 	
.box3 {
 	background: #bda976;
 	height: 200px;
 	margin-top: 15px;
 	}
 	
.pushdown {
 	padding-top: 5px;
 	}
 	
.line {
 	background: url(../images/line.gif) repeat-x;
 	height: 20px;
 	padding: 0;
 	margin: 0;
 	}
 	
.container {
 	height: 150px;
 	}

.backuptop {
	display: block;
	font-size: 1em;
	font-weight: normal;
	text-align: right;
	border-bottom: 1px dotted #bda976;
	color: #4b8fc5;
	}
 	
/* ----- BREADCRUMBS ------------------------------------------------- */

.bread {
	width: 750px;
	margin: auto auto;
	text-align: left;
	padding-bottom: 5px;
	size: 10px;
}

.crumb {
	color: #BDA976;
}

a:hover.crumb {
	text-decoration: underline;
}

/* ----- MASTHEAD ------------------------------------------------- */

h1#logo a {
	background:transparent url(../images/logo.gif) no-repeat;
	float: left;
	height: 120px;
	overflow: hidden;
	text-indent: -9999em;
	width: 257px;
	}	

#masthead {
	height: 110px;
	margin: 0 auto;
	padding-bottom: 25px;
	text-align: left;
	width: 750px;
}

/* ----- TOP NAVIGATION ------------------------------------------------- */

#nav {
	float: right;
	}

#navigation {
    background: url(../images/navsprite3.gif);
    float: left;
    height: 60px;
    margin: 15px auto; padding: 0;
    position: relative;
    width: 450px; 
    }
    
 #navigation li {
    list-style: none;
    margin: 0; 
    padding: 0; 
    position: absolute; 
    top: 0;
    }
  
#navigation li, #navigation a {
    display: block;
    height: 60px; 
    }
    
#link1 {
	left: 0; 
	width: 80px;
	}
	
#link2 {
	left: 81px; 
	width: 100px;
	}
	
#link3 {
	left: 180px; 
	width: 96px;
	}
	
#link4 {
	left: 276px; 
	width: 73px;
	}
	
#link5 {
	left: 349px; 
	width: 101px;
	}
  
#link1 a:hover {
    background: transparent url(../images/navsprite3.gif) 0 -60px no-repeat;
    margin-top: 40px;
    }
    
#link2 a:hover {
    background: transparent url(../images/navsprite3.gif) -81px -60px no-repeat;
    margin-top: 40px;
    }
    
#link3 a:hover {
    background: transparent url(../images/navsprite3.gif) -180px -60px no-repeat;
    margin-top: 40px;
    }
    
#link4 a:hover {
    background: transparent url(../images/navsprite3.gif) -276px -60px no-repeat;
    margin-top: 40px;
    }
   
#link5 a:hover {
    background: transparent url(../images/navsprite3.gif) -349px -60px no-repeat;
    margin-top: 40px;
    }

/* ----- LEFT NAVIGATION ------------------------------------------------- */

.applemenu{
	margin: 5px 0;
	padding: 0;
	width: 200px; /*width of menu*/
	}

.applemenu div.silverheader a{
	color: #fff;
	display: block;
	font: bold 14px Verdana, Helvetica, sans-serif;
	padding: 5px 0 0 5px;
	/*padding-left: 5px;*/
	position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
	text-decoration: none;
	width: auto;
	}

.applemenu div.silverheader a:hover{
	text-decoration: underline;
	}

.applemenu div.silverheader a:visited, .applemenu div.silverheader a:active{
	color: #fff;
	}


.applemenu div.selected a, .applemenu div.silverheader a:hover{
	color: #fff;
}

.applemenu div.submenu{ /*DIV that contains each sub menu*/
	height: 160px; /*Height that applies to all sub menu DIVs. A good idea when headers are toggled via "mouseover" instead of "click"*/	
	padding-left: 5px;
	}


/* ----- FOOTER ------------------------------------------------- */

#foot {
	padding: 10px 5px 0px 5px;
	background-color: #fff;
	height: 25px;
	width: 750px;
	margin: auto auto;
	}
	
/* --- FOOTER CLASSES --- */

.footer {
	clear: both;
	font-size:11px;
	margin:auto;
	text-align:left;
	width: 750px;
	}

.left {
	float: left;
	}

.left span {
	margin: 0 0 0 5px;
	}

.right {
	float: right;
	padding-bottom: 10px;
	}

.right span {
	margin:0 5px 0 36px;
	}