* {margin:0px; padding:0px; font-family:verdana, Helvetica, sans-serif; font-size:10px;}

ul {width:85%; list-style:none;}
ul a {text-decoration:none; color:#a9a9a9;}
ul li {float:left; width:25%; background:url(../img/arrow.gif); text-align:left;border-bottom: 2px solid #000000;}
ul.step5 li { width:20%;} /*only needed if you want to use 5 Steps*/
ul li span {display:block; margin:auto; margin-right:50%; text-align:center; border:1px solid #a9a9a9; width:19px; height:19px; line-height:19px; background-color:#ffffff;} 
ul li span a {display:block; width:19px; height:19px; margin:0px;}
ul li span a.active, ul li.active span a, ul li.past span a:hover, ul li.past:hover span a {background-color:brown; color:#ffffff; }
ul li a {display:block; margin-right:11%; text-align:center;}
ul li.past {background-position:right -106px;}
ul li.active {background-position:right -48px;}
ul li#future {background-position:right -214px;}
ul li#future.active {background-position:right -162px;}
ul li.active a:hover, ul li.past a:hover, ul li.past a, ul li.active a {color:#003300;}
ul li.active span a:hover {color:#ffffff;}
ul li.past span, ul li.active span {border:1px solid #003300;}
ul li.past:hover {cursor:hand; cursor:pointer;}