.tab_left_side {
	background : inherit;
	margin-bottom : 10px;
	width : 650px;
	float: left;
}

.tab_left_side .intro {
height : 80px;
background : #616161;
color : #fff;
overflow : hidden;
}
.tab_left_side .intro .pad {
padding : 18px 0 0 0;
}
.tab_left_side .intro a {
color : #b4e04a;
text-decoration : none;
}

.tab_left_side .intro a:hover {
color : #cdff56;
text-decoration : underline;
}

.tabFrame_textbg{background:url(images/tab_div_bg.gif) repeat-x; padding-top:1px;
}

/*
 * 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;
   background:#FFFFFF; border:solid 6px #f2f4f9; min-height:100px; padding-top:2px; padding-right:1px;
   }


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

/* 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: #FFFFFF;
   /*old border: 1px solid black;*/
   height: 27em;
   /* 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 :url(images/bg_menu.jpg) repeat-x; /*background: #C1F249;*/
   border: 0px solid ;/*old 2px solid black*/
   margin: 0px 0px 0px 0px;     /* this moves the buttons to the right */
   padding: 0px 0px 0px 10px;	/* old 0px 12px 0px 10px */
   /*height: 30px;*/
   }

span.tabMenuActive
   {
   /* the color must be the same as the tabFiller background */
   border-bottom: 2px solid #C1F249;
   background :url(images/tp_bg11.gif) repeat-x;
   }

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


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

.sub_tab_menu { height: 34px; COLOR: #fff; font-family:Arial, Helvetica, sans-serif; font-size:14px; background:url(images/bg_menu.gif);
}

.sub_tab_menu UL {
	padding: 0px; margin: 0px; list-style:none; float:left;
}

.sub_tab_menu LI {
	 background:url(images/bg_menu.gif); width:120px; float: left; cursor: pointer; color:#fff; line-height: 30px; height: 34px; text-align:center;
}

.sub_tab_menu LI.active { background:url(images/bg_tab_active.gif); height:34px; width:120px; COLOR: #15499e; 
}