.stepWrapper { margin: 0 auto; display: table; padding: 15px 0 0; }

ol.steps {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 20px;
    counter-reset: li;
    padding-bottom: 15px;
}

ol.steps li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0;
    text-align: center;
    color: #000;
    background: #dadbe8; 
    position: relative;
    padding-left: 5px;
    border-bottom: 5px solid #020d4d;
    cursor: default;
}

ol.steps > li { float: left;}
ol.steps li.done { color: #fff; background: #020d4d; }
ol.steps li.current { color: #fff; background: #9597b9; }
ol.steps li span.stepText { display: block; padding: 10px; border-right: 4px solid white; }
ol.steps li span.stepText a { color: #000; }
ol.steps li.done span.stepText a, ol.steps li.current span.stepText a {color: #FFF }
ol.steps li:last-child span.stepText { border: none; }

.stepNo {
    background: #9597b9;
   border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  color: #ffffff;
  display: inline-block;
  font-weight: bold;
  line-height: 1.6em;
  text-align: center;
  width: 1.6em; 
  left: 0;
  right: 0;
  bottom: -12px;
  margin: 0 auto;
  position: absolute;
  z-index: 55;
}

li.current .stepNo { background-color: #020d4d; }
li.done .stepNo { background-color: green; }

ol.steps li.step1 { z-index: 9; }
ol.steps li.step2 { z-index: 8; }
ol.steps li.step3 { z-index: 7; }
ol.steps li.step4 { z-index: 6; }
ol.steps li.step5 { z-index: 5; }
ol.steps li.step6 { z-index: 4; }
ol.steps li.step7 { z-index: 3; }
ol.steps li.step8 { z-index: 2; }
ol.steps li.step9 { z-index: 1; }
ol.steps li.step10 { z-index: 0;}