/* Current color scheme:
      Dark Green  #0B7317
	  Dark Blue   #0B1773
	  Gray Text   #666666
	  Tab background color   #BOADF5  gray blue
*/

.topic 
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	color: #666666;
} 

.topicSubHead 
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
	color: #666666;
}

.graphicCaption 
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	font-weight: bold;
}

.photoSubCaption 
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
	color: #666666;
}

/* set the base text size */
body { 
        font-size: small; 
		color: #000000;
     }

p, ol, ul {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #OB1773;
	font-size: 150%;
}    

h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #OB1773;
	font-size: 130%;
}    
h3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #OB1773;
	font-size: 120%;
}    
h4 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #OB1773;
	font-size: 90%;
}    
h5 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #OB1773;
	font-size: 85%;
}    
h6 {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   color: #OB1773;
   font-size: 70%;
}    

.logo {
   border: 0px 1px 0px 0px solid #0B1773;
}

/* Box Areas */
/* establish the bottom box first */
.box {
   width: 273px;
   background: url(graphic/boxBottom.gif) no-repeat bottom left;
}

/* list-style: turns off the bullets */
.box ul {
   margin: 0;
   padding: 14px 10px 14px 10px;
   list-style: none;
}
.box ul li {
   margin: 0 0 6px;
   padding: 0;
   font-size: 75%;
}
/* border-bottom: sets up 1 pixel border underneath heading 
   padding: top bottom left right */
.box h3 {
   margin: 0;
   padding: 6px 8px 4px 10px;
   font-size: 110%;
   color: #0B1773;
   border-bottom: 1px solid #0B1773;
   background: url(graphic/boxTop.gif) no-repeat top left;
}

/* global box for text areas on the page    
   float: the container for the left side of the box
          the width of the text will determine how wide this 
		  container will be, not the graphic. 
*/
/* Upper right corner */
.container {
   float: left;
   color: #0B1773;
   background: url(graphic/boxRight.gif) top right no-repeat;
}

/* Upper left corner
   using the desc class to "hold on to it" */
.desc {
   margin: 0;
   padding: 9px 9px 0 9px;
   background: url(graphic/boxLeft.gif) top left no-repeat;
}

/* Lower left corner using the link class */
.link {
   margin: 0;
   padding: 0 0 0 9px;
   background: url(graphic/boxLeft.gif) bottom left no-repeat;
}

/* Lower right corner using the em class 
   em is normally an inline element so use display:block to turn
   it into a block-level element */
.link em {
   display: block;
   padding: 0 9px 9px 0;
   font-style: normal;
   background: url(graphic/boxRight.gif) bottom right no-repeat;
}

/* format the links inside the box */
.container a {
   font-size: 100%;
}


/* put in the lower
/* Navigation */
/* float the inner <li> - stretches the navigation bar horizontal */
#nav li {
   float: left;
   margin: 0;
   padding: 0;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 75%;
   list-style: none;
}

/* define the links
   float: left to force block level elements to go horizontal
          instead of pushing each item to its own line
   display: block makes entire tab clickable instead of just text
            for easier navigation
   margin: set up a 1 px on the right side of each tab
   background: declare the background color as well as the image 
               image is small (5x19 pixels), gradient with transparent area on the bottom
			    so the background color can show through.
			   repeat-x tiles the image to accomodate any width text
			   align to top and left
   border: border around each tab
   */
#nav a {
   float: left;
   display: block;
   margin: 0 1px 0 0;
   padding: 4px 8px;
   color: #OB7317;
   text-decoration: none;
   border: 1px solid #0B1773;
   border-bottom: none;
   background: url(graphic/navBlueGradient.gif) repeat-x top left;
}

/* background color for navigation graphics to sit on top of
   so everything is scalable 
   float the entire <ul> 
   background: includes a 1x50px for the bottom border */
#nav {
   float: left;
   width: 100%;
   margin: 0;
   padding: 10px 0 0 5px;
   list-style: none;
   background: #FFFFFF url(graphic/navBorder.gif) repeat-x bottom left; 
}

/* set up the hover
   use descendant selection to subdue the button to the current page
   in this case <body id="homePage">  
   padding-bottom: increase by one pixel on the active tabs only
     gives illusion that tab is in foreground */
#nav a:hover, body#homePage #home a {
   color: #333;
   padding-bottom: 5px;
   border-color: #727377;
   background: #FFFFFF url(graphic/navGreenGradient.gif) repeat-x top left;
}

/* Because of the floats in the nav and nav.li, make sure you clear:left; 
   in any CSS that follows these two CSS rules.
*/