@charset "UTF-8";
body  {
	font-family: Arial, Helvetica, sans-serif; font-size: 1.0em; color: #000000;
	margin: 0; padding: 0; /* margin and padding zeroed to avoid differing browser defaults */
	text-align: center; /* centers the container in IE 5. Text alignment is reset in #container style */
}
body a:link {text-decoration: none;}
body a:hover {color: #808; text-decoration: underline;}
a:visited {color: #00C; text-decoration: none;}

/* indicate current page in navigation links */
#home a.home, #specials a.specials, #pools a.pools, #spas a.spas, #chemicals a.chemicals,
   #water_testing a.water_testing, #parts_repairs a.parts_repairs, #cleaners a.cleaners,
   #liners_covers a.liners_covers, #pumps_heaters a.pumps_heaters, #lounges_floats a.lounges_floats,
   #games_toys a.games_toys, #biggreenegg a.biggreenegg, #buildings a.buildings,
   #support a.support, #directions_hours a.directions_hours, #site_map a.site_map {color: #F80}

#container { 
	width: 100%;  /* create a container 100% of the browser width */
	background: #F0F8FF; /*Alice blue*/
	margin: 0 auto; /* the auto margins center the page */
	text-align: left; /* override text-align: center on the body element. */
}

#header {background: url(images/bgHeader.jpg) repeat-x; 
	padding: 0 10px;  /* padding matches left alignment of elements beneath it */} 
#header h5 {margin: 0; /* to avoid margin collapse */ padding: 10px 0; color: #FFF;}

#sidebar {
	float: left; 
	width: 12em; /* floated elements require a width */
	background: #D9F3FE; /* background color is displayed only for the length of the content */
	padding: 15px 5px 5px 5px;
	font-size: 1.0em;
}
#sidebar p {margin: 0 0 0 10px; padding: 0 0 0 13px; background-image: url(images/arrow.gif);
            background-repeat: no-repeat;}

#specials_border {border: 1px solid #30C; margin: 10px 5px 15px 5px;}
#specials_box {padding: 0.5em 1.2em 0.5em 1.2em; border: 1px solid #C03; margin: 2px;}
#specials_box a.hdng {font-size: 1.2em; color: #F00;}
#specials_box p {margin: 0 0 0 30px; padding: 0 0 0 13px; background-image: url(images/arrow.gif); background-repeat: no-repeat;}
#specials_box a.items {font-size: 1.0em; color: #F00;}

/* mainContent:
1. The space between the mainContent and sidebar is created with the left margin on the mainContent div.  Remove this left margin to cause the #mainContent div's text to fill the #sidebar space when the content in #sidebar ends.
2. It is possible to cause float drop (the dropping of the non-floated mainContent area below the sidebar) if an element wider than it can contain is placed within the mainContent div. With a hybrid layout (percentage-based overall width with em-based sidebar), it is not be possible to calculate the exact width available. The larger the user's text size, the wider the sidebar div and less room in the mainContent div. A client adding content with Contribute should be aware of this.
*/
#mainContent { 
	margin: 0 5px 1.0em 13em; /* the right margin can be given in percentages or pixels. It creates the space down the right side of the page. */
} 
#mainContent h3,h4 {color: #824E9B;}
#mainContent ul li {list-style-type: circle;}
#mainContent table {font-size: 0.8em;}
#mainContent td {padding: 0 1em 0 0;}
#mainContent a img {border: solid #0000ff 1px;}

#breadcrumbs p {margin: 0; padding: 10px 0; font-size: 1.0em;}

#mainContent p.contents_note {margin: 0.4em 0 0 0; padding: 0; font-size: 1.0em;}

#news_box {width: 556px; border: 1px solid #C03; margin: 10px 0px; background-color: #CFB}
#news_box p {margin: 2px 10px; padding: 2px 10px;}
#news_box a.xeve {font-size: 1.1em; color: #F00;}

#footer {margin-top: 0.2em; background: url(images/bgHeader.jpg) repeat-x; 
	padding: 0 10px; /* padding matches left alignment of elements in divs above footer */
}
/* space using padding to avoid margin collapse */
#footer h5 {margin: 0; padding: 10px 0; color: #FFF;}

#towns p {margin: 0; font-size: 0.7em; color: #444;}

#bottom_nav {margin: 0.8em 0 0.8em 0; padding: 0 1em 0 1em; text-align: center;}
#bottom_nav a {font-size: 1.0em;}

#bottom_note {text-align: center; font-size: 0.8em;}

/* Miscellaneous utility classes */
.fltrt { /* float an element right. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* float an element left */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
      height:0;
      font-size: 1px;
      line-height: 0px;
}