/*
  +------------------------------------------------------------------+
  | Green-Beast.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 : #fff;
  display : block;
  width : 600px;
  height : 150px;
  padding : 10px; 
  background : #669900 url(images/cst_masthead.jpg) no-repeat bottom center;
  border : 1px solid #000;
  text-decoration : none;
  font-size : 90%;
  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 : #ffffaa;
}

/* something extra for keyboard focus to help even more */
h1#cst a:focus, h1#cst a:active {
  text-decoration : underline;
}

/* 
  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;
  width : 600px;
}

/* make the list horizontal (Note float:right reverses order) */
ul.cst li {
  display : inline;
  float : left;
}

/* 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;
  padding : 5px 18px 5px 18px;
  white-space : nowrap; /* keeps the tabs from breaking */
  text-align : center;
  border : 1px solid #999;
  border-top : 0;
  background : #ffffdd url(images/cst_shadow.jpg) repeat-x top left;
  cursor : pointer; /* an opera fix */
  margin : 0 2px 0 2px;
} 

/* restyles parts of the on-page tab from above */
ul.cst li.on {
  color : #fff;
  background-color : #669900;
  background-image : none;
  cursor : default; /* corrects opera fix */
  margin-top : -1px; /* covers border on masthead */
  border : 1px solid #000;
  border-top : 1px solid #669900; /* part of broader covering */
} 

/* 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(images/cst_shadow_over.jpg) repeat-x top left;
}

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

/* End Styles */