/*
  +------------------------------------------------------------------+
  | MikeCherim.com                                                   |
  | CSS: Simple Tabs                                                 |
  | Cascading Style Sheet                                            |
  | Copyright Aug 2006                                               |
  | Use with attribution by visible link please!                     |
  | Attribute to: <a href="http://green-beast.com/">Mike Cherim</a>  |
  +------------------------------------------------------------------+
*/ 

/*
  If it's just the tabs you're looking for, this CSS goes a bit above and
  beyond that. Below I have included the h1 heading anchor element, its 
  position on the page, plus a span for enhanced locator accessibility.
*/

/* 
  here's the h1 heading anchor. look, Mom, no divs :-) 
  margin : auto centers the whole thing 
*/
h1#cst a {
  color : #67770e;
  display : block;
  width : 930px;
  height : 255px;
  padding : 10px; 
  background-color : #ece4cd;
  background-image : "url(FCC_masthead.jpg)";
  background-repeat : no-repeat;
  background-position : bottom center;
/*  border : 1px solid #000;  */
  border : none;
  FONT-WEIGHT: bold;
  FONT-FAMILY: verdana, Arial, Helvetica, sans-serif;
  text-decoration : none;
  font-size : 80%;
/*  font-weight : normal;  */
  margin : auto;
}

/* this supplies hover and focus h1 a text color */
h1#cst a:hover, h1#cst a:focus, h1#cst a:active {
  color : #990000;
  FONT-WEIGHT: bold;
  FONT-FAMILY: verdana, Arial, Helvetica, sans-serif;
}

/* something extra for keyboard focus to help even more */
h1#cst a:focus, h1#cst a:active {
  text-decoration : underline;
  FONT-WEIGHT: bold;
  FONT-FAMILY: verdana, Arial, Helvetica, sans-serif;
}

/* 
  this centers the unordered list. the whole page has margin and padding set to zero
  else that would have to be added to the h1 a and to the list to bring them together
*/
ul.cst {
/*  margin : auto; */
  margin-left : 150px;
  margin-top : 5px;
  margin-bottom : 0px;
  width : 900px;
}

/* make the list horizontal (Note float:right reverses order) */
ul.cst li {
  display : inline;
  float : left;
/*  border-bottom : 2px solid #cccccc; */
}

/* this style the links themselves and the on-page tab as well */
ul.cst li a, ul.cst li.on {
  display : block;
  width : auto;
  height : auto;
  color : #666;
  text-decoration : none;
  FONT-WEIGHT: bold;
  FONT-FAMILY: verdana, Arial, Helvetica, sans-serif;
  font-size : 70%;
  padding : 5px 18px 5px 18px;
  white-space : nowrap; /* keeps the tabs from breaking */
  text-align : center;
  border-top : 1px solid #999;
  border-left : 1px solid #999;
  border-right : 1px solid #999;
  border-bottom : 0;
  background : #ffffdd url(cst_shadow_over.jpg) repeat-x top left;
  cursor : pointer; /* an opera fix */
  margin : 0 1px 0 1px;
} 

/* restyles parts of the on-page tab from above */
ul.cst li.on {
/*  color : #fff; */
  color : MAROON;
  FONT-WEIGHT: bold;
  FONT-FAMILY: verdana, Arial, Helvetica, sans-serif;
/*  background-color : #990000;  */
  background-color : #ECE4CD;
  background-image : none;
  cursor : default; /* corrects opera fix */
/*  margin-top : -1px; /* covers border on masthead */
  margin-top : 0; 
  border : 1px solid #000;
  border-top : 2px solid #000; /* part of broader covering */
  /*  border-top : 0;   */
  border-bottom : 0;

} 

/* this supplies hover and focus styles for the anchors */
ul.cst li a:hover, ul.cst li a:focus, ul.cst li a:active {
  color : #000;
  background : #e5cb7d url(cst_shadow_over.jpg) repeat-x top left;
  FONT-WEIGHT: bold; 
  FONT-FAMILY: verdana, Arial, Helvetica, sans-serif;
}

/* 
  something extra for keyboard focus. Another image and third background
  image/color could be applied here as well.
*/
ul.cst li a:focus, ul.cst li a:active {
  text-decoration : underline;
}

hr.cst {
/*  margin : auto; */
  display : block;
  margin-left : 30px;
  margin-top : 0px;
  width : 980px;
  color : lightblue;
  float : left;
  border-top : 2px solid lightblue;

}

div.nav-barcontainer {
	height : 30px;
	padding-top : 10px;
	padding-bottom : 0;
	background : MAROON;
	text-align : bottom;
	border-bottom : 0;
	margin-top : 0; 
	margin-bottom : 0; 
}

/* End Styles */