@charset "UTF-8";
/* CSS Document */

body {
	padding:0;
	margin:0;
	background-image:url(../images/bg.gif); /* 1px wide gradient from top to bottom */
	background-position:top;
	background-repeat:repeat-x;
	background-color:#415877;
	font-family:Lucida Grande, Geneva, Helvetica, Arial, sans-serif;
	font-size:12px;
}
p {
	margin:0 0 10px 0;
	color:#222;
}
/* the only h2 headings used are in the paragraph text on fact, fiction, and title */
h2 {
	margin:0 0 2px 0;
	padding:0;
}
#container {
	background-image:url(../images/container_bg.png);
	background-repeat:no-repeat;
	height:586px;
	width:787px;
    position: absolute; /* so that it stays in the center of the page */
    top:50%;
    left:50%;
    margin-top:-293px; /* half of height */
    margin-left:-394px; /* half of width */
    text-align:left;
    z-index: 99;
}
/* relative positioning to its container */
#nav {
	position:relative;
	padding:0;
	margin:5px auto 0 auto;
	width:775px;
	height:36px;
}
/* unordered list to style them horiztontally instead of vertical like normail bulleted lists */
#nav ul {
	float:left;
	list-style:none;
	padding:0;
	margin:0;
}
/* forces each 'li' item up a line to make list horizontal */
#nav ul li {
	float:left;
	list-style:none;
	padding:0;
	margin:0;
}
/* span is always set to display:none */
/* this span is for the text on the page to be hidden since there are background images */
/* it is styled in css so in a text only browser you can still navigate with no images and the text will show up */
#nav ul li span {
	display:none;
}
/* sets each nav item with background image and heigh of what each should be */
/* for each link below the width and background position will be specified for each link */
/* each link will have a hover, active, and 'on' with the background position moving down -36px on each */
/* the active and the 'on' vertical background position will be the same */
/* for each link, the background position will be the width and background position of the previous link added together */
#nav ul li a {
	display:block;
	height:36px;
	background-image:url(../images/nav_all.jpg);
	background-repeat:no-repeat;
}
/* HOME PAGE */
#nav ul li#nav_home a {	background-position:0 0; width:108px; }
#nav ul li#nav_home a:hover { background-position:0 -36px; }
#nav ul li#nav_home a:active { background-position:0 -72px; }
#page_home #nav ul li#nav_home a { background-position:0 -72px; }
/* WHO PAGE */
/* background postion is previous buttons width */
#nav ul li#nav_who a { background-position:-108px 0; width:112px; }
#nav ul li#nav_who a:hover { background-position:-108px -36px; }
#nav ul li#nav_who a:active { background-position:-108px -72px; }
#page_who #nav ul li#nav_who a { background-position:-108px -72px; }
/* WHAT PAGE */
/* background postion is previous buttons width + horizonal background position */
#nav ul li#nav_what a { background-position:-220px 0; width:110px; }
#nav ul li#nav_what a:hover { background-position:-220px -36px; }
#nav ul li#nav_what a:active { background-position:-220px -72px; }
#page_what #nav ul li#nav_what a { background-position:-220px -72px; }
/* WHEN PAGE */
/* background postion is previous buttons width + horizonal background position */
#nav ul li#nav_when a { background-position:-330px 0; width:112px; }
#nav ul li#nav_when a:hover { background-position:-330px -36px; }
#nav ul li#nav_when a:active { background-position:-330px -72px; }
#page_when #nav ul li#nav_when a { background-position:-330px -72px; }
/* WHERE PAGE */
/* background postion is previous buttons width + horizonal background position */
#nav ul li#nav_where a { background-position:-442px 0; width:111px; }
#nav ul li#nav_where a:hover { background-position:-442px -36px; }
#nav ul li#nav_where a:active { background-position:-442px -72px; }
#page_where #nav ul li#nav_where a { background-position:-442px -72px; }
/* WHY PAGE */
/* background postion is previous buttons width + horizonal background position */
#nav ul li#nav_why a { background-position:-553px 0; width:112px; }
#nav ul li#nav_why a:hover { background-position:-553px -36px; }
#nav ul li#nav_why a:active { background-position:-553px -72px; }
#page_why #nav ul li#nav_why a { background-position:-553px -72px; }
/* HOW PAGE */
/* background postion is previous buttons width + horizonal background position */
#nav ul li#nav_how a { background-position:-665px 0; width:109px; }
#nav ul li#nav_how a:hover { background-position:-665px -36px; }
#nav ul li#nav_how a:active { background-position:-665px -72px; }
#page_how #nav ul li#nav_how a { background-position:-665px -72px; }
/* SECONDARY NAV */
/* positions the secondary so that it aligns to the left side of the page under the primary nav */
#nav2 {
	position:relative;
	padding:0;
	margin:15px 0 0 10px;
	width:600px;
	height:35px;
}
/* unordered list to style them horiztontally instead of vertical like normail bulleted lists */
#nav2 ul {
	float:left;
	list-style:none;
	padding:0;
	margin:0;
}
/* forces each 'li' item up a line to make list horizontal */
#nav2 ul li {
	float:left;
	list-style:none;
	padding:0;
	margin:0;
}
/* span is always set to display:none */
/* this span is for the text on the page to be hidden since there are background images */
/* it is styled in css so in a text only browser you can still navigate with no images and the text will show up */
#nav2 ul li span {
	display:none;
}
/* sets each nav item with background image and heigh of what each should be */
/* for each link below the width and background position will be specified for each link */
/* each link will have a hover, active, and 'on' with the background position moving down -36px on each */
/* the active and the 'on' vertical background position will be the same */
/* for each link, the background position will be the width and background position of the previous link added together */
#nav2 ul li a {
	display:block;
	height:35px;
	background-repeat:no-repeat;
}
/* WHO PAGE SECOND NAV */
/* sets css styles for particular page and gets page secondary nav image */
#page_who #nav2 ul li a { background-image:url(../images/nav2_who.gif); }
/* harrington button */
#nav2 ul li#nav2-harrington a { background-position:0 0; width:89px; }
#nav2 ul li#nav2-harrington a:hover { background-position:0 -35px; width:89px; }
#nav2 ul li#nav2-harrington a:active { background-position:0 -70px; width:89px; }
#nav2 ul li#nav2-harrington a#nav2_on { background-position:0 -70px; width:89px; }
/* cummings button */
#nav2 ul li#nav2-cummings a { background-position:-89px 0; width:88px; }
#nav2 ul li#nav2-cummings a:hover { background-position:-89px -35px; width:88px; }
#nav2 ul li#nav2-cummings a:active { background-position:-89px -70px; width:88px; }
#nav2 ul li#nav2-cummings a#nav2_on { background-position:-89px -70px; width:88px; }
/* crapper button */
#nav2 ul li#nav2-crapper a { background-position:-177px 0; width:75px; }
#nav2 ul li#nav2-crapper a:hover { background-position:-177px -35px; width:75px; }
#nav2 ul li#nav2-crapper a:active { background-position:-177px -70px; width:75px; }
#nav2 ul li#nav2-crapper a#nav2_on { background-position:-177px -70px; width:75px; }
/* WHAT PAGE SECOND NAV */
/* sets css styles for particular page and gets page secondary nav image */
#page_what #nav2 ul li a { background-image:url(../images/nav2_what.gif); }
/* flush toilet button */
#nav2 ul li#nav2-flush_toilet a { background-position:0 0; width:92px; }
#nav2 ul li#nav2-flush_toilet a:hover { background-position:0 -35px; width:92px; }
#nav2 ul li#nav2-flush_toilet a:active { background-position:0 -70px; width:92px; }
#nav2 ul li#nav2-flush_toilet a#nav2_on { background-position:0 -70px; width:92px; }
/* squat toilet button */
#nav2 ul li#nav2-squat_toilet a { background-position:-92px 0; width:97px; }
#nav2 ul li#nav2-squat_toilet a:hover { background-position:-92px -35px; width:97px; }
#nav2 ul li#nav2-squat_toilet a:active { background-position:-92px -70px; width:97px; }
#nav2 ul li#nav2-squat_toilet a#nav2_on { background-position:-92px -70px; width:97px; }
/* urinal button */
#nav2 ul li#nav2-urinal a { background-position:-189px 0; width:60px; }
#nav2 ul li#nav2-urinal a:hover { background-position:-189px -35px; width:60px; }
#nav2 ul li#nav2-urinal a:active { background-position:-189px -70px; width:60px; }
#nav2 ul li#nav2-urinal a#nav2_on { background-position:-189px -70px; width:60px; }
/* chemical button */
#nav2 ul li#nav2-chemical_toilet a { background-position:-249px 0; width:117px; }
#nav2 ul li#nav2-chemical_toilet a:hover { background-position:-249px -35px; width:117px; }
#nav2 ul li#nav2-chemical_toilet a:active { background-position:-249px -70px; width:117px; }
#nav2 ul li#nav2-chemical_toilet a#nav2_on { background-position:-249px -70px; width:117px; }
/* WHEN PAGE SECOND NAV */
/* sets css styles for particular page and gets page secondary nav image */
#page_when #nav2 ul li a { background-image:url(../images/nav2_when.gif); }
/* past button */
#nav2 ul li#nav2-past a { background-position:0 0; width:50px; }
#nav2 ul li#nav2-past a:hover { background-position:0 -35px; width:50px; }
#nav2 ul li#nav2-past a:active { background-position:0 -70px; width:50px; }
#nav2 ul li#nav2-past a#nav2_on { background-position:0 -70px; width:50px; }
/* present button */
#nav2 ul li#nav2-present a { background-position:-50px 0; width:70px; }
#nav2 ul li#nav2-present a:hover { background-position:-50px -35px; width:70px; }
#nav2 ul li#nav2-present a:active { background-position:-50px -70px; width:70px; }
#nav2 ul li#nav2-present a#nav2_on { background-position:-50px -70px; width:70px; }
/* future button */
#nav2 ul li#nav2-future a { background-position:-120px 0; width:65px; }
#nav2 ul li#nav2-future a:hover { background-position:-120px -35px; width:65px; }
#nav2 ul li#nav2-future a:active { background-position:-120px -70px; width:65px; }
#nav2 ul li#nav2-future a#nav2_on { background-position:-120px -70px; width:65px; }
/* WHERE PAGE SECOND NAV */
/* sets css styles for particular page and gets page secondary nav image */
#page_where #nav2 ul li a { background-image:url(../images/nav2_where.gif); }
/* america button */
#nav2 ul li#nav2-america a { background-position:0 0; width:74px; }
#nav2 ul li#nav2-america a:hover { background-position:0 -35px; width:74px; }
#nav2 ul li#nav2-america a:active { background-position:0 -70px; width:74px; }
#nav2 ul li#nav2-america a#nav2_on { background-position:0 -70px; width:74px; }
/* europe button */
#nav2 ul li#nav2-europe a { background-position:-74px 0; width:67px; }
#nav2 ul li#nav2-europe a:hover { background-position:-74px -35px; width:67px; }
#nav2 ul li#nav2-europe a:active { background-position:-74px -70px; width:67px; }
#nav2 ul li#nav2-europe a#nav2_on { background-position:-74px -70px; width:67px; }
/* india button */
#nav2 ul li#nav2-india a { background-position:-141px 0; width:55px; }
#nav2 ul li#nav2-india a:hover { background-position:-141px -35px; width:55px; }
#nav2 ul li#nav2-india a:active { background-position:-141px -70px; width:55px; }
#nav2 ul li#nav2-india a#nav2_on { background-position:-141px -70px; width:55px; }
/* japan button */
#nav2 ul li#nav2-japan a { background-position:-196px 0; width:62px; }
#nav2 ul li#nav2-japan a:hover { background-position:-196px -35px; width:62px; }
#nav2 ul li#nav2-japan a:active { background-position:-196px -70px; width:62px; }
#nav2 ul li#nav2-japan a#nav2_on { background-position:-196px -70px; width:62px; }
/* WHY PAGE SECOND NAV */
/* sets css styles for particular page and gets page secondary nav image */
#page_why #nav2 ul li a { background-image:url(../images/nav2_why.gif); }
/* sanitation button */
#nav2 ul li#nav2-sanitation a { background-position:0 0; width:85px; }
#nav2 ul li#nav2-sanitation a:hover { background-position:0 -35px; width:85px; }
#nav2 ul li#nav2-sanitation a:active { background-position:0 -70px; width:85px; }
#nav2 ul li#nav2-sanitation a#nav2_on { background-position:0 -70px; width:85px; }
/* privacy button */
#nav2 ul li#nav2-privacy a { background-position:-85px 0; width:68px; }
#nav2 ul li#nav2-privacy a:hover { background-position:-85px -35px; width:68px; }
#nav2 ul li#nav2-privacy a:active { background-position:-85px -70px; width:68px; }
#nav2 ul li#nav2-privacy a#nav2_on { background-position:-85px -70px; width:68px; }
/* !!!!!!!!!!!!!CHANGE!!!!!!!!!!!!!!!! button */
#nav2 ul li#nav2-rest a { background-position:-153px 0; width:55px; }
#nav2 ul li#nav2-rest a:hover { background-position:-153px -35px; width:55px; }
#nav2 ul li#nav2-rest a:active { background-position:-153px -70px; width:55px; }
#nav2 ul li#nav2-rest a#nav2_on { background-position:-153px -70px; width:55px; }
/* HOW PAGE SECOND NAV */
/* sets css styles for particular page and gets page secondary nav image */
#page_how #nav2 ul li a { background-image:url(../images/nav2_how.gif); }
/* water tank button */
#nav2 ul li#nav2-water_tank a { background-position:0 0; width:92px; }
#nav2 ul li#nav2-water_tank a:hover { background-position:0 -35px; width:92px; }
#nav2 ul li#nav2-water_tank a:active { background-position:0 -70px; width:92px; }
#nav2 ul li#nav2-water_tank a#nav2_on { background-position:0 -70px; width:92px; }
/* ajax button */
#nav2 ul li#nav2-ajax a { background-position:-92px 0; width:51px; }
#nav2 ul li#nav2-ajax a:hover { background-position:-92px -35px; width:51px; }
#nav2 ul li#nav2-ajax a:active { background-position:-92px -70px; width:51px; }
#nav2 ul li#nav2-ajax a#nav2_on { background-position:-92px -70px; width:51px; }
/* s-trap button */
#nav2 ul li#nav2-s_trap a { background-position:-143px 0; width:64px; }
#nav2 ul li#nav2-s_trap a:hover { background-position:-143px -35px; width:64px; }
#nav2 ul li#nav2-s_trap a:active { background-position:-143px -70px; width:64px; }
#nav2 ul li#nav2-s_trap a#nav2_on { background-position:-143px -70px; width:64px; }
/* ballcock button */
#nav2 ul li#nav2-ballcock a { background-position:-207px 0; width:76px; }
#nav2 ul li#nav2-ballcock a:hover { background-position:-207px -35px; width:76px; }
#nav2 ul li#nav2-ballcock a:active { background-position:-207px -70px; width:76px; }
#nav2 ul li#nav2-ballcock a#nav2_on { background-position:-207px -70px; width:76px; }

/* MAIN CONTENTS */
/* all main page titles  */
#title {
	text-align:center;
	margin:25px 75px 0 74px;
	font-size:1.3em;
	color:#999;
	border-bottom:dashed 1px #7094b2;
	padding:0 0 5px 0;
}
/* display image as block and not inline */
#title img {
	display:block;
}
/* id for all subtitles directly below the main title */
#title span {
	color:#333;
}
/* individual page image */
#page_image {
	float:left;
	margin:15px 0 0 80px;
}
#page_image img {
	border:solid #000 1px;
}
/* all page text */
/* this includes factoid */
#page_text {
	float:right;
	width:300px;
	height:300px;
	margin:15px 80px 0 0;
	overflow:auto;
}
/* factoid title nested inside of page text */
.factoid_title {
	color:#000;
}
/* factoid text nested inside of page text */
.factoid_text {
	background-color:#DAE8F3;
	border-top:1px solid #4D6A8C;
	border-bottom:1px solid #4D6A8C;
	padding:5px;
	color:#000;
}
/* BOTTOM NAV */
/* hides text in next and previous */
/* previous button navigation */
a #slide_prev {
	clear:both;
	position:absolute;
	bottom:5px;
	left:10px;
	height:40px;
	width:60px;
	background-image:url(../images/prev.jpg);
	background-repeat:no-repeat;
	background-position:0 0;
	border:none;
	display:block;
	z-index:2;
}
/* change background position on hover */
a:hover #slide_prev {
	background-position:0 -40px;
}
/* change background position on click */
a:active #slide_prev {
	background-position:0 0;
}
/* hides text in next and previous */
/* allows for viewing of text in image only browser */
a #slide_prev strong {
	display:none;
}
/* next button navigation */
a #slide_next {
	clear:both;
	position:absolute;
	bottom:5px;
	right:10px;
	height:40px;
	width:60px;
	background-image:url(../images/next.jpg);
	background-repeat:no-repeat;
	background-position:0 0;
	border:none;
	display:block;
	z-index:2;
}
/* change background position on hover */
a:hover #slide_next {
	background-position:0 -40px;
}
/* change background position on click */
a:active #slide_next {
	background-position:0 0;
}
/* hides text in next and previous */
/* allows for viewing of text in image only browser */
a #slide_next strong {
	display:none;
}
/* title of the on the bottom bar, essentially the home page title button */
#bottom_home {
	bottom:2px;
	position:absolute;
	z-index:1;
	clear:both;
	width:787px;
	text-align:center;
	display:block;
}
/* takes border off the cleardot.gif incase IE creates border on linked image */
#bottom_home img {
	border:none;
}
/* FOOTER */
/* text is dim and positioned below the container */
/* dim text is so that it is not destracting from the main information */
#footer {
	clear:both;
	text-align:center;
	bottom:-20px;
	position:absolute;
	width:787px;
	text-decoration:none;
	font-size:0.8em;
	/*color:#7094b2;
	text-shadow:#555 -1px -1px 0px; /* css3 only */
	color:#CAD8E3;
	text-shadow:#31425A -1px -1px 0px; /* css3 only */
}

#topbar {
	color: #ccc;
	text-shadow: none;
	position: absolute;
	text-align: center;
	top: 0;
	left: 0;
	right: 0;
	padding: 15px 30px;
	background-color: #2C2C2C;
	background-image: -moz-linear-gradient(top, #333, #222);
	background-image: -ms-linear-gradient(top, #333, #222);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333), to(#222));
	background-image: -webkit-linear-gradient(top, #333, #222);
	background-image: -o-linear-gradient(top, #333, #222);
	background-image: linear-gradient(top, #333, #222);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
	z-index: 9;
}

#topbar a {
	color: #fff;
	text-decoration: none;
}