/* $Id: tabs.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */

/*--------------------------------------------------
  CONSTANTS
 $borderWidth =				'4px';
 $activeBorderColor =		'#777';
 $activeBackgroundColor =	'#fff';
 $inactiveBorderColor =		'#777';
 $inactiveBackgroundColor =	'#777';
  --------------------------------------------------*/

 
/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
 display: none;
}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {
}

.tabberlive {
 margin-top: 4px;					/* DOESN'T SEEM TO AFFECT ANYTHING */
}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav
{
 margin: 0px;
 padding: 4px 3px;					/* 2ND VALUE AFFECTS PX TO LEFT OF 1ST TAB */
 border-bottom: 4px solid #777;		/* TOP BORDER OF CONTENT - NOT TAB */
 font: bold 16px Trebuchet MS, sans-serif;	/* FONT ON TAB */
}

ul.tabbernav li
{
 list-style: none;
 margin: 3px;						/* SPACING BETWEEN TABS */
 display: inline;
}

ul.tabbernav li a
{
 padding: 4px 8px;					/* TAB TOP MARGIN, LEFT-RIGHT MARGIN */
 margin-left: 0px;					/* SPACING BETWEEN TABS */
 border: 4px solid #777;			/* TAB BORDER */
 border-bottom: none;
 background: #777;					/* INACTIVE TAB BACKGROUND */
 text-decoration: none;
}

ul.tabbernav li a:link { color: #fff; }		/* TAB LINK TEXT COLOR - INACTIVE AND ACTIVE */
ul.tabbernav li a:visited { color: #fff; }	/* TAB TEXT COLOR - */

ul.tabbernav li a:hover
{
 color: #fff;						/* HOVER OVER INACTIVE TAB FONT COLOR */
 background: #474747;				/* HOVER OVER INACTIVE TAB BACKGROUND COLOR */
 border-color: #474747;				/* HOVER OVER INACTIVE TAB BORDER COLOR */
}

ul.tabbernav li.tabberactive a
{
 color: #333;						/* ACTIVE TAB TEXT COLOR */
 background-color: #fff;			/* ACTIVE TAB BACKGROUND COLOR */
 border-color: #777;				/* ACTIVE TAB BORDER COLOR */
 border-bottom: 4px solid #fff;		/* ACTAVE TAB BOTTOM BORDER COLOR */
}

ul.tabbernav li.tabberactive a:hover
{
 color: #333;						/* HOVER OVER ACTIVE TAB FONT COLOR */
 background: white;					/* HOVER OVER ACTIVE TAB BACKGROUND COLOR */
 border-color: #777;				/* HOVER OVER ACTIVE TAB BORDER COLOR */
 border-bottom: 4px solid #fff;		/* HOVER OVER ACTIVE TAB BOTTOM BORDER  */
}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
 padding-top: 1px;					/* If this 1px does not exist, there is a gap between the tabs and the tab content (unles the first element that is contnet has margin: 0px on it */
 border: 4px solid #777;
 border-top: 0px;
 background: white;

 /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */

 /* height:200px; */

 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */

 /* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
/*display: none; */
}
.tabberlive .tabbertab h3 {
/* display: none; */
}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab1 .tabbertab {
 height:200px;
 overflow:auto;
}