/* --------- General Body layout, link properties, formatting --------- */

Body {
  background:white;
  color:black; 
  font-size: .8em;
  font-family:Verdana;
}

#bodycontent {
  width:780px;
  padding:3px;
  text-align:left;
}

#pop-upbodycontent {
  width:100%;
  padding:3px;
  text-align:left;
}

#cns-body {
  width:500px;
  min-height:300px;  
  padding:0 3px 5px 3px;
  margin:0 5px 10px 0; 
}

/* --------- Begin: Link Formatting --  link, visited, hover, active ------- */

a:link {
  color:#2e3192; 
  font-weight:bold;
  text-decoration:none;
}

a:visited {
  color:#2e3192;
  font-weight:bold;
  text-decoration:none;
}

a:hover {
  text-decoration:underline;
}

a:active {
  background:#2e3192;
  color:yellow;
  font-weight:bold;
  text-decoration:none;
}

/* --------- End: Link Formatting --------- */

/* --------- Begin: Announcement and Link Box Blocks --------- */

#announcementblock-left, #announcementblock-right {
  width:220px;
  background:#e3f5d9;
  font-size: .90em;
  padding:3px;  
  border:5px solid #9cd67b; 
}

#announcementblock-left {
  float:left;
  margin:0 7px 5px 0;  
}

#announcementblock-right {
  float:right;
  margin:0 0 5px 7px;    
}

#announcementblock-left h4, #announcementblock-right h4 {
  text-align: center;
}

/* --------- End: Announcement Blocks --------- */

/* --------- Begin: Content Blocks --------- */

#contentblock-left, #contentblock-right {
  width:200px;
  background:#e8f2f9;
  font-size: .75em;  
  padding:3px;  
  border:5px solid #2e3192;
}

#contentblock-left {
  float:left;
  margin:0 7px 5px 0;
}

#contentblock-right {
  float:right;
  margin:0 0 5px 7px;
}

#contentblock-left h3, #contentblock-right h3 {
  text-align: center;
  border-bottom: 2px solid #2e3192;     
}

#contentblock-left h4, #contentblock-right h4 {
  text-align: left;
}

#contentblock-left ul, #contentblock-right ul {
  list-style-type: none;
  margin: 0 0 10px 0;
  padding: 0; 
}  

#contentblock-left li, #contentblock-right li {
  padding: 0 0 4px 5px;
}

#menublock-right {
  float:right;
  width:240px;
  background:white;
  font-size: .75em;     
  margin:0 0 5px 7px;    
  padding:3px;  
  border:5px solid #9cd67b; 
}

#menublock-right h3 {
  text-align: center;
  font-size:1.1em;
}

#menublock-right h4 {
  text-align:left;
  fontsize:1em;
  border-bottom: 2px dotted #9cd67b;   
}

#menublock-right ul {
  list-style-type:none;
  margin: 0 0 10px 0;
  padding: 0;
}

#menublock-right li {
  padding: 2px 0 2px 5px;
}

/* --------- End: Content Blocks --------- */

/* --------- Begin: Figure Boxes & Text ---------  */

.figureleft, .figureright {
  background:#E2E8F4;
  text-align:center;
  border:1px solid #262069;  
  margin: 0 5px;
  padding: 10px;
}

.figureleft {
  float:left;
}

.figureright {
  float:right;
}

.caption {
  font-size: .75em;
  font-style:italic;
  padding: 2px;
}

/* --------- End: Figure Boxes & Text ---------  */

/* --------- Begin: Blockquote Formatting --------- */

.faq-block, .instruction-block, .warning-block, .note-block, .jobdescription-block { 
  text-align:left;
  margin:20px;
  padding:12px;
}

.faq-block {
  background:#e3f5d9;
  border: 2px solid #9cd67b;
}

.instruction-block {
  background-color:#dadddf; 
  border: 2px solid #b8b8b8;
}

.jobdescription-block {
  background-color:#f0f0f0;
}
.warning-block {
  background-color:#f7f297;
  border: 2px solid #e9df2f;
}

.note-block {
  background-color:#d5e9f7;
  border: 2px solid #b4dcf9;
}

.youth-block {
  text-align:center;
  margin:30px;
  padding: 10px;
  font-size:1.5em;
    background-color:#e8f2f9;
    border: 2px solid #2e3192; 
}  

/* --------- End: Blockquote Formatting --------- */

/* --------- Begin: Header Formatting --------- */

h1 {
  text-align:left; 
  background:transparent;
  font-size: 2em; 
  font-weight:bold;
  border-bottom: 2px solid #9cd67b;  
}


h2 {
  text-align:left;
  background:transparent;
  font-size:1.5em;
  font-weight:bold;
  border-bottom: 2px solid #9cd67b;
}

h3 {
  text-align:left;
/*  background:#9cd67b;  */
  background:#e3f5d9;
  font-size:1.33em;
  font-weight:bold;
  border-bottom: 2px solid #9cd67b;  
}

h4 {
  text-align:left;
  background:transparent;
  font-size:1.1em;
  font-weight:bold;
}

h5 {
  text-align:left;
  font-size:1em;
  font-weight:bold;
  text-decoration:underline; 
}

h1.title, h2.title, h3.title, h4.title {
  text-align:center;
}

/* --------- End: Header Formatting --------- */

hr {
  color:#9CD67B;
  height:3
}

img.left {
  float:left;
  margin: 5px 10px 5px 1px;
}

img.right {
  float:right;
  margin: 5px 1px 5px 10px;
}

img.fixposition {
  position:absolute;
  left:1;
  top:1;
}

/* --------- Begin: Index Menu Table Settings --------- */

table.indexmenu {
  font-size:.9em;
  margin: 3px 0 3px 0;
}
  	  
table.indexmenu h3 {
  font-size:1.1em;
  background:transparent;
  border-bottom: 2px solid black;
}
	  
table.indexmenu h4 {
  font-size:1em;
}
  	  
table.indexmenu td {
  padding:0 5px 2px 5px;
}

.bluegrade {
  background:url('/images/bluegrade300.jpg') repeat-x;
}

.yellowgrade {
  background:url('/images/yellowgrade300.jpg') repeat-x;
}

.greengrade {
  background:url('/images/greengrade300.jpg') repeat-x;
}

/* --------- End: Index Menu Table Settings --------- */

  #welcome, #news, #spotlight {
    font-size:.85em;
    padding:0 5px 10px;
  }
  
  #welcome {
    border-right:3px solid #e3f5d9;
  }

  #news {
/*  border-left:3px solid #e3f5d9; */
  }

  #spotlight {
    background:#e3f5d9;
    border-left:3px solid #9cd67b;
  }

  #welcome h6, #news h6, #spotlight h6 {
    font-size:1.1em;
    margin-top:5px;
    margin-bottom:5px;
    border-bottom:1px solid #d6d6d6;
  }

  .thumbnail {
    float:left;
    padding-right:10px;
  }
  	  
  .newsstory {
    min-height:80px;
    border-bottom:1px solid #d6d6d6;
    padding: 5px;
    margin:5px 0; 
    clear:both; 
  }

/* BEGIN listmenu++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* the horizontal menu starts here */
#listmenu {
    margin:2px;
	width:100%; /* makes the div full width */
	/* height: 25px; sets the height to match background div */
	float:left;
	border-top:1px solid #ff0000; /* draws line on top edge of div */
	border-bottom:1px solid #ff0000;	 /* draws line on bottom edge of div */
	background-color:transparent;	/* colors the div */
	text-align:center;
}
	
#listmenu ul {
	margin:0 0 0 2px;   /* indents ul from edge of container */
	font-size: 11px;	/* SET FONT-SIZE HERE */
}

#listmenu li {
	float:left; 
	list-style-type:none;
	list-style-image: none;
	background-color:#aed4f0;
	border-right:1px solid #ffffff;
	color: #000000;
	padding: 2px 0; 
	margin: 0;
	line-height: 1.2em;
}
 
/* top and bottom padding added to list item to make it fit the height of the nav background image. To make text center vertically in the listmenu div, you must add padding to: div#listmenu li, div#listmenu a, <br />
and div#listmenu a:hover */
	
#listmenu li:first-child {
	border-left:1px solid #636573; /*the first vertical line on the menu */
}
	
#listmenu li:hover {
	background-color:#2e3192;
}

#listmenu a:link, #listmenu a:visited {
	padding:2px 2px;
	text-decoration:none;
	color:#000000;
	border: none;
}

#listmenu a:hover {
	color:#ffffff;
	background:#2e3192;
	text-decoration: none;
	padding: 2px 2px;
	border:none;
}

/* listmenu HACK ZONE - */
/* hack for IE (all flavors) so the menu has a vertical line on the left */

* html #listmenu ul {
	float:left; /* makes the ul wrap the li's */
	border-left:1px solid #636573; /* adds the rightmost menu vertical line to the ul */
	margin-left:4px; /* IE doubles the given value above - why? */
} 

* html #listmenu a {display:block;} /* makes IE5  5.5 accept the padding on the link */

* html #listmenu li {
	padding: 0 0; /* this sets padding to 0 on li items. Otherwise IE adds too much padding */
}

/* end of hack zone */
	
/* END listmenu xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


/* Put this inside a @media qualifier so Netscape 4 ignores it */
/* The following code creates a collapsible tree menu out of a list (UL or OL) */
@media screen, print { 
	/* Turn off list bullets */
	ul.mktree  li { list-style: none; } 
	/* Control how "spaced out" the tree is */
	ul.mktree, ul.mktree ul , ul.mktree li { margin-left:10px; padding:0px; }
	/* Provide space for our own "bullet" inside the LI */
	ul.mktree  li           .bullet { padding-left: 15px; }
	/* Show "bullets" in the links, depending on the class of the LI that the link's in */
	ul.mktree  li.liOpen    .bullet { cursor: pointer; background: url("../images/minus.gif")  center left no-repeat; }
	ul.mktree  li.liClosed  .bullet { cursor: pointer; background: url("../images/plus.gif")   center left no-repeat; }
	ul.mktree  li.liBullet  .bullet { cursor: default; background: url("../images/bullet.gif") center left no-repeat; }
	/* Sublists are visible or not based on class of parent LI */
	ul.mktree  li.liOpen    ul { display: block; }
	ul.mktree  li.liClosed  ul { display: none; }
	/* Format menu items differently depending on what level of the tree they are in */
	ul.mktree  li { font-size: 12pt; }
	ul.mktree  li ul li { font-size: 10pt; }
	ul.mktree  li ul li ul li { font-size: 8pt; }
	ul.mktree  li ul li ul li ul li { font-size: 6pt; }
}
