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

/*--------------------------------------------------
  PB Jan 08
  Fiddle getting to work with IE and Firefox.
  Main initial problem was IE. Separate css. Firefox was fine.
  Then added vertical scroll and part of right border
  disappeared with Firefox (using this css) when switching 
  to tab with scroll not needed (ie no scroll). This only
  happened full screen on a widescreen PC (1280). When switch
  display on same laptop to 1024 - no problem!  Also not a prob
  with IE.
  Tried to fix by making width of box fixed:
  .tabberlive .tabbertab {
 	border:1px solid #aaa;
 	width: 310px; }
  Similar to example_ie.css
  Also made width UL match 322px
  ul.tabbernav {
	margin:0;
	width: 322px; }

  Not satis solution - and didn't work anyway!
  1 Feb 08
  Fixed above - Firefox 2 not happy with 1 px borders.
  Loses the 1 px if width is 100% or abs px's < 100% or auto.
  Reduced width to 95%
  .tabberlive .tabbertab {
 	border:1px solid #aaa;
 	width: 95%; }
  Problem now is how to set with of ul
  ul.tabbernav {
	margin:0;
	width: ???????; }
  Can't use 95% - too small.
  Solution - place top border on box and hide the live 
  tab bit using position:relative - same solution as IE.
  --------------------------------------------------*/


/*--------------------------------------------------
  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:1em;
 /*font-size:10px;*/
}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav
{
 position: relative; 
 margin:0;
 padding: 3px 0;
 border-bottom: 0px solid #778;
 font: bold 11px Verdana, sans-serif;
 /*width: 100%;*/
 width: auto;
}

ul.tabbernav li
{
 list-style: none;
 margin: 0;
 display: inline;
}

ul.tabbernav li a
{
 /*Edu font size on tab*/
 font-size:11px;
 padding: 3px 0.5em;
 margin-left: 3px;
 border: 1px solid #778;
 border-bottom: none;
 background: #DDE;
 text-decoration: none;
}

ul.tabbernav li a:link { color: #448; }
ul.tabbernav li a:visited { color: #667; }
/* added pb Aug 08 Needs tabberlive to change visited colour 
Decided to remove cos a single visit to aqa site makes IE
think all the exam papers have been visited, whereas with FF
the visited colour does not change
.tabberlive a:visited { color: red; } */
ul.tabbernav li a:hover
{
 color: #000;
 background: #AAE;
 border-color: #227;
}

ul.tabbernav li.tabberactive a
{
 background-color: #fff;
 background-color: #FEFFE6;
 border-bottom: 1px solid #FEFFE6;
}

ul.tabbernav li.tabberactive a:hover
{
 color: #000;
 background: white;
 border-bottom: 1px solid #FEFFE6;
}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
 padding:5px;
 border:1px solid #aaa;
 width: 95%;
 /*border-top:0;
 
  If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */

 height:165px; /* */

 /* 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#tab2 .tabbertab {
 height:200px;
 overflow:auto;
}