/**
 * @lastmodified $Id: pvg_step.css 4347 2013-12-12 15:46:36Z h.ruhs $
 * @since 3.6.3
 *
 * @package Frontend-Kit
 * @tableofcontents
 *
 * 1. Step Default
 *    1.1 IE7 - .count in .stepBox
 *    1.2 Steps Nummerierung
 *    1.3 Steps Abstände
 * 2. Steps Alternative
 *    2.1 IE7
 */

/* @section 1. Step Default */

.stepBox {

background:#e2effd;
background:-moz-linear-gradient(top, #e2effd, #d5e8fe);
background:-ms-linear-gradient(top, #e2effd, #d5e8fe);
background:-o-linear-gradient(top, #e2effd, #d5e8fe);
background:-webkit-gradient(linear, left top, left bottom, from(#e2effd), to(#d5e8fe));
background:-webkit-linear-gradient(top, #e2effd, #d5e8fe);
background:linear-gradient(top, #e2effd, #d5e8fe);
padding:20px 70px 35px;border:1px solid #bccee2}

.stepBox li {
background:#D6E4F5;
background:-moz-linear-gradient(top, #e1eefd, #bfd0e4);
background:-ms-linear-gradient(top, #e1eefd, #bfd0e4);
background:-o-linear-gradient(top, #e1eefd, #bfd0e4);
background:-webkit-gradient(linear, left top, left bottom, from(#e1eefd), to(#bfd0e4));
background:-webkit-linear-gradient(top, #e1eefd, #bfd0e4);
background:linear-gradient(top, #e1eefd, #bfd0e4);
position:relative;height:8px;border:solid #bccee2;border-width:1px 0;width:4%}

.stepBox .inner {font:bold 1.25em/1.125em Rubik, sans-serif;text-decoration:none;position:absolute;top:-10px;width:100%;left:50%}
.stepBox .count {text-decoration:none;display:block;margin-left:-12px;width:20px;padding:0 2px;font:bold 1.25em/24px Rubik, sans-serif;color:#fff;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}

/* @section 1.1 IE7 - .count in .stepBox */

.ie7 .stepBox .count {float:left}

.stepBox.stepFive, .stepBox.stepSix {font-size:0.875em}

.stepFirst .inner {left:0}
.stepLast .inner {left:100%}

.stepBox .description {position:absolute;white-space:nowrap;top:30px;width:100%;left:-50%;color:#bccee2;line-height:1.25em}
.stepLast .description {right:50%;left:auto}
.stepFour .stepFirst .description, .stepFour .stepLast .description, .stepFive .stepFirst .description, .stepFive .stepLast .description, .stepSix .stepFirst .description, .stepSix .stepLast .description {width:auto}

.stepInactive .count {color:#bccee2}
.stepActive .description {color:#2a4d8f}
.stepPassed .description {color:#50930e}

.stepPassed .ico {background:url('../../img/pvg_sprite_icon_3.6.3.png') center -309px;display:inline-block;margin-left:5px;height:16px;width:16px}

/* @section 1.2 Steps Nummerierung */

.stepActive .count {
background:url('../../img/pvg_sprite_ie_3.6.3.png') repeat-x 0 -25px #149bd5;
background:-moz-linear-gradient(top, #149bd5, #0d65bf);
background:-ms-linear-gradient(top, #149bd5, #0d65bf);
background:-o-linear-gradient(top, #149bd5, #0d65bf);
background:-webkit-gradient(linear, left top, left bottom, from(#149bd5), to(#0d65bf));
background:-webkit-linear-gradient(top, #149bd5, #0d65bf);
background:linear-gradient(top, #149bd5, #0d65bf)}

.stepInactive .count {
background:url('../../img/pvg_sprite_ie_3.6.3.png') repeat-x #fafcff;
background:-moz-linear-gradient(top, #fafcff, #dfeeff);
background:-ms-linear-gradient(top, #fafcff, #dfeeff);
background:-o-linear-gradient(top, #fafcff, #dfeeff);
background:-webkit-gradient(linear, left top, left bottom, from(#fafcff), to(#dfeeff));
background:-webkit-linear-gradient(top, #fafcff, #dfeeff);
background:linear-gradient(top, #fafcff, #dfeeff);
border:1px solid #bccee2;width:18px;font:bold 1.2em/22px Rubik, sans-serif}

.stepPassed .count {
background:url('../../img/pvg_sprite_ie_3.6.3.png') repeat-x 0 -55px #7bb916;
background:-moz-linear-gradient(top, #7bb916, #4f920e);
background:-ms-linear-gradient(top, #7bb916, #4f920e);
background:-o-linear-gradient(top, #7bb916, #4f920e);
background:-webkit-gradient(linear, left top, left bottom, from(#7bb916), to(#4f920e));
background:-webkit-linear-gradient(top, #7bb916, #4f920e);
background:linear-gradient(top, #7bb916, #4f920e);
color:#fff}

.dividerNextInactive a, .dividerPrevInactive a, .dividerInactive a {display:block;margin:0 auto;width:16px;height:8px;background:url('../../img/pvg_sprite_icon_3.6.3.png') no-repeat center -551px}

/* @section 1.3 Steps Abstände */

.stepThreeCustom {padding:20px 100px 35px}

.stepThree .stepActive, .stepThree .stepInactive, .stepThree .stepPrevActive, .stepThree .stepPassed {width:46%}
.stepThree .stepFirst, .stepThree .stepLast {width:23%}

.stepFour .stepActive, .stepFour .stepInactive, .stepFour .stepPrevActive, .stepFour .stepPassed {width:30%}
.stepFour .stepFirst, .stepFour .stepLast {width:14%}

.stepFive .stepActive, .stepFive .stepInactive, .stepFive .stepPrevActive, .stepFive .stepPassed {width:21%}
.stepFive .stepFirst, .stepFive .stepLast {width:10.5%}

.stepSix .stepActive, .stepSix .stepInactive, .stepSix .stepPrevActive, .stepSix .stepPassed {width:16%}
.stepSix .stepFirst, .stepSix .stepLast {width:8%}

.dividerFirstActive, .dividerFirstInactive, .dividerLastActive, .dividerLastInactive {display:none}

/* @section 2. Steps Alternative */

.stepBoxAlternative li {background:url('../../img/pvg_sprite_steps_3.6.3.png') #d5e8fe 0 -96px repeat-x}

.stepAlternativeThree li {width:33%}
.stepAlternativeThree .stepActive {width:34%}
.stepAlternativeFour li {width:25%}
.stepAlternativeFive li {width:20%}
.stepAlternativeSix li {width:16%}
.stepAlternativeSix .stepActive {width:20%}

.stepBoxAlternative {color:#2a4d8f}
.stepBoxAlternative li {float:left}
.stepBoxAlternative a,
.stepBoxAlternative a:hover {background:url('../../img/pvg_sprite_steps_3.6.3.png') left -32px no-repeat;display:block;height:32px;font:1.25em/32px Rubik, sans-serif;text-align:center;padding-left:21px;color:#2a4d8f}
.stepBoxAlternative a[href]:hover {color:#50930E;text-decoration:underline}
.stepBoxAlternative .stepActive a {color:#fff;text-decoration:none}

.stepBoxAlternative .stepActive {background-position:0 -128px;color:#fff;height:32px;border-width:1px}

.stepBoxAlternative .stepInactive a {background-position:left -32px}
.stepBoxAlternative .stepActive + li a {background-position:left -64px}
.stepBoxAlternative .stepPassed + li a {background-position:left 0}
.stepBoxAlternative li:first-child a {background-image:none;padding:0}

.progressBarStepsAlternative {padding:5px 2%}

.progressBarStepsAlternative .progressBarLabel {
    float: left;
    font-weight: 500;
    color: #666;
    margin-top: 3px;
}

.progressBarStepsAlternative .progressLine {
-moz-border-radius:0.25em;
-webkit-border-radius:0.25em;
border-radius:0.25em;
float:left;margin:0.25em 0 0 1%;padding:1px;height:12px;width:85%}
.progressBarStepsAlternative .progressLineInner {height:12px;margin:0}
.progressBarStepsAlternative .progressBarPercent {float:right;color:#909090}

/* @section 2.1 IE7 */

.ie7 .stepAlternativeFour .stepLast {margin-right:-2px}
.ie7 .progressBarStepsAlternative .progressLine {position:static}