/* Sets element margins, padding and border to 0 to even out browser differences when adding desired values later. */
html, body, div, p, h1, h2, h3, h4, h5, h6, blockquote, 
ol, ul, li, dl, dt, dd, td, form, fieldset, a  {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Set the bg color, default font family and size here. */
body {
	background: #EEEDF5;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
}

/* This div wraps all three columns plus the banner, but doesn't include the footer. */
#wrapper {
	position: relative;
	background: url(Bkgd02.jpg) top repeat-x;
	margin: 0 auto;
	padding: 0;
	border: 0;
	text-align: left;
}

/* Set the color and font for headings. The bottom margin adds space below the heading. */
h1 {
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	margin-bottom: 0.2em;
}

h2 {
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	margin-bottom: 0.2em;
}

h3 {
	color: #45B095;
	font-family: Arial, Helvetica, sans-serif;
	margin-bottom: 0.2em;
}

h4 {
	color: #FF00FF;
	font-family: Arial, Helvetica, sans-serif;
	margin-bottom: 0.2em;
}

h5,h6 {
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	margin-bottom: 0.2em;
}

/* Add a bit of padding below all the paragraphs. */
p {
	padding-bottom: 0.8em;
}

/* No borders on any images. */
img	{
	border: none;
	text-decoration: none;
}

/* Links are purple and not underlined. */
a {
	color: #45B095;
	text-decoration: none;
}

/* Visited links are red. */
a:visited  { 
	color: #FF0000;
	text-decoration: none;
}

/* Hovered links are purple and underlined. */
a:hover {
	color: #45B095;
	text-decoration: underline;
}

/* This div has the header image. Note the z-index. */
#banner	{
	position: relative;
	width: 100%;		/* Stretches across the entire width of the browser. */
	height: 200px;
	margin: 0;
	padding: 0;
	background: url(HeaderMain.jpg) left no-repeat;	/* This is the image of the header. */
	border-bottom: solid 2px #FF00FF;
	z-index: 400; 		/* This z-index is lower than the maincontent's z-index so that the banner always sits behind the maincontent */
}

#headerRight {
	height: 165px;
	width: 155px;
	float: right;
	z-index: 400; 		/* This z-index is lower than the maincontent's z-index so that the banner always sits behind the maincontent */
}

/* *********************************************************************************
The area between the banner and footer is occupied by 3 div's that sit side-by-side: 
 left-sidebar - Left side. Fixed width and absolutely positioned. Contains other divs that act like pods for content.
 maincontent - Center. Liquid width. Takes whatever is left over after placing the left and right sidebars.
 right-sidebar - Right side. Fixed width and absolutely positioned. 
***********************************************************************************/

/**************************/
/* This div is fixed width and absolutely positioned. It contains additional div's. Note the z-index. */
#left-sidebar {
	position: absolute;
	width: 180px;  
	top: 180px;
	left: 0;
	margin: 0;
	padding: 10px;	/* Adds space around div. */
	font-size:90%;
    z-index: 600; 	/* This z-index is higher than maincontent z-index so that the left sidebar content always sits above the maincontent */
}

/* All the sidebar div's share these rules. */
.left-sidebar-all {
	margin-bottom: 7px;
	color: #000000;
	line-height: 1.25em;
}

/* The title of any left-sidebar div. */
.sidebar-left-title {
	padding: 0 0 5px 10px;
	font-size: 100%;
	font-weight: bold;
	color: #FF00FF;
	background-color: #EEEDF5;
	display: block;
}

/* The lists and paragraphs in each of the sidebar div's share these rules. */ 
.left-sidebar-all ul,
.left-sidebar-all p {
	list-style: none;	/* No bullets on these lists. */
	background-color: #FFFFFF;	/* Need to set the list's bg color to white if the div that the list sits in has a different bkgd. color. */
	padding: 10px;
}

/* Make the links block level selectable. */
.left-sidebar-all li a 	{	
	width: 100%; 	/* needed by IE6 */
	display: block;
}

/* Background image (butterfly) appears when the link is hovered over. */
.left-sidebar-1 a:hover	{ 
	background: #FFFFFF;
}

/* 1st div in left sidebar. Green border and bkgd. */
.left-sidebar-1	{
	border: 2px solid;
	border-color: #45B095;
	background-color: #DBE2E0;
}

/* 2nd div in left sidebar. Purple border and bkgd. */
.left-sidebar-2 { 
	border: 2px solid;
	border-color: #FF00FF;
	background-color: #FFFFFF;
}

/* 3nd div in left sidebar. Green border and white bkgd. */
.left-sidebar-3 { 		
	border: 2px solid;
	border-color: #45B095;
	background-color: #FFFFFF;
	text-align: left;
}

/* 4th div in left sidebar. Purple border and white bkgd. */
.left-sidebar-4 { 		
	border: 2px solid;
	border-color: #FF00FF;
	background-color: #FFFFFF;
	text-align: left;
}

/* Default link styling overridden for the 3rd sidebar. */
.left-sidebar-3 a,
.left-sidebar-3 a:visited {
	color: #45B095;
	text-decoration: none;
}
.left-sidebar-3 a:hover {
	text-decoration: underline;
}

/* This is the primary center div. */
#mainContent {
	position: relative;
	width: auto;		/* This causes the width to be liquid. */
	top: -30px;			/* negative top value causes the maincontent div to overlap the banner div. */
	margin: 0 175px 0 170px; 		/* Make the left and right margins big enough  */
	padding: 10px 35px;		/* Add some space between the border and the text. */
	background-color: #FFFFFF;
	background-image: url(Bkgd01.jpg);
	background-repeat: repeat-y;
	border: 1px solid #FF00FF;
	z-index: 500;					/* This z-index is lower than for the left and right side bars so the main content sits under the side bars. And this z-index is higher than the banner's z-index so the main content is above the banner. */
	/* height: 500px; */ 			/* Specify a height if your sidebar content is longer than your main content. */
}

#mainContent p {
	font-size: 90%;
}

#mainContent div p {
	width: 425px;
	font-size: 90%;
}

#fixedContent {
	position: relative;
	width: 500px;
	top: -30px;		/* negative top value causes the fixedContent div to overlap the banner div. */
	margin: 0px 175px 0px 170px; 		/* Make the left and right margins big enough  */
	padding: 10px 30px;		/* Add some space between the border and the text. */
	background-color: #FFFFFF;
	background-image: url(Bkgd01.jpg);
	background-repeat: repeat-y;
	border: 1px solid #FF00FF;
	z-index: 500;
}

#fixedContent div p {
	top: 0px;
	width: auto;
	font-size: 85%;
}

#fixedContent div img {
	float: left;
	text-decoration: none;
	margin: 0 10px 0 0;
	padding: 5px;
}

#right-sidebar	{
	position: absolute;	/* Fixed width, absolutely positioned. Note the z-index. */
	width: 175px; 		/* 1px less than the right margin of main content (1px is the width of the maincontent's right border). */
	top: 190px;   		/* Equal to the heights of banner plus banner's border plus 15 (for extra space above the div). */
	right: 5px;			/* Div nestles next to the right side. Not much space here. */
	border: 3px solid #45B095;
	background: #FFFFFF;
	padding: 10px;		/* Provides space between the border and the text in the div. */
	margin: 0 0 0 15px;
	font-size: 90%;
	z-index: 600; 		/* This z-index higher than the maincontent's z-index so that the right sidebar always sits above the maincontent. */
}

#right-sidebar2	{
	position: absolute;
	width: 175px;
	top: 400px;
	right: 5px;
	border: 3px solid #45B095;
	background: #FFFFFF;
	padding: 10px;
	margin: 0 0 0 15px;
	font-size: 90%;
	z-index: 650;
}

#content1 {
	position: relative;
	top: 20px;
	left: 40px;
	width: 430px;
}

#content2 {
	position: relative;
	top: 20px;
	left: 35px;
	width: 390px;
	border: 1px solid;
	border-color: #FF00FF;
	padding: 5px 10px 5px 10px;
	font-size: 90%;
}

#content2 div {
	float: left;
	width: auto;
	padding: 5px;
}

#contentRadio {
	position: relative;
	top: 20px;
	left: 20px;
	width: 470px;
}

#disclaimer1 {
	position: relative;
	width: 80%;
	min-width: 240px;
	margin: 10px;
	padding: 5px;
	text-align: center;
	border: 1px solid;
	border-color: #FF00FF;
	background-color: #DBD2DC;
	font-size: 75%;
}

#disclaimer2 {
	position: relative;
	left: 50px;
	width: 360px;
	margin: 10px;
	padding: 5px;
	text-align: center;
	border: 1px solid;
	border-color: #FF00FF;
	background-color: #DBD2DC;
	font-size: 75%;
}
/**************************/
/* The footer div stretches across the page. */
#footer	{
	width: auto;
	padding: 5px;
	font-size: 85%;
	color: #000000;
}

#footer div {
	height: 40px;
	padding: 5px;
	text-align: center;
}

/* The images in the footer act as separators for the links. */
#footer img {
	float: left;
	margin: 0 10px 0 0;
}

/* The footer links are green, and underlined when hovered over. */
#footer a,
#footer a:visited {
	color: #45B095;
	text-decoration: none;
	font-weight: bold;
	font-size: 85%;
}

#footer a:hover {
	text-decoration: underline;
}

#returnTop1 {
	position: absolute;
	padding: 5px;
	margin: 10px;
	width: 125px;
	top: 825px;
	left: 500px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 65%;
	color: #000000;
	text-align: center;
}

#returnTop2 {
	position: absolute;
	padding: 5px;
	margin: 10px;
	width: 125px;
	top: 850px;
	left: 625px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 65%;
	color: #000000;
	text-align: center;
}

#returnTop3 {
	position: absolute;
	padding: 5px;
	margin: 10px;
	width: 125px;
	top: 1750px;
	left: 625px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 65%;
	color: #000000;
	text-align: center;
}

.floatRight {
	float: right;
	width: auto;
}

.floatLeft {
	float: left;
	width: auto;
}

.style1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	font-weight: bold;
	font-style: italic;
	color: #000000;
	text-align: left;
}

.style2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	font-weight: bold;
	font-style: italic;
	line-height: 1.75em;
	color: #FF00FF;
	text-align: left;
}

.style3 {
	align: center;
}

/**************************/
/* skip link is positioned off the screen, but still allows screen readers to see it */
#skiplinks {
	position: absolute;
  	margin-left: -1000px;
}

/* don't display the title image used for printing */
.printtitle {
	display: none;
}