ul.wizard-rule { display: block; list-style: none; height: 41px; margin: 0 0 30px 0; padding: 0; }

ul.wizard-rule li { font-family: 'DINPro-CondMedium', impact; font-size: 18px; text-transform: uppercase; position: relative; float: left; height: 41px; line-height: 41px; padding: 0 30px 0 50px; margin: 0 10px 0 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; background-image: url('../../i/wizard.arrow.gif'); background-repeat: no-repeat; background-position: right center; }
ul.wizard-rule li.first-step {}
ul.wizard-rule li.mid-step {}
ul.wizard-rule li.last-step { background-image: none; padding-right: 10px; margin-right: 0; }

ul.wizard-rule li.done { color: #000; }
ul.wizard-rule li.active { color: #000; }
ul.wizard-rule li.undone { color: #b8b8b8; }

ul.wizard-rule li span { display: block; font-size: 18px; text-align: center; position: absolute; top: 0px; left: 0px; width: 41px; height: 41px; background-repeat: no-repeat; background-position: center; box-sizing: border-box; -moz-box-sizing:border-box; -webkit-box-sizing: border-box; }
ul.wizard-rule li.done span { color: #fff!important; background-image: url('../../i/wizard.done.gif'); }
ul.wizard-rule li.active span { color: #fff!important; background-image: url('../../i/wizard.active.gif'); }
ul.wizard-rule li.undone span { color: #999!important; background-image: url('../../i/wizard.undone.gif'); }

ul.wizard-rule li a { color: inherit; text-decoration: none!important; }