@charset "utf-8";

/* CSS Document */



/*Includes all CSS used to style the homepages and five subpages*/



/*Applies to all pages*/

body

{

	font-family: arial, helvetica, sans-serif; 

	font-size:1em;

	background-image:url(bubbles.png);

}



h1, h2, h3, h4

{

	font-family:Verdana, Geneva, sans-serif;

	font-weight:bold;

}



/*Used for the logo in the header on all pages*/

.logo

{

	max-width: 100%;

    height: auto;

    width: auto\9; /* ie8 */

}





/*Used to style images on the "Ebb and Flow" and "Plants" pages*/

.left

{

	float:left;

	width:250px;

	margin:0px 15px 10px 0px;

}



/*Applies to all pages--allows the page to adjust based on screen size but sets limits to prevent distortion*/

#main_wrap {

	max-width:1080px;

	min-width:780px;

	background:#69F;

	margin:0 auto;

	text-align:left;

}



/*Applies to all pages*/

#header {

	max-width:1080px;

	padding:0;

	margin: 0;

}





/*Applies to all pages*/

#nav{

	width: 780px;

	margin-left: auto;

	margin-right: auto;

}



/*Applies to all pages*/

#content {

	background:#69F;

	margin:5px 75px;

}



/*Applies to all pages*/

#footer {

	background:#036;

	text-align:center;

	padding:1em;

}



/*Specific settings related to how text appears in the footer*/

#footer p, h1, h2 {color:#FFF;}



/*Creates the horizontal navigation bar and removes bullets*/

#nav ul {padding: 0; margin: 0; width:100%; list-style-type:none; overflow:hidden;}

#nav ul li {

	list-style-type:none; 

	float:left;

	}



/*Styles links in the navigation bar*/

#nav a:link, a:visited {

	display:block;

	width: 122px;

	font-weight:bold;

	color:#036;

	background-color:#69F;

	text-align:center;

	padding: 1px;

	margin: 1px;

	text-decoration:none;

	border:2px solid;

	border-radius:25px;

	-moz-border-radius:25px; /* Firefox 3.6 and earlier */

}

#nav a:hover, a:active

{

	color:#FFF;

	background-color:#036;

	border:2px solid;

	border-radius:25px;

	-moz-border-radius:25px; /* Firefox 3.6 and earlier */

}



#header a:link, a:visited a:hover, a:active

{

	border: none;

}



.logo a:link, a:visited

{

	border:none;

}



.logo a: hover, a:active

{

	border:medium;

}



/*These styles currently only apply to the Siphon page, but could in the future apply to other pages if I decide to use expanding and collapsing divs elsewhere*/

.slider{

	display:none;

	border:ridge;

	padding-top: 5px;

	padding-left: 40px;

	padding-right: 40px;

}

.collapseSlider{

	display:none;

}

.sliderExpanded .collapseSlider{

	display:block;

}

.sliderExpanded .expandSlider{

	display:none;

}

.toggler {

	text-decoration: underline;

	cursor:pointer;

}



#diagram {

	width:400px;

	height:300px;

	margin:auto;

}



/*Sizes and centers the flash animations on the Flash Overview page and the Fish page*/

#flashContent {

	width:600px;

	margin-left:auto;

	margin-right:auto;

}



#largeContent{

	width:800px;

	height:600px;

	margin:auto;

}