/* root element for tabs  */
ul.tabs { 
	position: absolute;
	list-style:none; 
	margin:0 !important; 
	padding:0px 0px 0px 0px;	
	height:42px;
	top: 0px;
	left: 20px;
}

/* single tab */
ul.tabs li { 
	float:left;	 
	text-indent:0;
	padding:0;
	margin:0 !important;
	list-style-image:none !important; 
	height:44px;
}

/* link inside the tab. uses a background image */
ul.tabs a {
	font-weight:400; 
	font-style:normal;
	float:left;
	font-size: 14px;
	display:block;
	height: 30px; 
	line-height:30px;
	padding: 0px 20px 0px 20px;
	text-decoration:none;
	color: #737373;
	margin:0px 2px 0px 0px;	
	
	position:relative;

}
* html ul.tabs a {
	margin:0px 2px 0px 0px;	
}

ul.tabs a:active {
	outline:none;	
}

/* when mouse enters the tab move the background image */
ul.tabs a:hover {
	background: #ddd;	
	color: #232323;
	text-decoration: none;
}
ul.tabs a:active {
	top: 0px;
	-moz-box-shadow:    inset 0 3px 3px rgba(0, 0, 0, 0.10);
   -webkit-box-shadow: inset 0 3px 3px rgba(0, 0, 0, 0.10);
   box-shadow:         inset 0 3px 3px rgba(0, 0, 0, 0.10);
}
/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
	background:  url("../images/tab-active.png") no-repeat bottom center;
	cursor:default !important; 
	text-decoration: none;
	color: #fff;
	height: 30px; 
	line-height:30px;
	padding: 0px 20px 12px 20px;
	
}



/* initially all panes are hidden */ 
div.panes div.pane {
	display:none;
}

/* override single pane */ 
div.panes div.box { 
    float:left; 
    display:block;
    width:238px;
    padding: 40px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    height: 200px;
}