/*
 * 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;
 text-align:right;
 direction:rtl;
 
   }


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: 5;
   width:422px;
   
 }

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

   padding:0px;
   height: 245px;
   /* z-Index must be lower than the one of tabMenuDiv since this div should be below it */
   z-index:1;
	margin:0px;
	width:100%;
	
   }

/*
 * 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 width:24.3%;*/
   
   text-align:center;
	padding:4px;
	margin:0px;
cursor:pointer;
   border:solid 1px #cabe6f;
font-family:tahoma,arial; font-size:10px; color:#312f20;
   }
   span.tabMenu
   {
	      background: #f8f8eb;
		
   background-image:url(../payam_cpanel/theme/box_bg_TopDown.png);
	background-position:bottom;
	background-repeat:repeat-x;   
   }
span.tabMenu  a {text-decoration:none; color:#312f20;}
span.tabMenu  a:hover {text-decoration:none; color:#CC6600;}
span.tabMenuActive
   {
   /* the color must be the same as the tabFiller background */

   background-image:url(../payam_cpanel/theme/box_bg_downTop.png);
   background-position:top;
	background-repeat:repeat-x;
	background-color:#F8F8EB
   }

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


/* 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: 0px;
  overflow: auto;

  /* the background of this must be the same of tabFiller*/
  background: #f8f8eb;
   border: 1px solid #cabe6f;


  }