/*  This CSS file formats the fonts, colors, links as well as setting how 
certain elements on the page are displayed.  */

html {
	height: 100%; 
	margin-bottom: 1px;}
	
body {
	background: #ffffff url('images/background.jpg') repeat-x;
	color: #000000;
	font: normal 80% Verdana, Verdana, Geneva, sans-serif;
	margin: 0;
	padding: 0;	
	text-align: center;}

hr {
	background-color: #5598bc;
	color: #5598bc;
	border: none;
	height: 1px;
	width: 100%;}

img {
	border: none;}

ul {
	padding: 0;
	margin: 0 0 20px 20px;
	list-style: square;}

/*  The items below the properties for the links that appear in the
main text area as well as in the sidebar of the pages  */

a {
	color: #31627f;
	text-decoration: underline;
	outline: none;
	font-weight: bold;}

a:hover {
	color: #606060;
	text-decoration: underline;
	font-weight: bold;}

a:active {
   outline: none;
   overflow: hidden;}

/*  The items below set the properties for the fonts, sizes, and
colors used for headings 1 through 6. Typically h1 - h3 are used
in the main content area and h4 - h6 are used in the sidebar  */

h1 {
	color: #808080;
	font: normal 26px Georgia, Georgia, serif;
	text-align: left;
	letter-spacing: 1px;
	padding: 0;
	margin-bottom: 30px;}

h2{
   background: #ffffff url('images/endcap1.jpg') no-repeat;
	color: #5598bc;
	font: normal 20px Tahoma, Geneva, sans-serif;
	letter-spacing: 2px;
	text-align: left;
	padding: 7px 0 7px 40px;}

h3{
   background: #ffffff url('images/endcap2.jpg') no-repeat;
	color: #5598bc;
	font: normal 20px Tahoma, Geneva, sans-serif;
	letter-spacing: 2px;
	text-align: left;
	padding: 7px 0 7px 40px;}

h4 {
   background: #ffffff url('images/endcap3.jpg') no-repeat;
	color: #808080;
	font: bold 16px Arial, Helvetica, sans-serif;
	padding: 7px 0 7px 40px;
	text-align: left;}

h5 {
	color: #5598bc;
	font: bold 16px Arial, Helvetica, sans-serif;
	text-align: left;}

h6 {
	color: #808080;
	font: bold 14px Arial, Helvetica, sans-serif;
	margin-bottom: 0;
	padding-bottom: 0;}

/* You can create your own dropcap effect to a heading or to a
paragraph by spanning the first letter with the dropcap class */	

.dropcap {
   font: normal 55px "Times New Roman", serif;
   float: left;
   color: #31627f;
   line-height: 55px;
   padding: 0 1px 0 0;}

.center {
	text-align: center;}	

.clear {
	clear: both;}

/*  To keep the content centered on the page, all of the areas
are placed within a wrapper. The item below defines this wrapper.  */

#wrapper {
   background: #ffffff url('images/wrapper.jpg');
	width: 900px;
	text-align: left;
	margin: 0 auto;}

/* TOP HEADER, GLOBAL, AND MAIN NAVIGATION */
/*  The items below set the properties of the top header as
well as the global navigtion links and the main navigation
link group that sit on top of the header image. */

#header {
	position: relative;
	width: 900px;
	height: 250px;}

#global {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	color: #ffffff;
	height: 30px;
	line-height: 30px;
	letter-spacing: 1px;
	width: 880px;
	padding-right: 20px;
	text-align: right;
	font-size: 75%;}

#global ul {
   margin: 0;
   padding: 0;
   list-style-type: none;}

#global li {
   display: inline;
   margin: 0;}

#global li a {
	color: #FFFF00;
	font-weight: normal;
	text-decoration: none;}

#global li a:hover {
	color: #FFFF00;
	font-weight: normal;
	text-decoration: underline;}

/* The items below set the properties for the main
navigation block.*/

#navbar {
	position: absolute;
	left: 100px;
	top: 205px;
	z-index: 2;
	color: #ffffff;
	letter-spacing: 1px;
	line-height: 35px;
	width: 80%;
	text-align: center;
	white-space: nowrap;
	
}

   
/* START THE CODE FOR THE MENUS */

/* IF YOU EDIT THE SUB MENU WIDTH - EDIT 160 IN 4 PLACES TOTAL */

/* menu ver 3.0 2007 */





/* CODE FOR MENU OUTER TABLE */



.menutable 		{
			background-image: url("../picts/bluewhite/menu.gif");
			background-color: #FFFFFF;
			white-space: nowrap;
			width:100%;
			border-top: #B4BFCF 1px solid;
			border-bottom: #B4BFCF 1px solid;
			padding: 0px;
			margin: 0px;
			
			}


/* CODE FOR MENU 2ND OUTER TABLE */

#menunav, #menunav ul 	{
	float: left;
	white-space: nowrap;
	width: 100%;
	list-style: none;
	padding: 0px;
	border: solid #FFFFFF;
	border-width: 0px 0px 0px 0px;
/* NOTE: BORDERs ABOVE ARE | top | right | bottom | left */	margin: 0px 0px 0px 0px;
}








/* TOP LEVEL MARGINS, FONT FACE & FONT COLORS & PADDING */

#menunav a 		{
	color: #FFFFFF;
	font: 14px Verdana, Geneva, sans-serif;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	padding: 3px 5px 4px 5px;
	width: auto;
	display: block;
	cursor: pointer;
	
}



/* TOP LEVEL BACKROUND COLOR AND BORDERS - EDIT MENU IMAGES ALSO */

#menunav li 		{
			
			border: solid #B4BFCF;
			border-width: 0px 0px 0px 0px;	/* YOU CAN ADD A RIGHT BORDER */
			/* NOTE: BORDERs ABOVE ARE | top | right | bottom | left */
			float: left;
			padding: 0px 25px 4px 3px;
			}



/* TOP LEVEL HOVER FONT COLOR */

#menunav li a:hover	{
			
			color: #FFFFFF;
			text-decoration: none;
			cursor: pointer;
			}




/* TOP LEVEL HOVER BACKGROUND COLOR AND BORDERS - EDIT MENU IMAGES ALSO */

#menunav li:hover, #menunav li.IEMhover
			{

			background-color: #31627f;
			border: solid #B4BFCF;
			border-width: 1px 1px 1px 1px;	/* YOU CAN ADD A RIGHT BORDER */
			/* NOTE: BORDERs ABOVE ARE | top | right | bottom | left */
			}










/* SUB LEVEL FONT & FONT COLOR & PADDING */

#menunav li ul a 	{
			font: 11px verdana, arial, sans-serif;
			color: #222222;
			font-weight: normal;
			text-decoration: none;
			text-align: left;
			padding: 4px 0px 4px 0px;
			text-indent: 0px;
			cursor: pointer;
			}



/* SUB LEVEL FONT HOVER COLOR */

#menunav li ul a:hover 	{
			background-image: none;
			color: #FFFFFF;
			text-decoration: none;
			cursor: pointer;
			}


/* SUB LEVEL OUTER BORDER */

#menunav li ul 		{
	position: absolute;
	left: -999em;
	height: auto;
	width: 140px;
	border: solid #C0C0C0;
	border-width: 1px 1px 1px 1px;
/* NOTE: BORDERs ABOVE ARE | top | right | bottom | left */	margin: 0;
}


/* SUB LEVEL BACKGROUND COLOR & BORDER OPTION FOR EACH LINK */

#menunav li ul li 	{
			background-image: none;
			background-color: #FFFFFF;
			border: solid #C0C0C0;
			border-width: 1px 1px 0px 0px;
			/* NOTE: BORDERs ABOVE ARE | top | right | bottom | left */
			}


/* SUB LEVEL HOVER BACKGROUND AND BORDERS */

#menunav li ul li:hover, #menunav li ul li.IEMhover
			{
			background-image: none;
			background-color: #31627f;
			border: solid #C0C0C0;
			border-width: 1px 0px 0px 0px;
			/* NOTE: BORDERs ABOVE ARE | top | right | bottom | left */
			}





/* SUB MENU WIDTH - ALSO EDIT TWO BELOW AND ONE ABOVE TO MATCH */

#menunav li li {
	padding-right: 0px;
	width: 140px;
}



/* SUB MENU LINK WIDTH */

#menunav li ul a {
	width: 140px;
}



/* FOR 3rd LEVEL MENU LOCATION */

#menunav li ul ul {
	margin: -21px 0px 0px 70px;
}





#menunav li:hover ul ul, #menunav li:hover ul ul ul, #menunav li.IEMhover ul ul, #menunav li.IEMhover ul ul ul
{ left: -999em; }

#menunav li:hover ul, #menunav li li:hover ul, #menunav li li li:hover ul, #menunav li.IEMhover ul, #menunav li li.IEMhover ul, #menunav li li li.IEMhover ul
{ left: auto; }





/* FOR 3rd LEVEL ARROW */

#menunav a.parent {
	background: url(../picts/menu-arrow.gif) center right no-repeat;
}


   

   

/* TWO COLUMN LAYOUT */
/*  The items below sets the properties for the sidebar and
content blocks as well as a wider content area for the single
column page layout  */

#sidebar {
	font-size: 85%;
	float: left;
	width: 200px;
	padding: 0 10px 0 20px;}

#content {
	float: right;
	width: 640px;
	line-height: 1.5em;
	padding: 0 20px 0 10px;}

/* ONE COLUMN LAYOUT */

#contentwide {
	float: right;
	width: 860px;
	line-height: 1.5em;
	padding: 0 20px 0 20px;}

/* THREE COLUMN LAYOUT */

#sidebar-left {
	width: 200px;
	float: left;
	text-align: left;
	font-size: 85%;
	padding: 0 10px 0 20px;}

#contentmiddle {
	width: 440px;
	float: left;
	text-align: left;
	line-height: 1.5em;
	padding: 0 10px;}

#sidebar-right {
	width: 180px;
	float: right;
	text-align: left;
	font-size: 85%;
	padding: 0 20px 0 10px;}

/* FOOTER AREA */
/*  The items below set the footer properties as well as the text
and links that appear in this area  */

#footer {
	clear: both;
	background: #ffffff url('images/footer.jpg') no-repeat;
	color: #808080;
	text-align: center;
	letter-spacing: 1px;
	line-height: 2em;
	font-size: 80%;
	padding-top: 40px;
	height: 60px;}

#footer ul {
   margin: 0;
   padding: 0;
   list-style-type: none;}

#footer li {
   display: inline;
   margin: 0;}

#footer li a {
   color: #808080;
   font-weight: normal;
   text-decoration: none;}

#footer li a:hover {
   color: #31627f;
   font-weight: normal;
   text-decoration: underline;}

#footer p {
   margin: 0;
   padding: 0;}

/* If you want to highlight a section of text, you can place it within
a div with the box class applied. This will put the contents within
a block with a light gray background and a thin dashed line around it. */

.box {
	background: #f8f8f8;
   border: 1px dashed #c2c2c2;
	padding: 10px;}
	
.box ul {
   margin: 0 0 0 20px;
   padding: 0;}

/* CONTACT PAGE FORM */
/*  This template contains a form that is set within a fieldset. The
items below set the properties for the form, input fields, the submit
button, etc.  */

fieldset {
	border: 3px double #c2c2c2;
	padding: 5px;
	margin: 10px 0;}

legend {
	background-color: #ffffff;
	color: #5598bc;
	font: bold 16px Arial, Helvetica, sans-serif;
	letter-spacing: 2px;
	padding: 2px 4px;
	margin: 0;}
	
#contactform {
	padding: 5px;
	text-align: left;
	margin: 20px 0 5px 0;}

#contactform label {
	width: 150px; 
	float: left; 
	text-align: right; 
	margin: 3px 5px 5px 5px; 
	clear: both;}

#contactform input {
	margin: 3px 5px 5px 5px; 
	background-color: #ffffff; 
	color: #000000; 
	border: 1px solid #c2c2c2;}

#contactform textarea {
	font: normal 12px Verdana, sans-serif;
	margin: 3px 5px 5px 5px; 
	background-color: #ffffff; 
	color: #000000; 
	border: 1px solid #c2c2c2;}

#contactform .button {
	text-align: center; 
	margin: 5px 0 0 170px; 
	border: none;
	clear: both;}

/* CATALOG DISPLAY TABLE */
/*  The catalog is set into a simple three-column table. The
items below set the properties for the catalog display.  */

table {
	padding: 0px;
	border-collapse: collapse;
	font-size: 100%;
	width: 100%;}

.catalog {
	padding: 8px;
	line-height: 1em;
	text-align: center;
	vertical-align: top;
	width: 33%;}

/* CALENDAR DISPLAY */
/*  The calendar sits within a div so that it can be
centered in the sidebar area.  */

.calendar {
	text-align: center;
	margin: 0 0 20px 0;}

/* IMAGE FLOATS */
/*  Your smaller images can be floated to the left or the
right so your text can flow around them. You can also have
the images appear with or without a small border. The items
below sets the properties for the classes you may apply to
your images.  */

.imagecenter-border {
	border: 3px #c2c2c2 double;
	display: block;
	margin: 0 auto;}
	
.imagecenter-noborder {
   display: block;
	margin: 0 auto;}
	
.imageleft-noborder {
	margin: 0 10px 0 0; 
	float: left;}

.imageright-noborder {
	margin: 0 0 0 10px; 
	float: right;}
	
.imageleft-border {
	margin: 0 10px 0 0; 
	float: left;
	border: 3px #c2c2c2 double;}

.imageright-border {
	margin: 0 0 0 10px; 
	float: right;
	border: 3px #c2c2c2 double;}