/* root element for tabs  */
.tabs_area{
	width:761px;
	background:url("../images/tab_bottom_line.png") bottom repeat-x;
	border-left:1px solid #e5e5e9;
	height:auto;
	margin:0 0 22px 10px;
	float:left;
	clear:both;
	overflow:auto;
}

#ie6 .tabs_area{
	margin-left:5px;
}

ul.tabs { 
	width:auto;
	list-style:none; 
	padding:0;	
	height:auto;
	float:left;
}
/* single tab */
ul.tabs li { 
	float:left;
	font-size:12px;
	display:block;
	height: auto;  
	width: auto;
	text-align:center;	
	text-decoration:none;
	color:#8b8b8b;
	padding:7px 12px 6px 12px;
	margin:0px;	
	position:relative;
	border-right:1px solid #e5e5e9;
	border-top:1px solid #e5e5e9;
	list-style-image:none !important;
	cursor:pointer;
}

/* link inside the tab. uses a background image */
ul.tabs a { 
	font-size:11px;
	display:block;
	height: 25px;  
	line-height:25px;
	width: 75px;
	text-align:center;	
	text-decoration:none;
	color:#8b8b8b;
	padding:0px;
	margin:0px;	
	position:relative;
	border-right:1px solid #e5e5e9;
	border-bottom:1px solid #d0d1d7;
}

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

/* when mouse enters the tab move the background image */
ul.tabs a:hover {
	background-position: -420px -31px;	
	color:#8b8b8b;	
}

/* active tab uses a class name "current". its highlight is also done by moving the background image. */
ul.tabs li.current, ul.cooking_tabs li.current, ul.tabs a.current:hover, ul.tabs li.current a {
	cursor:default !important; 
	color:#343434 !important;
	background-color:#FBFBFC;
}

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