/* General Notes- Rules preceded by # are ID selectors and are
	assigned in the HTML markup like this: <div id="logo">.
	IDs are unique. That is, an ID can only be assigned to
	one element per page.
	
	Rules preceded by a period are Class Selectors and are
	assigned in the HTML markup like this:
	<div class="trigger">
	
	Some elements are assigned both an ID and a Class, like this:
	<div class="trigger" id="triggerlayer1"> */
	
/*	html {
	height:100%;
	background-image:   url(/images/Left-Background.gif);
	background-position: 1px 0px;
	background-repeat: repeat-y;
}*/

/*	Body Rule Notes
	margin values are in shorthand: Top Right Bottom Left.
	 */
body {
	/*	background-image:   url(/images/WakefieldLogo-background.gif); */
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	height:100%;
	text-align: justify;
	line-height: 120%;
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#660000,endColorStr=white)
}

#outer {
height:100%;
min-height:100%;/*for mozilla*/
}

/* html>body #outer {height:auto}for mozilla */


/*	Position absolute turns a DIV into what Dreamweaver
	refers to as a LAYER */
#top {
	background-image:   url(filler.jpg);
	background-repeat: repeat-x;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 86px;
	visibility: visible;
	z-index: 2;
	right: 0px;
	overflow: visible;
	padding: 0;
	margin-right: 0px;
}


/* 	The main content DIV has no position and is therefore
	considered STATIC. */
#maincontent {
	font-size: 0.8em;
	/*	margin: 110px 0 0 175px; */
	margin: 110px 15px 0 200px;
	max-width: 700px;
	min-width: 300px;
	min-height: 750px;
}
/* 833px - 200px - 15px = 618  */	

#maincontent2 {
	font-size: 0.8em;
/*	margin: 110px 0 0 175px; */
	margin: 110px 10px 5px 10px;
/*	max-width: 700px;
	min-width: 300px;
	min-height: 750px; */
	float: right;
	width: 612px;
}

/* 	By adding a Tag "p" after the maincontent ID Selector we
	create what is called a Descendant Selector. In this instance
	the rule is defining styles for all paragraphs that are
	children (descendants) of the maincontent DIV. Another way
	of saying this is "all paragraphs inside maincontent".

	Line height set for readability. */

#maincontent p {
	line-height: 160%;
}

#maincontent table {
	line-height: 120%;
	text-align: left;
}


/* 	Link styles for Main Content only
	Active and Focus trigger the color change in IE-PC and other
	modern browsers when tabbing through the links with keyboard. */
#maincontent a:link {color: #0000CC;}
#maincontent a:visited {color: #6666CC;}
#maincontent a:hover, #maincontent a:active, #maincontent a:focus {color: #000000;}


/* 	Use a combined selector to assign all properties common to each
	of the trigger DIVs, which are absolutely positioned
	Dreamweaver 'Layers' */
#triggerlayer1, #triggerlayer2, #triggerlayer3, #triggerlayer4, #triggerlayer5, #triggerlayer6, #triggerlayer7, #triggerlayer8 {
	position: absolute;
	top: 55px;
	background-color: transparent;
	border: 0;
	visibility: visible;
	z-index: 35;
	height: 25px;
}

/* #triggerlayer7, #triggerlayer8 {
	position: absolute;
	top: 46px;
	background-color: transparent;
	border: 0;
	width: 108px;
	visibility: visible;
	z-index: 35;
}/*

/* 	Now use individual selectors for each trigger Layer to assign their unique properties.
	The first button is wider than the rest, so only its width is unique and declared here. */
#triggerlayer1 {left: 5px; width: 110px;}
#triggerlayer2 {left: 115px;}
#triggerlayer3 {left: 214px;}
#triggerlayer4 {left: 313px; width: 87px;}
#triggerlayer5 {left: 400px; width: 106px;}
#triggerlayer6 {left: 505px; width: 123px;}
#triggerlayer7 {left: 628px;}
#triggerlayer8 {left: 727px;}


/* 	Link styles for the Trigger Layers

 	Set to block to make link fill up entire layer with
	background color that shows through the transparent fill of the trigger images */
.trigger a {
	display: block;
	background-color: #F9F2DD;
}

/* 	When the trigger images are hovered over, the background color changes to __________.
	We don't change text color because the link text is actually the non-transparent
	portion of the trigger image.
	
	Active and Focus trigger the color change in IE-PC and other
	modern browsers when tabbing through the links with keyboard. */
.trigger a:hover, .trigger a:active, .trigger a:focus {
	background-color: #FFE595;
}

/* 	The Submenu Layers
 	Use a combined selector to assign all properties common to each
	of the Submenu Layers. */
#submenu1, #submenu2, #submenu3, #submenu4, #submenu5, #submenu6, #submenu7, #submenu8 {
	position: absolute;
	width: 250px;
	top: 80px;
	font-size: 0.7em;
	background-color: #FFFFFF;
	visibility: hidden;
	z-index: 33;
	line-height: 120%;
	text-align: left;
}
/* 	Now use individual selectors for each trigger Layer to assign
	their unique properties, in this case the left property (adding
	3 px to the triggerlayer)*/
#submenu1 {left: 8px;}
#submenu2 {left: 118px;}
#submenu3 {left: 217px;}
#submenu4 {left: 316px;}
#submenu5 {left: 403px;}
#submenu6 {left: 508px;}
#submenu7 {left: 628px;}
/* #submenu8 {left: 730px;} */

/* 	The submenu links are in paragraphs, so we set the margin to zero
	so there is no gap between links */
.submenus p {
	margin: 0;
	padding-top: 1px;
}


/* 	Submenu Link Styles
 	Use a combined selector for a and a:visited. Set padding in shorthand
	to 1px on top and bottom, 8px right and 12px left.
	
	Set display to block so entire link box, including padding is clickable.
	Set border to 1px solid.
	
	Set border colors in shorthand to Light Gray on top and left - and
	Charcoal Gray on right and bottom. This combination of colors creates
	a raised button-type effect.
	
	Set background color, text color and turn off underlines. */
.submenus a, .submenus a:visited {
	display: block;
	padding: 3px 8px 3px 9px;
	border: 1px solid;
	border-color: #999 #333 #333 #999;
	background-color: #F9F2DD;
	color: #000099;
	text-decoration: none;
}

/* 	Change background and text colors when links are hovered over.
	Use a combined selector for hover, active, and focus.
	
	Active and Focus trigger the color change in IE-PC and other
	modern browsers when tabbing through the links with keyboard. */
.submenus a:hover, .submenus a:active, .submenus a:focus {
	background-color: #FFE595;
	color: #000099;
}


/* The footer is a Static DIV set with a substantial top margin to
	separate it from the main content above.
	
	Font size is 75% of the global font size.
	
	Padding top is set to 6px to provide separation between the
	footer contents and the 2px wide dotted border above it. */
/*
#footer {
	margin: 24px 0 0 180px;
	font-size: 70%;
	padding: 6px 0 0 0;
	border-top: 2px dotted #CCD3B0;
	color: #990000;
}
*/
/* 	Link styles for Footer Content only
	Active and Focus trigger the color change in IE-PC and other
	modern browsers when tabbing through the links with keyboard. */
/* Gary commented this out
#footer a:link {color: #A2B38F; text-decoration: none;}
#footer a:visited {color: #A2B38F;}
#footer a:hover, #footer a:active, #footer a:focus {color: #000000;} */