/* Zeroing off default margin and padding values

Block-level elements carry default margin and padding values, and these default values often gets designers into a difficult spot when creating designs that need to display accurately across a range of browsers and operating systems. The problem is that the default settings used for these properties are not consistent; in fact they can vary wildly from browser to browser and operating system to operating system.   */

html, body, ul, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	font: 100% Arial, Helvetica, sans-serif;
	background: #EEE;
}
div {
	width: 770px;
	margin-right: auto;
	margin-left: auto;
}
body {
	color: #003333;
	margin-top: 0em;
	margin-right: 0em;
	margin-bottom: 0em;
	margin-left: 0em;
	padding: 0;
	text-align: center; /* tricks IE5 to center objects, not just text*/
	background: url(../newsletter/images/waterlily150.gif) repeat fixed;
}
h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: xx-large;
	font-style: normal;
	font-variant: normal;
	color: #356965;
	background-color: #999999;
	letter-spacing: 1em;
	text-align: center;
	margin: 0px;
	padding: 0px 0px 7px;
}
h2 {
	font: x-large "Times New Roman", Times, serif;
	letter-spacing: 0.5em;
	text-align: center;
}

h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.15em;
	background-color: #006666;
	color: #DCDCDC;
	letter-spacing: .3em;
	}
h4 {
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	}
h5 {
	font: small Arial, Helvetica, sans-serif;
	color: #000000;
}
h6 {
	color: #000000;
}

table {
	color: #300;
	width: 100%;
	margin: 0px;
	}

tr {
	margin: 0px;
	padding: 0px;
	text-align: left;
	vertical-align: top;
}

.clearit /* adjusts the horizontal rule to include content features */{
clear: both;
}

p {
	font-size: 80%;
}
.flash {
	font: bold 80% Geneva, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	color: #663366;
	float: left;
	position: static;
}
.news_link {
	font: normal medium "Times New Roman", Times, serif;
	letter-spacing: 2px;
	text-align: left;
}
#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;
}
/* Float  -  allows you to move a floated element either right or left within a parent container  */

.leftimage{
	float: left;
	margin: 0px 10px 0px 0px;
	position: static;
}
.top {
	vertical-align: text-bottom;
	float: left;
}


.rightimage{
	float: right;
	margin: 10 0 10px 10px;
	width: auto;
	border-top: 0px none;
	border-right: 0px none;
	border-bottom: 0px none;
	border-left: 0px none;
}

ul {
	list-style-type: square;
	list-style-position: outside;
	text-indent: 5px;
	font: .9em/1.6em "Times New Roman", Times, serif;
	padding-top: 5px;
	padding-bottom: 5px;
	white-space: normal;
	padding-left: 15px;
	}
	
.border {
	margin-left: 5px;
	padding-left: 0px;
}