body {
	background: #FFFFFF;
	}

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


div#tabMenuDiv
   {
   /* position MUST be relative so to place 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;
   }

/* 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 place this and the TabFiller into a common z-order reference
    * this fix the Internet Explorer crappy BUG
    */
   position: relative;
   background: #FFFFFF;
   border-top: 5px solid #CCCCCC;
   height: 30em;
   color: #666666;
   /* z-Index must be lower than the one of tabMenuDiv since this div should be below it */
   z-index:1;
   }

/*
 * 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: #FFFFFF;
   border: 2px solid #CCCCCC;
   border-bottom: 5px solid #CCCCCC;
   margin: 0px 0px 0px 6px;     /* this moves the buttons to the right */
   padding: 0px 12px 0px 10px;
   color: #666666;
   }

span.tabMenuActive
   {
   /* the color must be the same as the tabFiller background */
   border-bottom: 5px solid #FFFFFF;
   color: #444444;
   }

span.tabMenuOver
   {
   /* You can set whatever foreground and background color you wish */
   background:  #FF9900;
   color: #fff;
   }


/* 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: 7px;
  overflow: auto;
  /* the background of this must be the same of tabFiller */
  background: #FFFFFF;
  color: #666666
  }