ul.nav-wizard {
    background-color: #282828;
    position: relative;
    overflow: hidden;
}
ul.nav-wizard:before {
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 46px;
    height: 47px;
    border-top: 1px solid #d4d4d4;
    border-bottom: 1px solid #d4d4d4;
    z-index: 11;
    content: " ";
}
ul.nav-wizard:after {
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 138px;
    height: 47px;
    border-top: 1px solid #d4d4d4;
    border-bottom: 1px solid #d4d4d4;
    z-index: 11;
    content: " ";
}
ul.nav-wizard li {
    position: relative;
    float: left;
    height: 46px;
    display: inline-block;
    padding: 0 20px 0 30px;
    margin: 0;
    font-size: 16px;
    line-height: 46px;    
}
ul.nav-wizard li a {
    color: #fff;
    padding: 0;
}
ul.nav-wizard li a:hover {
    background-color: transparent;
}
ul.nav-wizard li:before {
    position: absolute;
    display: block;
    border: 24px solid transparent;
    border-left: 16px solid #d4d4d4;
    border-right: 0;
    top: -1px;
    z-index: 10;
    content: '';
    right: -16px;
}
ul.nav-wizard li:after {
    position: absolute;
    display: block;
    border: 24px solid transparent;
    border-right: 0;
    top: -1px;
    z-index: 10;
    content: '';
    right: -15px;
}

ul.nav-wizard li.active {
    color: #fff;
    background: #000;
}
ul.nav-wizard li.before-active {
    cursor: pointer;
}
ul.nav-wizard li.active:after {
    border-left: 16px solid #000;
}
ul.nav-wizard li.active a,
ul.nav-wizard li.active a:active,
ul.nav-wizard li.active a:visited,
ul.nav-wizard li.active a:focus {
    color: #ffffff;
    background: #000;
    text-decoration: underline;
}
/** Prvni zalozka "Typ" **/
.wizard-1, .wizard-1 a {
    background-color: #A82682;
}
ul.nav-wizard .active ~ li.wizard-1:after {
    border-left: 16px solid #A82682;
}
ul.nav-wizard li.before-active.wizard-1:after {
    border-left: 16px solid #A82682;
}
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-1 a,
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-1 a:active,
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-1 a:visited,
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-1 a:focus {
    background-color: #A82682;
}
/** Druha zalozka "Velikosti" **/
.wizard-2, .wizard-2 a {
    background-color: #00A0E3;
}
ul.nav-wizard .active ~ li.wizard-2:after {
    border-left: 16px solid #00A0E3;
}
ul.nav-wizard li.before-active.wizard-2:after {
    border-left: 16px solid #00A0E3;
}
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-2 a,
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-2 a:active,
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-2 a:visited,
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-2 a:focus {
    background-color: #00A0E3;
}
/** Treti zalozka "Pocet ks" **/
.wizard-3, .wizard-3 a {
    background-color: #E9486A;
}
ul.nav-wizard .active ~ li.wizard-3:after {
    border-left: 16px solid #E9486A;
}
ul.nav-wizard li.before-active.wizard-3:after {
    border-left: 16px solid #E9486A;
}
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-3 a,
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-3 a:active,
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-3 a:visited,
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-3 a:focus {
    background-color: #E9486A;
}
/** Ctvrta zalozka "Barvy" **/
.wizard-4, .wizard-4 a {
    background-color: #FECC00;
}
ul.nav-wizard .active ~ li.wizard-4:after {
    border-left: 16px solid #FECC00;
}
ul.nav-wizard li.before-active.wizard-4:after {
    border-left: 16px solid #FECC00;
}
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-4 a,
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-4 a:active,
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-4 a:visited,
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-4 a:focus {
    background-color: #FECC00;
}
/** Pata zalozka "Grafika" **/
.wizard-5, .wizard-5 a {
    background-color: #B0CB1F;
}
ul.nav-wizard .active ~ li.wizard-5:after {
    border-left: 16px solid #B0CB1F;
}
ul.nav-wizard li.before-active.wizard-5:after {
    border-left: 16px solid #B0CB1F;
}
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-5 a,
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-5 a:active,
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-5 a:visited,
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-5 a:focus {
    background-color: #B0CB1F;
}
/** Sesta zalozka "Doplnky" **/
.wizard-6, .wizard-6 a {
    background-color: #AF9778;
}
ul.nav-wizard .active ~ li.wizard-6:after {
    border-left: 16px solid #AF9778;
}
ul.nav-wizard li.before-active.wizard-6:after {
    border-left: 16px solid #AF9778;
}
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-6 a,
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-6 a:active,
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-6 a:visited,
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-6 a:focus {
    background-color: #AF9778;
}
/** Sedma zalozka "Doprava a platba" **/
.wizard-7, .wizard-7 a {
    background-color: #66C3D0;
}
ul.nav-wizard .active ~ li.wizard-7:after {
    border-left: 16px solid #66C3D0;
}
ul.nav-wizard li.before-active.wizard-7:after {
    border-left: 16px solid #66C3D0;
}
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-7 a,
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-7 a:active,
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-7 a:visited,
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-7 a:focus {
    background-color: #66C3D0;
}
/** Osma zalozka "Zakaznik" **/
.wizard-8, .wizard-8 a {
    background-color: #E31E24;
}
ul.nav-wizard .active ~ li.wizard-8:after {
    border-left: 16px solid #E31E24;
}
ul.nav-wizard li.before-active.wizard-8:after {
    border-left: 16px solid #E31E24;
}
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-8 a,
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-8 a:active,
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-8 a:visited,
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-8 a:focus {
    background-color: #E31E24;
}
/** Devata zalozka "Shrnuti" **/
.wizard-9, .wizard-9 a {
    background-color: #EF7F1A;
}
ul.nav-wizard .active ~ li.wizard-9:after {
    border-left: 16px solid #EF7F1A;
}
ul.nav-wizard li.before-active.wizard-9:after {
    border-left: 16px solid #EF7F1A;
}
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-9 a,
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-9 a:active,
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-9 a:visited,
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-9 a:focus {
    background-color: #EF7F1A;
}
/** Desata zalozka "Dokonceni" **/
.wizard-10, .wizard-10 a {
    background-color: #282828;
}
ul.nav-wizard .active ~ li.wizard-10:after {
    border-left: 16px solid #282828;
}
ul.nav-wizard li.before-active.wizard-10:after {
    border-left: 16px solid #282828;
}
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-10 a,
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-10 a:active,
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-10 a:visited,
ul.nav-wizard.nav-wizard-backnav .active ~ li.wizard-10 a:focus {
    background-color: #282828;
}