.wizard { margin-top: 20px; position: relative; background-color: #f9f9f9; border: 1px solid #d4d4d4; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; *zoom: 1; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); } .wizard:before, .wizard:after { display: table; line-height: 0; content: ""; } .wizard:after { clear: both; } .wizard div.steps-container ul { padding: 0; list-style: none outside none; } .wizard div.steps-container ul.previous-disabled li.complete { cursor: default; } .wizard div.steps-container ul.previous-disabled li.complete:hover { color: #468847; cursor: default; background: #f3f4f5; } .wizard div.steps-container ul.previous-disabled li.complete:hover .chevron:before { border-left-color: #f3f4f5; } .wizard div.steps-container ul li { position: relative; float: left; height: 33px; padding : 15px 20px 0 30px; margin: 0; font-size: 16px; line-height: 18px; color: #999999; cursor: default; background: #e2e2e2; } .wizard div.steps-container ul li .chevron { position: absolute; top: 0; right: -14px; z-index: 1; display: block; border: 24px solid transparent; border-right: 0; border-left: 14px solid #d4d4d4; } .wizard div.steps-container ul li .chevron:before { position: absolute; top: -24px; right: 1px; display: block; border: 24px solid transparent; border-right: 0; border-left: 14px solid #e2e2e2; content: ""; } .wizard div.steps-container ul li.complete { color: #468847; background: #f3f4f5; } .wizard div.steps-container ul li.complete:hover { cursor: pointer; background: #e7eff8; } .wizard div.steps-container ul li.complete:hover .chevron:before { border-left: 14px solid #e7eff8; } .wizard div.steps-container ul li.complete .chevron:before { border-left: 14px solid #f3f4f5; } .wizard div.steps-container ul li.active { color: #3a87ad; background: #cfe3fc; } .wizard div.steps-container ul li.active .chevron:before { border-left: 14px solid #cfe3fc ; } .wizard div.steps-container ul li .badge { margin-left: -5px; margin-right: 8px; margin-top : 0px; float: left; } .wizard div.steps-container ul li:first-child { border-radius: 4px 0 0 4px; } .wizard .actions { position: absolute; right: 0; z-index: 1000; float: right; padding-right: 15px; padding-left: 15px; line-height: 46px; vertical-align: middle; background-color: #e5e5e5; border-left: 1px solid #d4d4d4; } .wizard .actions a { margin-right: 8px; font-size: 12px; line-height: 45px; } .wizard .actions .btn-prev i { margin-right: 5px; } .wizard .actions .btn-next i { margin-left: 5px; } .step-content { padding: 10px; /*border-bottom : 1px solid #D4D4D4;*/ border-radius: 0 0 4px 4px; } .step-content .step-pane { display: none; } .step-content .active { display: block; webkit-box-shadow : none; box-shadow : none; } .step-content .active .btn-group .active { display: inline-block; } .steps .content { display: inline-block; margin-top: 8px; } .steps span.content .step-title { float: left; font-size: 14px; } .steps span.content .step-description { float: left; font-size: 11px; line-height: 12px; } .steps { margin-left:0 !important; }