/* ---------------------------------------------------------------------- */
/*This code sets the font family and font size. */
/* ---------------------------------------------------------------------- */

body {
font-family: Verdana, Arial, sans-serif;
font-size: small; /*  Freeman and Freeman recommend using a keyword to define the body's font size, and then 
use relative sizes for other elements using % or em, IE will scale fonts properly.  IE does notresize fonts if pixels are used.  */
margin: 0 auto; /* This sets page content so it is centered in the webpage allowing similar display for all size monitors */
background: url(../images/background9.jpg);
background-repeat: repeat-x;
color: #09509f; /* This sets text colour */
}

/* ---------------------------------------------------------------------- */
/* The following blocks of code set the style for each of the main <divs>. */
/* ---------------------------------------------------------------------- */

#header
{
height: 15.5em; /*By changing this from pixels to em, it allows the header to be resized if the user changes the text size, ensuring that all content is still viewable.  When 
using pixels, if the text size was increased, some of the text "disappeared".*/
border-right: outset 1px #fffffe;
border-left: outset 1px #fffffe;
border-top: outset 1px #fffffe;
}

h1 a
{
color: #fffffe;
}

#body, #navigation
{
background-color: #fffffe;	
}

#background
 {
margin:20px 50px 20px 50px;
background: #fffffe;
}


#main
{
border-right: outset 1px #fffffe;
border-left: outset 1px #fffffe;
}	

#breadcrumbs 
{
padding: 1px 0 15px 0px;
font-weight:bold;
font-size: 75%;
height: 1em;
color: #09509f;
}

#breadcrumbs a:link, a:active 
{
color: #09509f; 
text-decoration: none
}

#breadcrumbs a:visited 
{
color: #ff0000; 
text-decoration: none
}

#breadcrumbs a:hover
{
color: #336600; 
text-decoration: none
}

#body
{
margin-right: 1em;
margin-left: 0em;
line-height: 1.5em;
padding: 1.5em;
padding-right: 15em;
border-left: outset 1px #fffffe;

}

/* ---------------------------------------------------------------------- */
/*This positions the footer  */
/* ---------------------------------------------------------------------- */
#footer	
{
padding: 0.5em 1em 0.5em 1em; /* This allows the footer to resize in smaller resolution.*/
font-size: 70%;
clear: both; /*This code clears floating content. "Head First" */
background: #09509f;
border-right: outset 1px #fffffe;
border-left: outset 1px #fffffe;
border-bottom: outset 1px #fffffe;
color: #ffffff;
}

#footer	a:visited, a:hover, a:link, a:active 
{
color: #fffffe; 
text-decoration: none
}

/* ---------------------------------------------------------------------- */
/*The following sets of code style the footer*/
/* ---------------------------------------------------------------------- */

.email
{
float: left;
text-align: left;
}

#home
{
text-align: center;
}
		
.update, .copyright
{
float: right;
text-align: right;
margin: 0px;
}

/* ---------------------------------------------------------------------- */
/*The "clear" property  is used when you are using CSS float and want next element below, not on right or left.  */
/* ---------------------------------------------------------------------- */

#footer p 
{
clear: both;
}

/* ---------------------------------------------------------------------- */
 /* Horizontal navigation menu */
 /* ---------------------------------------------------------------------- */
 
 #navigation ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #fffffe;
}

#navigation li {
    float: left;
}

#navigation li a {
    display: inline-block;
    color: #09509f;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

#navigation li a:hover {
    background-color: #54a0f5;
	color: #fffffe;
}

#navigation li#active a
{
 background: #09509f;
 color: #fffffe	;
}

/* ---------------------------------------------------------------------- */
/*The following blocks of code set the font size for the headers used on the site. */
/* ---------------------------------------------------------------------- */

h1
{
font-family: verdana;
color: #006300;
font-size: 300%;
padding-left: 10px;
}

h2
{
font-family: verdana;
color: #09509f;
font-size: 150%;
text-align: center;
}

h3
{
font-family: verdana;
color: #09509f;
font-size: 120%;
}

a
{
text-decoration: none;
}

#slideshow
{
padding: 0px 0px 0px 250px;
}

#slideshow a:hover
{
color: #09509f; 
text-decoration: none
}

.slideshowcaption
{
padding: 0px 0px 0px 100px;
}