@charset "UTF-8";

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color:#ffffff;
}



/* DEFINING THE LAYOUT DIVS !!!!!!!!!!!!!!!!!! */

/* 

first we define the working area that is to be required by the site, in this case we want to keep the sites content centered both vetically and horizontally on the screen in a div that will be no larger than 600 pixels high by 800pixels wide.

We do this by entering 3 main divs to control the vertical position :-

outer, to set a default height value in pretty much the same way we used the spacer gif in the tables example to stop the cells from colapsing
middle, to offset the display area at 50% height of the available screen area
inner, to contain the actual content to be displayed in the vertical position.

*/

#outer {height: 800px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 5%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 99%;}

#inner {position: relative; top: -5%;} /* for explorer only */

/* optional: #inner[id] {position: static;} */

/* to control the horizontal alignment we need only use the default align= center attribute of the "inner" div....i.e.the surrounding div controls the alignment */

#content {position:relative; height:620px; width:860px; background-image:url(background.png); background-repeat:no-repeat; } 

#navigation_area {position: relative; float: right; width:500px; height:20px; top:90px;} /* this controls the physical position of the navigation area and the display of list items as the navigation will be dealt with as a list */

#navigation_area ul {
   margin: 0px;
   padding:0px;
}

/* the display will determin the horizontal list display */
#navigation_area li {
   list-style-type: none;
   display: inline;
   margin-top: 0px;
   margin-bottom: 0px;
   margin-right:20px;
}
/*  note the a. at the begining of this class to assign it a seperate link style */
a.siteNavlink, a.siteNavlink:visited{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
		font-weight: normal;	
		text-decoration: none;	
		text-align: left;	
		color: #000000;	

}
a.siteNavlink:hover{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: normal;	
	text-decoration: none;	
	text-align: left;	
	color:#000099;	

}

#left_col {position: absolute; top: 150px; left:20px; width:500px;}




body_copy {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size:9em;
	font-style: normal;
	color: #000000;
	text-decoration: none;
}

/*  font styles are here */
.style2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: Medium;
	font-style: italic;
}
.style3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
}
.style5 {font-family: Arial, Helvetica, sans-serif; font-size: small; font-weight: bold; }

.style7 {color: #000000}