Resizable Tabs - CSS - www.ivesmozart.com

<ul class="tabs">
<li><a href="#" title="Home"><span>Home</span></a></li>
<li><a href="#" title="About" class="selected"><span>About</span></a></li>
<li><a href="#" title="Contact Details"><span>Contact Details</span></a></li>
<li><a href="#" title="Visit South Australia"><span>Visit South Australia</span></a></li>
<li><a href="#" title="Accessibility"><span>Accessibility</span></a></li>
</ul>

<style type="text/css">
/*
Theme Name: Horizontal Menu with Resizable Tabs
Version: 1.0
Author: Ives Mozart
Author URI: http://www.ivesmozart.com
*/
html,body {
font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
margin: 0px;
padding: 0px;
height:100%;
}

#content {
width: 954px;
margin-right: auto;
margin-left: auto;
position: relative;
margin-top: 0px;
padding-top: 0px;
height:100%;
}

.tabs {
margin:0;
padding:0;
height:23px;
}
.tabs li {
float:left;
margin:0;
padding:0px;
list-style:none;
}
.tabs a { /* See IF IE Underneath for rewrites */
text-decoration:none;
color:#000000;
font-weight:bold;
padding-left:15px;
display:block;
height:23px;
float:left;
position:relative;
background:url(img_left.gif) no-repeat left;
}
.tabs a span {
padding-right:15px;
height:17px;
display:block;
white-space:nowrap;
cursor:pointer;
padding-top:6px;
background:url(img_right.gif) no-repeat right;
}
.tabs a.selected {
background:url(img_on_left.gif) no-repeat left;
color:#FFFFFF;
}
.tabs a.selected span {
background:url(img_on_right.gif) no-repeat right;
}
.tabs a:hover, .tabs a.selected:hover {
text-decoration:underline;
}
</style>
<!--[if lt IE 7.]>
<style type="text/css">
.tabs a{
width:1em;
}
</style>
<![endif]-->