/* Easy CSS Progress Bar 1.0 - by Koller Juergen [www.kollermedia.at] */

#barra ul {width:80%; list-style:none; margin:10px; clear:both; float:left;}
#barra a {text-decoration:none; color:#a9a9a9;}
#barra li {float:left; width:25%; background:url(arrow.gif) repeat-x right 6px; text-align:left;}
#barra.step5 li { width:20%;} /*only needed if you want to use 5 Steps*/
#barra.step10 li {width:10%;} #barra.step10 li a {margin-right:25%;} #barra.step10 li span a {display:block; width:19px; height:19px; margin:0px;}  /*only needed if you want to use 10 Steps*/
#barra 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;} 
#barra li span a {display:block; width:19px; height:19px; margin:0px;}
#barra li span a.active, #barra li.active span a, #barra li.past span a:hover, #barra li.past:hover span a {background-color:#990000; color:#ffffff; }
#barra li a {display:block; margin-right:11%; text-align:center;}
#barra li.past {background-position:right -106px;}
#barra li.active {background-position:right -48px;}
#barra li#lastStep {background-position:right -214px;}
#barra li#lastStep.active {background-position:right -162px;}
#barra li.active a:hover, #barra li.past a:hover, #barra li.past a, #barra li.active a {color:#990000;}
#barra li.active span a:hover {color:#ffffff;}
#barra li.past:hover {cursor:hand; cursor:pointer;}
#barra li.past span, #barra li.active span {border:1px solid #990000;}