/*  */



body {
	font-family: trebuchet ms, verdana, arial, tahoma;
	font-size: 80%;
	color: #000099;
	background-color: white;
	line-height: 180%;
	margin: 0;
	padding: 0;
	text-align: center;
}

/* Set the page width - for now have added #wrapper-menu-page may need to remove */
#wrapper-menu-top, #header, #wrapper-content, #wrapper-footer {
	width: 95%;
	margin: 0 auto;
	text-align: left;
}

#wrapper-menu-top {
	background: white url(images/bg02-white-left.png) no-repeat left top;
}

#menu-top {
	background: transparent url(images/bg02-white-right.png) no-repeat right top;
	overflow: hidden; /* no idea why this works, but it fixes a FF problem */
}

#menu-top ul {
	margin: 0 20px;
	padding: 1em 0 0 0;
	list-style: none;
	font-size: 85%;
	float: left;
}

#menu-top li {
	display: inline;
	float: left;
}

#menu-top a {
	float: left;
	background:url(images/menuleft.png) no-repeat left top;
	margin:0;
	padding:0 0 0 4px;
	text-decoration:none;
	line-height: 1.5em;
}

#menu-top a span {
	background: transparent url(images/menuright.png) no-repeat right top;
	padding:5px 15px 4px 6px;
	color:#5b8fbe;
	display: block;
	float: left;
	cursor: pointer; /* IE doesnt display the hand when you roll over the link for some reason. This fixes it */
}

 #menu-top a:hover { background-position:0% -42px; }
 #menu-top a:hover span {	background-position:100% -42px; }

#wrapper-header {
	background: transparent url(images/bg.png) top center repeat-x;
	height: 120px;
 /* was 192 px */
}

#header {
	background: #eee url('images/wake2.jpg') no-repeat center top;
	color: #000099;
	height: 120px;
 /* was 192 px */
	text-align: center;

}

#wrapper-header2 {
	background: transparent url(images/bg02-blue-left.png) top left no-repeat;
	height: 120px;
 /* was 192 px */
}

#wrapper-header3 {
	background: transparent url(images/bg02-blue-right.png) top right no-repeat;
	height: 120px;
 /* was 192 px */
}

#header h1 {
	margin: 0 20px;
	padding: 0;
	line-height: 250%;
	color: #000099;
	font-size: 400%;
	text-align: center;

}
#header h2 {
	margin:  20px 20px;
	padding: 0;
	line-height: 200%;
	color: #000099;
	font-size: 350%;
	text-align: center;

}

#wrapper-content {
/*	background: white url(images/bg02-white-left.png) no-repeat left top; */
}

* html #wrapper-content { height: 1%; 
		/* never add  width: 80%; it creates permanent problems
		*/
}

#content {
		/* was 	width: 80%; changed back to 80% from auto to check mozilla.  80% works with both, but if small windows, both put all text below margin.  for auto, mozilla puts all text always below margin, explorer puts all text floating right for all sized windows.
		 changed to auto and this fixes the problem of placing text below the left menu, except for pages with table where it needs full width - fixed by reducing 10% & 10px margins to 2.

		*/
/*background: transparent url(images/bg02-white-right.png) no-repeat right top;*/
	padding: 0 3% 0 0;
    float:right;
	width: auto;
	margin: 0; 
	padding: 0 3% 0 1%;
}
	/*
	padding: 0 3% 0 0;
	*/

#wrapper-menu-page {
	margin: 0 1% 0 0;
	padding: 0px;
	/*
	background-color: #99CCFF;
	border-right: 1px solid #0000FF;
	border-bottom: 1px solid #0000FF;
	border-top-color: #0000FF;
	border-left-color: #0000FF;
	NOTE - above margin now 2% not 10%,  below, margin-right now 2px not 10px*/
	float: left;
	
	}
* html #wrapper-menu-page {
	margin-right: 1px;
		
	}

#menu-page {
	padding-top: 5px;
	width: 120px;
	float: left;
	position: relative;
}
	/*width: auto; 	width: ;
 */

#menu-page ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 90%;
}

#menu-page h3 {
	font-size: 75%;
	text-transform: uppercase;
	margin: 1em 0 0.3em 0;
	color: #5b8fbe;
	font-weight: normal;
	letter-spacing: 0.15em;
}

#menu-page a:link, #menu-page a:visited { color: #330066; }
#menu-page a:hover { color: #5b8fbe; }

#wrapper-footer {
	margin-top: 1em;
	text-align: center;
}

#footer {
	margin: 0 20px;
	background-color: #e5f0fc;
	border: 1px solid #ccc;
	border-bottom: 0;
	clear: both;
	
}
#footer a:link, #footer a:visited { color: #330066; 	text-decoration: none;
	font-style: none;
}
#footer a:hover { color: #5b8fbe; text-decoration: none;
	font-style: none;}

#footer style1 {
	font-size: 70%;
	color: #5b8fbe;
	font-weight: normal;
}

h2 { font-size: 110%; }
h3 { font-size: 100%; }
style1 {
	font-size: 70%;
	color: #5b8fbe;
	font-weight: normal;
}
style2 {
	font-size: 70%;
	color: #5b8fbe;
	font-weight: normal;
	line-height: 70%;
}

a:link, a:visited {
	color:  #009900;
	text-decoration: none;
	font-style: none;
} 
a:hover{ color: #5b8fbe; text-decoration: none; }
/* #CC0000  #330066  #009900 */