/*  This "For Print" CSS file formats the fonts, colors, links as well as setting how 
certain elements on the page are displayed (or hidden) when printing.  */

html {
	height: 100%; 
	margin-bottom: 1px;}
	
body {
	background-color: #ffffff;
	color: #000000;
	font: normal 80% Verdana, Verdana, Geneva, sans-serif;
	margin: 0;
	padding: 0;	
	text-align: center;}

hr {
	background-color: #547caa;
	color: #547caa;
	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:active {
	color: #547caa;
	text-decoration: underline;
	outline: none;
	font-weight: bold;}

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

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

/*  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: #ffffff;
	font: normal 34px Georgia, Georgia, serif;
	text-align: center;
	letter-spacing: 1px;
	margin: 0 0 10px 0;
	padding: 0;}

h2{
	color: #547caa;
	font: normal 28px Georgia, Georgia, serif;
	letter-spacing: 2px;
	text-align: left;
	padding: 7px 0;}

h3{
	color: #808080;
	font: normal 20px Tahoma, Geneva, sans-serif;
	letter-spacing: 2px;
	text-align: left;
	padding: 7px 0;}

h4 {
	color: #808080;
	font: bold 16px Arial, Helvetica, sans-serif;
	padding: 7px 0;
	text-align: left;}

h5 {
	color: #547caa;
	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;}
	
/* The heading2 tag is used as the bookmark locations. In
order to keep these from looking like regular hyperlinks,
they are styled below. */

h2 a {
	color: #547caa;
	font: normal 28px Georgia, Georgia, serif;
	letter-spacing: 2px;
	text-align: left;
	padding: 7px 0;
	text-decoration: none;}

h2 a:hover {
	color: #547caa;
	font: normal 28px Georgia, Georgia, serif;
	letter-spacing: 2px;
	text-align: left;
	padding: 7px 0;
	text-decoration: none;}

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

.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-color: #ffffff;
	width: 100%;
	text-align: left;
	margin: 0 auto;}

/*  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: 820px;
	height: 175px;
	display: none;}

#sitename {
   position: absolute;
   left: 0;
   top: 40px;
   width: 820px;
   z-index: 1;
   color: #000000;
   text-align: center;}
   
#sitename p {
   font-size: 85%;
   letter-spacing: 2px;
   margin: 0; padding: 0;}

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

#navbar {
   position: absolute;
   left: 0;
   top: 120px;
   z-index: 2;
   color: #ffffff;
   letter-spacing: 1px;
   height: 30px;
   width: 820px;
	line-height: 30px;
	text-align: center;
	display: none;}

#navbar li {
   display: inline;
   margin: 0;
   padding: 0;
   list-style-type: none;}

#navbar li a {
   color: #ffffff;
   font-weight: bold;
   text-decoration: none;
   margin: 0;
   padding: 0 20px;}

#navbar li a:hover {
   color: #ffffff;
   font-weight: bold;
   text-decoration: underline;}
   
/* In order for the content area to scroll, the text is placed
in a div with an overflow value */

#innerwrapper {
   width: 100%;
   height: 100%;
   overflow: visible;}

/*  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  */

#content {
	line-height: 1.5em;
	padding: 0 15px 10px 10px;}

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

#footer {
   background-color: #ffffff;
	/*clear: both;*/
	color: #808080;
	text-align: center;
	letter-spacing: 1px;
	line-height: 2em;
	font-size: 80%;
	padding: 40px 0 10px 0;
	height: 70px;}

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

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

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

#footer li a:hover {
   color: #547caa;
   font-weight: bold;
   text-decoration: underline;}

#footer p {
   margin: 0;
   padding: 0;}
   
#footer img {
   margin: 20px 0 0 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 {
   float: right;
   width: 200px;
   border: 3px #c0c0c0 double;
	padding: 5px 10px;
	margin: 0 5px 5px 20px;}

/*  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.  */

.imageleft-noborder {
	margin: 0 10px 0 0; 
	float: left;}

.imageright-noborder {
	margin: 0 0 0 10px; 
	float: right;}
	
.imageleft-border {
   background-color: #ffffff;
	margin: 0 10px 0 0;
	padding: 5px;
	float: left;
	border: 1px #c2c2c2 solid;}

.imageright-border {
   background-color: #ffffff;
	margin: 0 0 0 10px; 
	padding: 5px;
	float: right;
	border: 1px #c2c2c2 solid;}