.steps { clear: both; font-size: 12px; text-align: left;margin-top: 10px;}
  .steps ul { display: table; table-layout: fixed; width: 100%; }
    .steps ul li { width: 25%;display: table-cell; list-style:none; vertical-align: middle;
                   _display: inline; *width: 120px; /* IE6/7 Hacks */ }
@media (max-width:585px){.steps ul li{width: 50%;float:left;}}
    /* CSS2.x browsers and IE fill width hacks - To fill 100% width they need to set the number the steps in the UL */
    .steps ul.1step li,  .steps ul.2steps li, .steps ul.3steps li, .steps ul.4steps li, .steps ul.5steps li,
    .steps ul.6steps li, .steps ul.7steps li, .steps ul.8steps li, .steps ul.9steps li, .steps ul.10steps li { display: inline; float:left; }
    .steps ul.1step  li  { width: 100%; }
    .steps ul.2steps li  { width: 50%;  }
    .steps ul.3steps li  { width: 33%;  }
    .steps ul.4steps li  { width: 25%;  }
    .steps ul.5steps li  { width: 20%;  }
    .steps ul.6steps li  { width: 16%;  }
    .steps ul.7steps li  { width: 14%;  }
    .steps ul.8steps li  { width: 12%;  }
    .steps ul.9steps li  { width: 11%;  }
    .steps ul.10steps li { width: 10%;  }

      .steps ul li.current {}
      .steps ul li.last a { }
      .steps ul li.completed {}
        .steps ul li.completed.last, .steps ul li.completedLast {}

      .steps ul li a { display:block; text-decoration:none; font-weight: normal; }
        .steps ul li.completed a:hover, .steps ul li.completed.last a:hover, .steps ul li.completedLast a:hover { cursor:pointer; }

        .steps ul li a em, .steps ul li a strong, .steps ul li a span, .steps ul li em, .steps ul li strong, .steps ul li span { display:block; font-style:normal; }
        .steps ul li a em, .steps ul li a strong, .steps ul li em, .steps ul li strong { font-weight:bold; }
		.steps ul li em { font-size:16px; }
		.steps ul li span { font-size:20px; }
		@media (max-width:840px){.steps ul li span{font-size:16px;}}
		@media (max-width:640px){.steps ul li span{font-size:14px;}}
        .steps ul li a span, .steps ul li a div, .steps ul li span, .steps ul li div  {  }

/* Default colors */
.steps { color:#CCCCCC; }
        .steps ul li a:link, .steps ul li a:visited, .steps ul li a:hover, .steps ul li a:active { color:#CCCCCC; }
        .steps ul li.completed.last a, .steps ul li.completed.last a:link, .steps ul li.completed.last a:visited, .steps ul li.completed.last a:hover, .steps ul li.completed.last a:active, .steps ul li.current a,
        .steps ul li.completedLast a, .steps ul li.completedLast a:link, .steps ul li.completedLast a:visited, .steps ul li.completedLast a:hover, .steps ul li.completedLast a:active,
        .steps ul li.completedLastEnd a, .steps ul li.completedLastEnd a:link, .steps ul li.completedLastEnd a:visited, .steps ul li.completedLastEnd a:hover, .steps ul li.completedLastEnd a:active,
        .steps ul li.current a, .steps ul li.current a:link, .steps ul li.current a:visited, .steps ul li.current a:hover,  .steps ul li.current a:active,
        .steps ul li.completed a, .steps ul li.completed a:link, .steps ul li.completed a:visited, .steps ul li.completed a:hover, .steps ul li.completed a:active
            { color:#FFFFFF; }
        .steps ul li.completed a:hover, .steps ul li.completed.last a:hover, .steps ul li.completedLast a:hover { color:#FFFF99; }

/* Color themes - No images */
      .steps ul li { padding: 0 5px 0 5px; background-color: #EBEBEB; }
        .steps ul li.current { background-color:#6699CC; }
        .steps ul li.last {  }
        .steps ul li.completed { background-color:#3366CC; }
        .steps ul li.completed.last, .steps ul li.completedLast { }

/* Color themes - Blue images theme. Sprites size: 23px x 71px */
     .steps ul.blue li { color: #333333;height:71px; padding: 10px 20px 10px 15px;
                          background: #EBEBEB url("../images/step.gif") no-repeat right -71px;
                          _background: #EBEBEB url("../images/steps/blue_step_sprite.gif") no-repeat right -71px; /* IE6 needs phisical images */ }
        .steps ul.blue li.current { background-color:#953534;color: #ffffff; }
        .steps ul.blue li.completed, .steps ul.blue li.completedLast, .steps ul.blue li.completedLastEnd { background-color:#7B0201;color: #ffffff;}

/* Color themes - Green images theme. Sprites size: 23px x 71px */
      .steps ul.green li { height:71px; padding: 0 20px 0 5px;
                           background: #EBEBEB url("data:image/gif;base64,R0lGODlhFwBjAcQfAJ3MktXk0eTk5Pb29vDw8K/0kJnrdnSxZWepVsPZvu3t7Yf2U8Hyrfj5+O7y7enp6Yu/fl2iS/Pz87z1oeHs3ujv5+/07vT2873atvf391SdQoP+R////zajAObm5gAAACH5BAEAAB8ALAAAAAAXAGMBAAX/4CeOZGmeaKqubOu+cCzPdG3feK7vfO//wKBwSCwaj8ikcslsOp/QqHRKrVqv2OKAwxkovuCwWLztjs/jshfN/qrb7DccLZ+TuWv73azf5/sKdYCBeINuhYaEfIOCgI19j3aRkoiMlZaLmH+Ql46depNzoW2jpJ+gp6KpqpmcZgKGarCaiYqbfVwciaVnvL2rccDBrZTExbesyMmxwnTGy7TMz6bT1MrWu81p2tvX2Mzew+HO47/Vzufo5X7Z6+zg2em/7mAPvt3x9GDcYwX8YRsY/PuyYcFABRsCDkxoUB7AhAIdEky4gQI/igolYsy4bmPDjhsjltuYkEAzkhzn/6CsKGzlhJYrRbZZWdDkNJop0eBk+WynzDM7c4oJ+tJYUKFgjk5Q0OkoUoROLWZyuqHoH6pCsU6wuQZrTq9LC3lNOXZDADxlBXope3bAg7EvBxCASnVC24lU1SatyzQPVr17lfZ9eBRw4J1bWzk1fJhm4ltHLSIL+nPoTsk6cVa2TNPkNc2raC7wPDMmMJekS5PcDJTkY5WrT4ZMDYckVzshuW28jZsia9WjL0L8x5C3nuESCRowfvz3nOUHmSYH06CBggMdsmvfzn07huoBuovvrgFAAwkQxqvPDqGBgwAR1o9HAEBCg/TyxUMY8B5BfvIADJBBAv91dwAFFFSAXf+B2wX4HoPb0WcBehBqt9978VUYQYANEFhhBwcQ4EAF/lVYnoAeVnhAAhU4sGCFF8L3IX0ZdPhhBxCISOKHG6J444oWKHgjAARcEN6MAEz4IoQ5GpkhhPTZlyKEIY5YIoTlSfljAgFcsCSDTR5ZIX0UDHhjjiPeuCEBNn4YopYmEtkAAVv6+CGHCsyYwHlTFpjjnG7uKUGf+ZXHJqH5hWjkl4XKiah8igbAqHw9tslkkQFcWSACCdT46Hp/JqDpf5yehx+Ejj5Z4IqLxmknlZhOul6ln6oXpqzqcerph6GOmp+uGZwKJoqq/neAAg44IOx/J1rKYKS4jqdBAgM4u+r/odGKFwG1DQDAK4q+yoeAAjV6C2O1CRT7K7nB3omuupAqEGS24nFYq3oPSCABveI1MIABZW1QQQMZADxWBAE0UEBZOFZrMFYdIBDAABOMxd4AFywMcQfNeqXdAV1q7FSDGD8cVIQJZEwVdzkWPPJ221b78naKiowTgCWfbGDKNq80XssmozQftzvZWmTPG6nX4wVBY7TeigNQQJN8RLos9HqcXlCBz/I1ifQGv3J4NaRFSp10owT8e3aiKW/ttJ9s2swgp2U+fOkFZoPN4JoKJ6QimxIAHCebFQcqoAFDEizBjBQQjPi5DRROZQAZBK53gSdaoDGVGLt9eaMOU/TsmgAW5P35rBMPsHbXpPdMauok/bef5rGLS7kEY6tnnsq1q3dgA6a/Le3EFyzA9XgHYPy13+MhLODNPysPfXcIUDCA6tOz7HjR1JeJO/fcUetA071/LAHtOmungfVWg5/dAQ1YQH7u6z8/M4juzT92BNZjPzMG/NHf1RAgAYp5rAPsE6DQEFCjinksgWM5QAbkVxYIjkUC4wtYCAAAOw==") no-repeat right -71px;
                           _background: #EBEBEB url("../images/steps/green_step_sprite.gif") no-repeat right -71px; /* IE6 needs phisical images */ }
        .steps ul.green li.current { background-color:#83FE47; }
        .steps ul.green li.completed, .steps ul.green li.completedLast, .steps ul.green li.completedLastEnd { background-color:#36A300; }

/* Color themes - Sprite positions & default colors - MUST BE AT THE END! */
      .steps ul li { background-position: right -71px; }
        .steps ul li.current { background-position: right -142px; }
        .steps ul li.end, .steps ul li.last, .steps ul li.completedLastEnd { background-position: right top; }
        .steps ul li.completed { background-position: right -283px; }
        .steps ul li.completed:last-child, .steps ul li.completedLast, .steps ul li.completed.last { background-position: right -214px; } /* class "last completed" only supported by modern browsers */
        .steps ul li:last-child { background-position: right top; } /* CSS3 browsers */