/* Checklist
 1.  Change the #container width to the content frame width, in em.
 2.  Change the #header height to the header height, in em.
 3.  Change the #mainMenu height to the main menu height, in em. 
 4.  In #mainMenu li, calculate width based on menu system items.  While here, change the color of the menu text.
 5.  In most cases, you'll want to match the color from #4 above to #mainMenu li a.  Change it.
 6.  In #main menu li:a hover, change the rollover effect color of the menu.
 7.  In #footer, change height, in em.
 8.  In #footerText, change characteristics.
 9.  Change h1, h2, h3, h4 characteristics.
*/


/* Main Body, Generic to Entire Site */

body {
	margin: 0px; 
	padding: 0px; 
	font: 1.0em Arial, Helvetica, sans-serif; 
	background: url('../images/backgroundImage.jpg') top left repeat;
	background-color:#FFFFFF; 
	color:#000000;
	font-size:10px;
	text-align:center;
}

#container {
	margin: 0.5em auto; 
	width: 84.0em; 
	position: relative; 
	text-align: left; 
	font:1.0em Arial, Helvetica, sans-serif;
}

/* Paragraph stuff.  I hightly recommend using a simple <p> so that it is compatible with Rich-Text Editors */
p {
	font: 1.4em Arial, Helvetica, sans-serif;
	color:#D28F3D;
	padding:0em;
	margin:0 0 0 0;
	line-height:1.3em;
}

a {
	text-decoration:none;
	color:#D51E23;
}

/* Headers */
h1 {
	font: 1.8em Arial, Verdana, Helvetica, sans-serif;
        font-weight:bold;
        color:#D28F3D;
        text-align:left;
		padding-top:0.5em;
		padding-bottom:0.5em;
        margin:0 0 0 0;
}

h2 {
        font: 1.4em Arial, Verdana, Helvetica, sans-serif;
        font-weight:bold;
        color:#002E73;
        text-align:left;
        padding:0.1em;
        margin:0 0 0 0;
}

h3 {
        font:1.6em Arial, Verdana, Helvetica, sans-serif;
        font-weight:bold;
        color:#98C32E;
        text-align:left;
        padding:0.0em;
        margin:0 0 0 0;
}

h4 {
        font:1.0em Arial, Verdana, Helvetica, sans-serif;
        font-weight:bold;
        color:#98C32E;
        text-align:left;
        padding:0.0em;
        margin:0 0 0 0;
}

/* Special Fonts */
font.plaque {
	font: 1.3em Arial, Helvetica, sans-serif;
	color:#2F3330;
	line-height:1.3em;
}

font.plaqueTitle {
	font: 1.5em Arial, Helvetica, sans-serif;
	color:#000000;
	line-height:1.3em;
	font-weight:bold;
}

/* Header */
#header {
	height: 14.5em; 
	padding:0em; 
	background: url('../images/mainHeader.jpg') top left no-repeat;
}

/* Use these for two-column forms */
#formContent {
	width:50.0em;
	overflow:hidden;
	clear:both;
	text-align:left;
	background:#2F3330;
}

#formLeft {
	width:18em;
	float:left;
	text-align:left;
	padding-left:2em;
	padding-right:5em;
	background:#2F3330;
	height:2.0em;
	padding-top:1.0em;
}

#formRight {
	width:25em;
	float:right;
	text-align:left;
	background:#2F3330;
	height:2.0em;
	padding-top:1.0em;
}

/* Three, Two, One  Column Div Techniques - always start with content.  For one col, just use the container.  */
#content {
        overflow:hidden;
        clear:both;
        font:1.0em Arial, Helvetica, sans-serif;
        width:84.0em;
		height:41.5em;	/* only use this technique if you are fixing the footer location */
        background: url('../images/contentBackground.jpg') repeat-x;
		padding-top:0.6em;  /* ??? anything other than 0em causes a space between the main content and menu system */
}

	/* Here's a three column container */
#threeColLeft {
        font:1.0em Arial, Helvetica, sans-serif;
        width:24.0em;                           /* Left Column, Width */
        padding-left:2em;
        padding-right:1em;
        float:left;
        border-right:26.0em;
        margin-right:-26.0em;
        text-align:left;
}

#threeColMiddle {
        width:23.0em;
        padding-left:0em;
        padding-right:1em;
        float:right;
}

#threeColRight {
        width:27.0em;
        padding-right:0em;
        padding-left:0em;
        float:right;
}

	/* Here's a two column container */
#twoColLeft {
        margin:0 0 0 0;
        border-right: 50.0em;
        margin-right: -50.0em;
        width:45.0em;
        float:left;
        text-align:left;
        padding-left:5em;
        padding-right:1em;
}

#twoColRight {
        margin:0 0 0 0;
        width:24.2em;
        float:right;
        text-align:left;
        padding-right:4em;
}

/* Footer */
#footer {
	width:84.0em;
	height:5.5em;
	background: url('../images/footer.jpg') no-repeat;
}

#footerTextLeft {
	width:53.3em;
	float:left;
	text-align:left;
	font:1.5em Arial, Helvetica, sans-serif;
	font-style:italic;
	line-height:3.0em;  /* you can use this to adjust y-positioning */
	margin: 0em 0em 0em 0em;
	padding-left:2.6em;
	color:#2F3330;
}

#footerTextRight {
	width:36.0em;
	float:right;
	text-align:right;
	font:1.0em Arial, Helvetica, sans-serif;
	margin:0em 0em 0em 0em;
	padding-right:1em;
	line-height:7.4em;
}

#footerTextRight a:hover {
        text-decoration:none;
        color:#004087;
}

#footerTextRight a {
        text-decoration:none;
        color:#004087;
}

iframe#references {
	width: 48em;
	height: 30em;
	overflow: auto;
	margin: 0em;
	padding: 0em;
	background: none transparent;
	allowtransparency: true;
	border:0;
}

// SLIDESHOW STUFF
#slideshowContainer {
        width: 28.4em;
        height: 21.3em;
		padding-top:2em;
		padding-left:2em;
		text-align:center;
}       
        
.fade-box {
		position:absolute;     /* this is a troublemaker and destroys the CSS menu */
        margin-left: 0px;
		padding-top:2em;
		padding-left:10em;
        width: 28.4em;
        height: 21.3em;
        display:table-cell;
        vertical-align:middle;
		z-index:0;
}