/* colors
   navy from logo: #153B73 
   seafoam nav bars: #CCFFCC
   skyblue background: #99CCFF
*/   


body {font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 10px 0; padding: 0;
	background-color: #99CCFF;
	}

a.navlink {text-decoration: none;}
a:link {color: #0033CC;}
a:active {color: #003366; font-weight: bold;}
a:visited {
	color: #003333;
	font-size: small;
}

h1 {
	font-size:x-large;
   }
   
h2 {
	font-size:medium;
   }
   
p {
	font-size:small;
   }      

ul, ol {
	font-size:small;
	text-decoration: none;
	font-stretch: normal;
	list-style-type: disc;
   }
   
  
   
#logo {
	position: absolute; top: 10px; left: 10px;
	width: 160px; height: 88px;
	padding: 5px;
	background-color: white;
	border:1px solid #003366;
	}

#nav_bars {
	position: absolute; top: 5px; left: 0;
	width: 100%; height: 44px;
	}

#pics {
	position: absolute; top: 63px; left: 0;
	width: 100%; height: 93px;
	}
	
#content {
	position: absolute;
	top: 165px;
	left: 10px;
	clear: left;
	width: 790px;
	background-color: white;
	border: 1px solid #003366;
	padding: 10px;
	margin: 0 0 10px 0;
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	}

#nav_programs, 
#nav_about {
	float:left;
	width:100%;
	min-width: 800px;
	font-size:65%;
	line-height:normal;
	}

#nav_programs {
	background:#CCFFCC url("images/bg_programs.gif") repeat-x bottom;  /* seafoam */
	border-bottom:3px solid #99CCFF;	
	}

#nav_about {
	background:#CCFFCC url("images/bg_programs.gif") repeat-x bottom;	
	}

#nav_programs ul, 
#nav_about ul {
	margin: 0 0 0 200px;
	padding: 4px 0px 4px 0px;
	list-style:none;
	}
#nav_programs li, 
#nav_about li {
	float:left;
	background:url("images/tab_left_on.gif") no-repeat left top;
	margin: 0;
	padding: 0 0 0 4px;
	border-bottom:1px solid black;
	}

#nav_programs a, 
#nav_about a {
	display:block;
	background:url("images/tab_right_on.gif") no-repeat right top;
	padding:4px 10px 3px 4px;
	text-decoration: none;
	color:#000;
	}

#nav_programs a:hover, 
#nav_about a:hover {
	background-image:url("images/tab_right_hover.gif");
	font-weight:bold;
	color:#000;
	border-bottom:1px solid black;
	}



#nav_programs #current, 
#nav_about #current {
	background-image:url("images/tab_left.gif");
	border-width:0;
	}

#nav_programs #current a, 
#nav_about #current a {
	background-image:url("images/tab_right.gif");
	padding-bottom:5px;
	font-weight:bold;
	}

/* commented backslash hack hides rule from IE5-Mac\*/
#nav_programs a, 
#nav_about a {
	float:none;
}
/* end IE-5Mac hack */

#footer {
	text-align: center;
	font-size: small;
	border: 1px solid #003366;
	margin: 0 -10px -10px -10px;
	line-height: 0.75;
	}

div.pic {
	background-color: #003366; 
	padding: 2px;
}

div.pic img {border: none;}

#soccer {
	position: absolute; top: 10px; left: 190px; 
	width: 76px;
}

#bike {
	position: absolute; top: 0px; left: 269px; 
	width:46px;
}

#garden {
	position: absolute; top: 10px; left: 319px; 
	width:49px;
}

#golf {
	position: absolute; top: 0px; left: 372px; 
	width:47px;
}

#track {
	position: absolute; top: 10px; left: 423px; 
	width:51px;
}

.bio img{
	float: left;
	margin-top: 0;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 0px;
	padding-top: 0px;
	padding-left: 10px;
	padding-bottom: 10px;
	padding-right: 10px;
}

.bio_right img{
	float: right;
	margin-top: 0;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 0px;
	padding-top: 0px;
	padding-left: 10px;
	padding-bottom: 10px;
	padding-right: 10px;
}	

/************** .coupon styles  ***************/
/* surrounds coupons with dashed green borders */

.coupon{
	padding:10px;
	border:dashed; 
	border-color:#006633;
	border-width:medium;	
	background-color:#FFFFCC;
}

/************** .rave styles  ***************/

/* floats raves (testimonials) to the left with text wrapping around and highlights background in lavendar (purple)*/
/* example:
   <div class="rave">
   <img src="images/...">
   <h3>Love Phys Sol!</h3>
   <p>How do I love thee? ... </p>
   </div>
*/

.rave{
	padding: 5px 10px 10px 0px;
	background-color:#FFFFCC;
	margin-bottom:10px;
	font-size: 12px;
	line-height: 16px;
}

.rave img{
	float: left;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 5px;
	margin-left: 5px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}