/* example: <div class="tab"><li><a><span>Text</span></a></li></div> */

div.tab { float: left; width: 100%; line-height: 100%; border-bottom: 2px solid #83ACCA; margin: 0 0 10px 0; }
.tab ul { margin: 0; padding: 0 10px; list-style: none; }
.tab li { display: inline; padding: 0; }
.tab li a { float: left; background: url("../img/tab/l.gif") top left no-repeat; margin: 3px 0 0 0; padding: 0 0 0 4px; text-decoration: none !important; border: 0; }
.tab a span { float: left; display: block; background: url("../img/tab/r.gif") top right no-repeat; padding: 5px 15px 4px 10px; color: #FFF; font-weight: bold; font-size: .9em; }
/* IE5-Mac \*/
.tab a span {float:none;}
/* End IE5-Mac */
.tab a:hover { background-position: 0% -42px; text-decoration: none; }
.tab li.current a { margin: 0; background-position: 0% -42px; text-decoration: none; }
.tab a:hover span { background-position: 100% -42px; }
.tab li.current a span { padding: 7px 15px 5px 10px; background-position: 100% -42px; }