/* root element for tabs  */
ul.tabs { 
	height: 55px;
	list-style: none; 
	margin: 0; 
	padding: 0;	
	font-family: 'BrandonGrotesqueMedium';
	font-size: 0.917em;
	text-transform: uppercase;
}

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

	ul.tabs li:first-child {
		margin-left: 0;
	}

/* link inside the tab. uses a background image */
ul.tabs a { 
	width: 105px;
	height: 40px;  
	line-height: 1.091em;
	color: #000000;
	background: url(/images/bgTabs.gif) 0 0 no-repeat;
	display: block;
	text-align: center;	
	text-decoration: none;
	padding: 15px 6px 0 6px;
	margin: 0;	
	position: relative;
	top: 1px;
}

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

/* when mouse enters the tab move the background image */
ul.tabs a:hover {
	background-position:0 -55px;	
}

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

/* Different widths for tabs:  use a class name:  s, l, xl */


/* width 1 */
ul.tabs a.tab1 {background-position: 0 0;}
ul.tabs a.tab1:hover, ul.tabs a.tab1.current {background-position: 0 -55px; color: #ef9061 !important;}

/* width 2 */
ul.tabs a.tab2 {background-position: -120px 0;}
ul.tabs a.tab2:hover, ul.tabs a.tab2.current {background-position: -120px -55px; color: #79a4c3 !important;}

/* width 3 */
ul.tabs a.tab3 {background-position: -240px 0;}
ul.tabs a.tab3:hover, ul.tabs a.tab3.current {background-position: -240px -55px; color: #b0c664 !important;}

/* width 4 */
ul.tabs a.tab4 {background-position: -360px 0;}
ul.tabs a.tab4:hover, ul.tabs a.tab4.current {background-position: -360px -55px; color: #5eaca0 !important;}


/* initially all panes are hidden */ 
.panes {	
	padding: 21px 16px 21px 25px;
	line-height: 1.50em;
}
.panes .pane {
	display: none;		
}