li { cursor: pointer; cursor: hand; }

ul.step {
  margin-bottom: 3px;
  overflow: hidden; }
  @media (min-width: 768px) {
    ul.step {
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      border-radius: 4px; } }
  ul.step li {
    float: left;
    /*width: 12%;*/
    text-align: left;
    border: 1px solid;
    border-top-color: #cacaca;
    border-bottom-color: #9a9a9a;
    border-right-color: #b7b7b7;
    border-left-width: 0px; }
    @media (max-width: 767px) {
      ul.step li {
        width: 100%;
        border-left-width: 1px; } }
    ul.step li a,
    ul.step li span, ul.step li.step_current span, ul.step li.step_current_end span {
      display: block;
      padding: 13px 1px 14px 13px;
      color: #333;
      font-size: 11px;
      line-height: 21px;
      font-weight: bold;
      text-shadow: 1px 1px white;
      position: relative; }
      @media (max-width: 992px) {
        ul.step li a,
        ul.step li span, ul.step li.step_current span, ul.step li.step_current_end span {
          font-size: 15px; } }
      @media (min-width: 992px) {
        ul.step li a:after,
        ul.step li span:after, ul.step li.step_current span:after, ul.step li.step_current_end span:after {
          content: ".";
          position: absolute;
          top: 0;
          right: -31px;
          z-index: 0;
          text-indent: -5000px;
          display: block;
          width: 31px;
          height: 52px;
          margin-top: -2px; } }
      ul.step li a:focus,
      ul.step li span:focus, ul.step li.step_current span:focus, ul.step li.step_current_end span:focus {
        text-decoration: none;
        outline: none; }
    ul.step li.first {
      border-left-width: 1px;
      border-left-color: #b7b7b7; }
      @media (min-width: 768px) {
        ul.step li.first {
          -moz-border-radius-topleft: 4px;
          -webkit-border-top-left-radius: 4px;
          border-top-left-radius: 4px;
          -moz-border-radius-bottomleft: 4px;
          -webkit-border-bottom-left-radius: 4px;
          border-bottom-left-radius: 4px; } }
      ul.step li.first span,
      ul.step li.first a {
        z-index: 12;
        padding-left: 5px !important; }
        @media (min-width: 768px) {
          ul.step li.first span,
          ul.step li.first a {
            -moz-border-radius-topleft: 4px;
            -webkit-border-top-left-radius: 4px;
            border-top-left-radius: 4px;
            -moz-border-radius-bottomleft: 4px;
            -webkit-border-bottom-left-radius: 4px;
            border-bottom-left-radius: 4px; } }
    ul.step li.second span, ul.step li.second a {
      z-index: 11; }
    ul.step li.third span, ul.step li.third a {
      z-index: 10; }
    ul.step li.four span, ul.step li.four a {
      z-index: 9; }
    ul.step li.five span, ul.step li.five a {
      z-index: 8; }
    ul.step li.six span, ul.step li.six a {
      z-index: 7; }
    ul.step li.seven span, ul.step li.seven a {
      z-index: 6; }  
    ul.step li.eight span, ul.step li.eight a {
      z-index: 5; }
    ul.step li.nine span, ul.step li.nine a {
      z-index: 4; }
    ul.step li.ten span, ul.step li.ten a {
      z-index: 3; }
    ul.step li.eleven span, ul.step li.eleven a {
      z-index: 2; }
    ul.step li.last span {
      z-index: 1; }
    @media (min-width: 768px) {
      ul.step li.last {
        -moz-border-radius-topright: 4px;
        -webkit-border-top-right-radius: 4px;
        border-top-right-radius: 4px;
        -moz-border-radius-bottomright: 4px;
        -webkit-border-bottom-right-radius: 4px;
        border-bottom-right-radius: 4px; }
        ul.step li.last span {
          -moz-border-radius-topright: 4px;
          -webkit-border-top-right-radius: 4px;
          border-top-right-radius: 4px;
          -moz-border-radius-bottomright: 4px;
          -webkit-border-bottom-right-radius: 4px;
          border-bottom-right-radius: 4px; } }
    ul.step li.step_current {
      font-weight: bold;
      background: #42b856;
      background-image: -webkit-gradient(linear, left 0%, left 100%, from(#42b856), to(#43ab54));
      background-image: -webkit-linear-gradient(top, #42b856, 0%, #43ab54, 100%);
      background-image: -moz-linear-gradient(top, #42b856 0%, #43ab54 100%);
      background-image: linear-gradient(to bottom, #42b856 0%, #43ab54 100%);
      background-repeat: repeat-x;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF42B856', endColorstr='#FF43AB54', GradientType=0);
      border-color: #399b49 #51ae5c #208931 #369946; }
      ul.step li.step_current span {
        color: #fff;
        text-shadow: 1px 1px #020202; /*#208931*/
        border: 1px solid;
        border-color: #73ca77 #74c776 #74c175 #74c776;
        position: relative; }
        @media (min-width: 992px) {
          ul.step li.step_current span {
            padding-left: 30px; }
            ul.step li.step_current span:after {
              background: url(images/order-step-a.png) right 0 no-repeat; } }
    ul.step li.step_current_end {
      font-weight: bold; }
    ul.step li.step_todo {
      background: #f7f7f7;
      background-image: -webkit-gradient(linear, left 0%, left 100%, from(#f7f7f7), to(#ededed));
      background-image: -webkit-linear-gradient(top, #f7f7f7, 0%, #ededed, 100%);
      background-image: -moz-linear-gradient(top, #f7f7f7 0%, #ededed 100%);
      background-image: linear-gradient(to bottom, #f7f7f7 0%, #ededed 100%);
      background-repeat: repeat-x;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF7F7F7', endColorstr='#FFEDEDED', GradientType=0); }
      ul.step li.step_todo span {
        display: block;
        border: 1px solid;
        border-color: #fff;
        color: #333;
        position: relative; }
        @media (min-width: 992px) {
          ul.step li.step_todo span {
            padding-left: 28px; }
            ul.step li.step_todo span:after {
              background: url(images/order-step-current.png) right 0 no-repeat; } }
    ul.step li.step_done {
      border-color: #666666 #5f5f5f #292929 #5f5f5f;
      background: #727171;
      background-image: -webkit-gradient(linear, left 0%, left 100%, from(#727171), to(#666666));
      background-image: -webkit-linear-gradient(top, #727171, 0%, #666666, 100%);
      background-image: -moz-linear-gradient(top, #727171 0%, #666666 100%);
      background-image: linear-gradient(to bottom, #727171 0%, #666666 100%);
      background-repeat: repeat-x;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF727171', endColorstr='#FF666666', GradientType=0); }
      ul.step li.step_done {
        color: #fff;
        text-shadow: 1px 1px rgba(0, 0, 0, 0.3);
        border: 1px solid;
        border-color: #8b8a8a; }
        @media (min-width: 992px) {
          ul.step li.step_done a {
            padding-left: 58px; }
            ul.step li.step_done a:after {
              background: url(images/order-step-done.png) right 0 no-repeat; } }
    @media (min-width: 992px) {
      ul.step li.step_done.step_done_last a:after {
        background: url(images/order-step-done-last.png) right 0 no-repeat; } }
    @media (min-width: 992px) {
      ul.step li.last span:after {
        display: none; } }
    ul.step li em {
      font-style: normal; }
      @media (min-width: 768px) and (max-width: 991px) {
        ul.step li em {
          display: none; } }