#wrapper {
	width: 770px;
	/* The margin value of auto is applied to the left and right sides of the wrapper div. This means that regardless of the users' browser window width, the page content is always centered horizontally. The space on either side of the fixed-width wrapper div is distributed evenly by the auto pairs value in your style sheet.  */
	
	margin:0px auto;
	text-align:left;
	padding: 0px;
	color: #000000;
	background: #EEE;
	border-top: solid #000000;
	border-right: solid #000000;
	border-bottom: solid #000000;
	border-left: solid #000000;
}

#banner {
	height: 88px;
	width: auto;
	margin: 0px;
	padding: 0px;
	text-align: center;
	background: url(../newsletter/images/waterlilybanner.gif) no-repeat center;
	background-color: #EEE;
}

	#nav {
	background: #EEE;
	text-align: center;
	width: 100%;
	border-top: thin solid #666;
	border-right: 0;
	border-left: 0;
	vertical-align: middle;
	padding-top: 1px;
	padding-bottom: 1px;
	border-bottom: thin solid #666;
	}
	
#content p{
font-size: 80%;
margin: 20px;
}

#footer{
	text-align: center;
	}
#wrapper #footer p {
	text-align: center;
}


#leftcol #nav ul {
	background-color: transparent;
	list-style-type: none;
	margin: 0;
	padding: 0;
	font-size: 80%;
	border: 1px solid #000000;/*this adds a second line to the bottom of the nav, if you prefer a single line you can remove it by uncommenting the other properties and commenting out this one. I think it gives a nice raised effect, the choice is your's :)*/
	color: #CC0000;/*border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;*/
}

 

#leftcol #nav ul li {
padding: 0;
margin: 0; 
}

#leftcol #nav ul li a{
background-color: #869BCC;
border-bottom: 1px solid #000000;
color: #000000;
display: block;
padding: 4px 0 6px 4px;
text-decoration: none; 
height: 1%;
}


#leftcol #nav a:hover, #leftcol #nav a:focus { 
background-color: #003366;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
color: #fff;
}