@charset "utf-8";
/* CSS Document */

/*
 * This is used just to have a position: relative so I can then put the tabbed panels in it.
 * it is ugly and a mess, I wonder what people where thinking when they thought about this
 * boxing model.
 */
div#tabFrame
   {
   position: relative;
   width:280px;
  	
   }
div#tabMenuDiv
   {
   /* position MUST be relative so to palce this and the TabFiller into a common z-order reference
    * this fix the Internet Explorer crappy BUG
    */
   position: relative;
   /* since the z-index is four this will be on top of the tabFiller border */
   z-index: 4;
   width:270px;
   height:21px;
   }

/* this is used to fill the tabs with something so they do not mess up with the page
 * This div will be used to set the size of the tabPane, the width is automatic.
 * so, basically, the only thing to set is the height, use the em unit !
 */
div#tabFiller
   {
   /* position MUST be relative so to palce this and the TabFiller into a common z-order reference
    * this fix the Internet Explorer crappy BUG
    */
   position: relative;
   background: #fbf6e2;
   border-top: 1px solid #b5cb6c;
   height:270px;
   /* z-Index must be lower than the one of tabMenuDiv since this div should be below it */
   z-index:1;
   width:275px;
   }

/*
 * This defines the general properties of the tabMenu something like borders, colors, etc.
 * One important property is the z-index, it must be above the other panels.
 */
span.tabMenu, span.tabMenuActive, span.tabMenuOver
   {
   /* the background must be the same as the tabFiller background */
   background: #d9e6af;
   border: 1px solid #b5cb6c;
   margin: 0px 0px 0px 3px;     /* this moves the buttons to the right */
   padding: 3px 12px 3px 10px;
   cursor:pointer;
   color:#556f00;
   font-family:Arial, Helvetica, sans-serif;
   font-size:12px;
   font-weight:bold;
   top:20px;
   }

span.tabMenuActive
   {
   /* the color must be the same as the tabFiller background */
   border-bottom: 1px solid #fbf6e2;
   color:#556f00;
   background:#fbf6e2;
   }

span.tabMenuOver
   {
   /* You can set whatever foreground and background color you wish */
   background:  #00a1da;
   color: #FFFFFF;
   border:1px solid #008fc1;
   }


/* the various tab panels are in absolute position relative to the parent, so basically
 * they all overlap one with the other.
 * The problem is that their size is dependent on the content and therefore that has to be adjusted.
 * to do this I need of javascript...
 * If you want to define some special fonts for the tabbed pane, do it here.
 */
div.tabPane
  {
	position: absolute;
	margin: 4px;
	overflow: auto;
	/* the background of this must be the same of tabFiller */
  background: #fbf6e2;
	width:270px;
	left: 0;
  }