/* CSS Document */

#wrap {
	width:760px;
	margin:0 auto;
}

.left {
	background-position:left;
	float:left;
}

.right {
	background-position:right;
	float:right;
}

#title {
	text-align:center;
	width:760px;
	height:45px;
	background-image:url(images/title_mirage.gif);
	background-position:center top;
	background-repeat:no-repeat;
}

.title_corner {
	width:14px;
	height:26px;
}
	#top_l {
		background-image:url(images/corner_top_left.gif);
		background-repeat:no-repeat;
		background-position:top;
	}
	
	#top_r {
		background-image:url(images/corner_top_right.gif);
		background-repeat:no-repeat;
		background-position:top;
	}

#title_left {
	width:282px;
	height:26px;
	float:left;
	background-image:url(images/top_bar.gif);
	background-position:right top;
	background-repeat:repeat-x;
}

#title_mid {
	width:196px;
	height:26px;
	float:left;
	background-image:url(images/title_natural.gif);
	background-position:center top;
	background-repeat:no-repeat;
}

#title_right {
	width:282px;
	height:26px;
	float:left;
	background-image:url(images/top_bar.gif);
	background-position:left top;
	background-repeat:repeat-x;
}

#container {
	margin:0 auto;
	width:760px;
	background-image:url(images/background.gif);
	background-position:top center;
	background-repeat:repeat-y;
}
	#content { /* width minus the margin size */
		float:left;
		width:680px;
		margin-top:20px;
		padding-bottom:10px;
	}

	.margin { /* this is a transparent gif that i am sizing */
		width:40px;
		height:300px;
	}

.footer_corner {
	width:20px;
	height:55px;
}
	#bot_l {
		background-image:url(images/corner_bot_left.gif);
		background-repeat:no-repeat;
		background-position:bottom;
	}

	#bot_r {
		background-image:url(images/corner_bot_right.gif);
		background-repeat:no-repeat;
		background-position:bottom;
	}

#footer_mid {
	width:720px;
	height:55px;
	float:left;
	text-align:right;
	font-size:14px;
	background-image:url(images/bottom_edge.gif);
	background-position:center bottom;
	background-repeat:no-repeat;
}

#sub_content {
	width:760px;
	text-align:center;
}

/*  TOP NAVIGATION  */

#topnavigation {
	float:left;
	width:760px;
	height:24px;
	background-image:url(images/nav_background.gif);
	background-position:center top;
	background-repeat:repeat-x;
}

ol a {
	font-size:12px;
}

ol#topnav {
    height: 24px;
    list-style: none;
    margin:0 0 0 195px; /* Giving left padding only, linux and mac may not appear as centered */
    padding: 0;
}

	ol#topnav li {
		float: left;
		margin: 0 1px 0 0;
	}

	ol#topnav a {
		background:url(images/nav_tab.gif);
		display: block;
		float: left;
		height: 24px;
		padding-left: 10px;
		text-decoration: none;
	}
		
		ol#topnav a:hover {
			background-position: 0 -48px;
		}

			ol#topnav a:hover span {
				background-position: 100% -48px;
			}

	body#main ol#topnav li.main a,
	body#benefits ol#topnav li.benefits a,
	body#filtration ol#topnav li.filtration a,
	body#promos ol#topnav li.promos a,
	body#special ol#topnav li.special a,
	body#page ol#topnav li.page a {
		background-position: 0 -24px;
	}

	body#main ol#topnav li.main span,
	body#benefits ol#topnav li.benefits span,
	body#filtration ol#topnav li.filtration span,
	body#promos ol#topnav li.promos span,
	body#special ol#topnav li.special span,
	body#page ol#topnav li.page span {
		background-position: 100% -24px;
	}

	ol#topnav span {
		background: url(images/nav_tab.gif) 100% 0;
		display: block;
		line-height: 24px;
		padding-right: 10px;
	}