#Tab {
	font-family: verdana, sans-serif;
	border-bottom: 2px solid red;
	font-size: 10px;
}
#Tab ul {
	text-align: center; /* We are using text-align: center on ul to horizontally align our menu to the page. If you want the menu aligned left or right just change text-align to either left or right */
	margin: 0 0 4px 0; /* Just some margin to align the blue border below the menu */
}

#Tab li {
	display: inline; /* Menu links are horizontally aligned using display: inline */
}

#Tab li a {		
	padding: 5px 0 4px 10px; /* Display: block won't work in this example, instead we are using padding to make the hole tab a clickable link */
	color: #999999;
	text-decoration: none;
	font-weight: bold;
	
	background: url("../img/tabLeft.gif") no-repeat left top; /* Rollover effect using "Fast rollovers without preload" concept for the left part of the tab */
}

#Tab li a span {
	padding: 5px 10px 4px 0;
	
	background: url("../img/tabRight.gif") no-repeat right top; /* Rollover effect using "Fast rollovers without preload" concept for the right part of the tab */
}

#Tab a.active
{
	border-bottom: 1px solid lightgray;
	padding-bottom: 5px;
	color: #000;
}