h1 {color:#00AEED;}
h2 {color:#008080;}
h3 {color:#FF8C00;}


/* The styles for the body element sets all margins and padding to 0 to overide any defaults. It also make all text black and background white. Font-family and size are not set, so will show the default.   */

body {
		margin:0;
		padding:0;
		color:#000;
		background:#03436A;
	

	}
	
/* changed to one column */
	
	
#wrapper {
		width:758px;
		margin:17px auto;
		border: 7px solid #002B40;
		background: #0969A3;
		
	}
	
/* The Header id is a box where the default is 100% width. So it goes to meet the edge of its parent, the wrapper id. 5px top and bottom, 10px left and right padding. Text is centered.   */

#header {
    	text-align: center;
		border: 4px solid #00AEED;
		background: #FFFFFF;

	}
	
    
/* The styles for the Nav id center and give some padding for the text.    */
    

#nav {
		width: 454px;
		height: 2em;
		padding:0;
		margin: 7px auto;
		text-align: center;

		
	}


/* The padding and margin styles for the ul (unordered list) inside the Nav id, reduces extra space around the nav bar. The Nav id (above) is already padded.   */

#nav ul {
		margin:0;
		padding:0;
		list-style:none;
	}


/* The styles for li element (how the listed text appears) of the the unordered list, sets the display to inline, overriding the default block-level. This turns a list into a horizontal nav bar!  */

#nav li {
		margin:0;
		padding:0;
	}
	
	
/* The styles for li elements in their various link states. The first a element styles set up the basic look, then the a:link, a:visited receive same styels, as do a:hover and a:focus.  */	
	
	
#nav li a {
		float: left;
		display: inherit;
		padding: 2px;
		text-decoration: none;
		width: 5em;
		margin: 1px;
		color: #002B40;
		font-family: Helvetica, Verdana, sans-serif;
	}
	
#nav li a:link, #nav a:visited  {
		background: #0969A3;
		
	}
	
#nav li a:hover, #nav a:focus {
		background: #00AEED;
		
	}
		
	
a:link {color: #3D9AD1; text-decoration: underline; }
a:active {color: #3D9AD1; text-decoration: underline; }
a:visited {color: #FF8C00; text-decoration: underline; }
a:hover {color: #00AEED; text-decoration: none; }	
	
/* The styles for the Main id (left column), with a width in pixels, padding and the float left. Floating left will make the next column (sidebar) "wrap" or sit adjacent to the main column instead of below with a line-break. */

#main {
		float:left;
		width:730px;
		padding:0px 10px 10px 10px;
		border: 4px solid #00AEED;
		background: #ffffff;
	}
	
/* The styles for the Sidebar id (right column) can be floated left or right. Try both. It depends on what you want to happen in-between the two columns. Right now the width for left and right columns are set exactly so they sit next to eachother. Try changing these widths to see what happens.   */
	

	
	
/* The styles for the Footer id center and create padding around text and clear the floats of the above two columns. Try taking away the "clear: both" to see what happens.  */

#footer {
		clear:both;
		padding:5px 10px;
		border: 4px solid #00AEED;
		text-align: center;
		background: #FFFFFF;

	}