/*******************************************************************************/
/********  CSS Author: Stephen Hall                                      *******/
/********  Date: 01/15/2009                                              *******/
/*******************************************************************************/




/*******************************************************************************

	GLOBALS, put global font/paragraph classes here too.

*******************************************************************************/
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,a,blockquote,table,tr,th,td,embed,object{margin:0;padding:0;}

p {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #00368E;
	padding-bottom: 10px;
}

.text {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #00368E;
}
	
H1 { 
	font-family: Geneva, Arial, Helvetica, sans-serif; 
	font-size: 24px; 
	font-weight: bold; 
	color: #00368E;
	text-align: center;
	padding-bottom: 10px;
	}
H2 { 
	font-family: Geneva, Arial, Helvetica, sans-serif; 
	font-size: 22px; 
	font-weight: bold; 
	color: #00368E;
	padding-bottom: 10px;
	}
H3 { 
	font-family: Geneva, Arial, Helvetica, sans-serif; 
	font-size: 18px; 
	font-weight: bold; 
	color: #00368E;
	padding-bottom: 10px;
	}
H4 { 
	font-family: Geneva, Arial, Helvetica, sans-serif; 
	font-size: 17px; 
	font-weight: bold; 
	color: #00368E;
	padding-bottom: 8px;
	}
H5 { 
	font-family: Geneva, Arial, Helvetica, sans-serif; 
	font-size: 16px; 
	font-weight: bold; 
	color: #00368E;
	padding-bottom: 6px;
	}
H6 { 
	font-family: Geneva, Arial, Helvetica, sans-serif; 
	font-size: 14px; 
	font-weight: bold; 
	color: #00368E;
	padding-bottom: 6px;
	}

a,
a:link,
a:visited,
a:active { 
	font-family: Geneva, Arial, Helvetica, sans-serif; 
	font-size: 14px; 
	text-decoration: none; 
	color: #0066FF;
	}
a:hover { 
	font-family: Geneva, Arial, Helvetica, sans-serif; 
	font-size: 14px; 
	text-decoration: underline; 
	color: #0000FF;
	}

.bigredtext {
	font-family: Geneva, Arial, Helvetica, sans-serif; 
	font-size: 16px; 
	font-weight: bold; 
	color: #FF0000;
	text-align: center;
	}
.bigredlink,
.bigredlink:link,
.bigredlink:visited,
.bigredlink:active { 
	font-family: Geneva, Arial, Helvetica, sans-serif; 
	font-size: 16px; 
	font-weight: bold; 
	color: #FF0000;
	text-decoration: underline; 
	}
.bigredlink:hover { 
	font-family: Geneva, Arial, Helvetica, sans-serif; 
	font-size: 16px; 
	font-weight: bold; 
	color: #0066FF;
	text-decoration: none; 
	}

.boldblacktext {
	font-family: Geneva, Arial, Helvetica, sans-serif; 
	font-size: 16px; 
	text-decoration: none;
	color: #000000;
	font-weight: bold; 
	text-align: center;
	}
.boldblacklink,
.boldblacklink:link,
.boldblacklink:visited,
.boldblacklink:active { 
	font-family: Geneva, Arial, Helvetica, sans-serif; 
	font-size: 16px; 
	text-decoration: underline; 
	color: #000000;
	font-weight: bold; 
	}
.boldblacklink:hover { 
	font-family: Geneva, Arial, Helvetica, sans-serif; 
	font-size: 16px; 
	text-decoration: none; 
	color: #0000FF;
	font-weight: bold; 
	}

.redtext {
	font-family: Geneva, Arial, Helvetica, sans-serif; 
	font-size: 14px; 
	text-decoration: none;
	color: #FF0000;
	font-weight: none; 
	}
.redlink,
.redlink:link,
.redlink:visited,
.redlink:active { 
	font-family: Geneva, Arial, Helvetica, sans-serif; 
	font-size: 14px; 
	text-decoration: underline; 
	color: #FF0000;
	font-weight: none; 
	}
.redlink:hover { 
	font-family: Geneva, Arial, Helvetica, sans-serif; 
	font-size: 14px; 
	text-decoration: none; 
	color: #0000FF;
	font-weight: none; 
	}

.footertext {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #00368E;
	text-align: center;
}
.footerlink,
.footerlink:link,
.footerlink:visited,
.footerlink:active { 
	font-family: Geneva, Arial, Helvetica, sans-serif; 
	font-size: 12px; 
	text-decoration: none; 
	color: #0066FF;
	font-weight: none; 
	}
.footerlink:hover { 
	font-family: Geneva, Arial, Helvetica, sans-serif; 
	font-size: 12px; 
	text-decoration: underline; 
	color: #0000FF;
	font-weight: none; 
	}
li {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #00368E;
	padding-top: 5px;
	padding-bottom: 5px;
}

.menutext {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #00368E;
	font-style: italic; 
	text-align: center;
}
/*******************************************************************************

 LAYOUT INFORMATION: describes box model, positioning, z-order, background

 *******************************************************************************/

body {
	text-align: left;
}

	/* In this case, the background image should go in the html, because it is a unique image, so it will expand the layer to fit it.
	   notice that now we do not have to worry about specifying height and width, plus there will be no css sizing bugs.  The old div was not expanding.
	   If it is a repeated image, or an image that will be used in multiple places, it should be in the css */
	   
/*#backgroundimage {
	z-index: -1000;
	position: relative;			/* this positions the layer relative to where it would be if it were text, we centered the text in the body above */
/*	left: 150px;
/*	margin-right: auto; 		/* These are also lines that are needed to center */
/*	margin-left: auto;  		/* within the body, "so intuitive like the mac" */
*}

#container {
	z-index: 0;
	position: relative; 		/* this positions the layer relative to where it would be if it were text, we centered the text in the body above */
/*	width: 960px; 				/* this adds up to the width of the pink image plus the width of nav1 plus a 10 px gap between nav1 and pinkarea*/
	margin-right: auto; 		/* These are also lines that are needed to center */
	margin-left: auto;  		/* within the body, "so intuitive like the mac" */
}

	#logo {
		z-index: 1000;
		position: absolute;
		top: 10px;
		left: 10px; 			/* Position from the left to be consistant with the container positioning */
		width: 200px;
		height: 85px;
	}

	#nav1 {
		z-index: 1100;
		position: absolute;
		top: 110px;
		left: 40px; 			/* Position from the left to be consistant with the container  positioning */
		width: 170px;
	}

	/* In this case, the pinkarea background image should go in the html, because it is a unique image, so it will expand the layer to fit it.
	   notice that now we do not have to worry about specifying height and width, plus there will be no css sizing bugs
	   If it is a repeated image, or an image that will be used in multiple places, it should be in the css */
	#content { 
		z-index: 2000;
		position: absolute; /* this tells the content div to be position RELATIVE to the top left corner of the container, so intuitive, I know */
		top: 20px;
		left: 210px;		
		width: 720px; 		/* I did specify a width, just to remind us that the image is 810px, or if the image is not rendered properly */
		padding: 10px;
	}
	
		#pagetitle {
			z-index: 2100;
			position: relative;
			top: 10px;
			left: 0px;
			width: 720px;
		}
		
		#redheadline {
			z-index: 2200;
			position: relative;
			top: 20px;
			left: 10px;
			width: 720px; 				/* this adds up to the width of the pink image plus the width of nav1 plus a 10 px gap between nav1 and pinkarea*/
			text-align: center;
		}
		
		#subcontent {	
			z-index: 2300;
			position: relative;
			top: 10px;
			left: 0px;
			width: 720px;
			padding: 10px;
			overflow: auto;			
		}


/*******************************************************************************

 DESIGN INFORMATION: describes color scheme, borders, fonts

 *******************************************************************************/


/* notice how the properties are cascaded */


/* This syntax applys these properties to any ul tag the contains the nav class (i.e. <ul id="whatever" class="nav">)
   doing this allows us to cascade these properties to all of the navs at the sametime, and only apply to ul tags */
 
ul.nav {
	list-style-image: none;
	list-style-type: none;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 13px;

	font-weight: bold;
}

/* These will apply to any <a> tag nested in a <ul class="nav"> tag */
ul.nav a,
ul.nav a:link, 
ul.nav a:visited, 
ul.nav a:active {
	font-family: Geneva, Arial, Helvetica, sans-serif; 
	font-size: 14px; 
	font-weight: bold; 
	color: #000000;
	text-decoration: none;
	cursor: pointer; 			/* this makes the pointer change when it is over the link, nifty */
}

ul.nav a:hover,					/* separate by commas to apply attributes to multiple css items simultaniously */
ul.nav a:focus {
	font-family: Geneva, Arial, Helvetica, sans-serif; 
	font-size: 14px; 
	font-weight: bold; 
	color: #000000;
	text-decoration: underline;
/*	background-color: blue; 	/* you can add any attribute to these, uncomment this line to see what happens */	
}

/* These will apply to any <a> tag nested in a <ul class-"nav"> tag on the nav1 layer */
#nav1 ul.nav a {
	
/*	display: block;				/* This makes the a tag a block item which allows paragragh type formatting such as the padding below */
/*	padding-top: 5px;			/* the padding is assigned to <a> to make roll over functional on padded area */
/*	padding-bottom: 5px;
	color: #000000;
}