.stepbar li {list-style-type:none;}
.stepbar.rounded li:first-child {
	border-top-left-radius: 6px;	
	border-bottom-left-radius: 6px;	
	-moz-border-radius-topleft: 6px;
	-moz-border-radius-bottomleft: 6px;
	border-left: none;
	}
.stepbar.rounded li:last-child {
	border-top-right-radius: 6px;	
	border-bottom-right-radius: 6px;	
	-moz-border-radius-topright: 6px;
	-moz-border-radius-bottomright: 6px;
	}	
.step-outer {
	background-clip: padding-box;
	box-sizing:border-box;
	-moz-box-sizing: border-box;
	float: left;
    position: relative;
	text-align: center;
	}
.step-content {z-index:-1;}
.step-content p {margin:0;}


/* arrow right */

.step-outer .arrow {
    right: 0;
    top: 50%;
    height: 0;
    position: absolute;
    width: 0;
	z-index:20;
    	}
.step-outer .arrow:after {
    border-color: rgba(255, 255, 255, 0);
    border-style: solid;
    height: 0;
    position: absolute;
    width: 0;
	content: "";
    z-index: 20;  
	border-left-color:rgba(191, 191, 191, 1);
    border-width: 10px 0 10px 10px;
    bottom: -10px;
    right: -7px;}

/* arrow under */

.step-outer .arrow:before {
    border-color: rgba(255, 255, 255, 0);
    border-style: solid;
	border-left-color: rgba(255, 255, 255, 1);
    border-width: 10px 0 10px 10px;
    bottom: -10px;
    height: 0;
    position: absolute;
    width: 0;
	content: "";
    right: -10px;
	z-index:10;}
.step-last .arrow,
.step-last .arrow:after {display:none;}

/********SETTINGS*********/

ul.stepbar {font-size: 14px; margin: 0; }
.stepbar-container { margin: 0 0 10px; }
.step-content {padding: 10px 15px;}
.step-outer {min-width: 120px; margin-bottom: 3px;}

/********COLORS**********/

.step-first {border-top: none; }
.step-first .step-content {z-index:1;}
.step-outer { background: #d6d6d6;color: #898989;border-left: 2px solid #fff;}
.step-outer .arrow:after {border-left-color: #d6d6d6;}
.step-current {background: #454545;color: #ffffff; }
.step-current.step-outer .arrow:after {border-left-color:#454545;}
.step-past {background: #777777;color: #ffffff; cursor: pointer;}
.step-past.step-outer .arrow:after {border-left-color: #777777;}

	/*hover color*/
.step-past:hover {background-color: #026bb5;color: #ffffff;}
.step-past.step-outer:hover .arrow:after {border-left-color: #026bb5;}	


/********** IE FIXES *********/

.ie8 .step-outer .arrow:after {
    border-color: transparent;
	border-left-color: #d6d6d6;
}
.ie8 .step-outer .arrow:before {
    border-color: transparent #FFFFFF;
}
.ie8 .step-current {background: #454545;color: #ffffff; }
.ie8 .step-current.step-outer .arrow:after {border-left-color:#454545;}
.ie8 .step-past {background: #777777;color: #ffffff; cursor: pointer;}
.ie8 .step-past.step-outer .arrow:after {border-left-color: #777777;}


/******VERTICAL styles*******/

.vertical.stepbar.rounded li:first-child {
	border-top-left-radius: 6px;	
	border-top-right-radius: 6px;	
	-moz-border-radius-topleft: 6px;
	-moz-border-radius-topright: 6px;
	
	border-bottom-left-radius: 0;	
	-moz-border-radius-bottomleft: 0;
	}
.vertical.stepbar.rounded li:last-child {
	border-bottom-left-radius: 6px;	
	border-bottom-right-radius: 6px;	
	-moz-border-radius-bottomleft: 6px;
	-moz-border-radius-bottomright: 6px;
	
		border-top-right-radius: 0;	
	-moz-border-radius-topright: 0;
	}
.vertical .step-outer {
	background-clip: padding-box;
	box-sizing:border-box;
	-moz-box-sizing: border-box;
	float: left;
	clear:left;
    position: relative;
	text-align: center;
	}
/* arrow right */

.vertical .step-outer .arrow {
    bottom: 0;
    left: 50%;
    height: 0;
    position: absolute;
    width: 0;
	z-index:20;
	
	right: auto;
    top: auto;
    	}
.vertical .step-outer .arrow:after {
    border-color: rgba(255, 255, 255, 0);
    border-style: solid;
    height: 0;
    position: absolute;
    width: 0;
	content: "";
    z-index: 20;  
	border-top-color: rgba(191, 191, 191, 1);
	border-width: 10px 10px 0;	
    left: -10px;
    bottom: -7px;}

/* arrow under */

.vertical .step-outer .arrow:before {
    border-color: rgba(255, 255, 255, 0);
    border-style: solid;
	border-top-color: rgba(255, 255, 255, 1);
	border-width: 10px 10px 0;
    left: -10px;
    height: 0;
    position: absolute;
    width: 0;
	content: "";
    bottom: -10px;
	z-index:10;}

/******** VERTICAL SETTINGS*********/

	
.vertical .step-outer {width: 170px;min-width: 170px;min-height: 30px;border-left:none;}

/********VERTICAL COLORS**********/	
	
/*vertical colors*/
.vertical .step-first {border-top: none; }
.vertical .step-first .step-content {z-index:1;}
.vertical .step-outer {background: #d6d6d6;color: #898989;border-top: 2px solid #fff;}
.vertical .step-outer .arrow:after {border-top-color: #d6d6d6;}
.vertical .step-current {background:#454545;color: #ffffff; }
.vertical .step-current.step-outer .arrow:after {border-top-color:#454545;}
.vertical .step-past {background: #777777;color: #ffffff;}
.vertical .step-past.step-outer .arrow:after {border-top-color: #777777;}

	/*vertical hover color*/
.vertical .step-past:hover {background-color: #026bb5;color: #ffffff;}
.vertical .step-past.step-outer:hover .arrow:after {border-top-color: #026bb5;border-left-color: transparent;}

@media (max-width: 979px) {
    .step-outer {min-width: inherit; margin-bottom: 3px;}     
}

/********** IE FIXES VERTICAL *********/

.ie8 .vertical .step-outer .arrow:after {
    border-color: transparent;
	border-top-color: #d6d6d6;
}
.ie8 .vertical .step-outer .arrow:before {
    border-color: transparent;
    border-top-color: #FFFFFF;
}
.ie8 .vertical .step-current {background: #454545;color: #ffffff; }
.ie8 .vertical .step-current.step-outer .arrow:after {border-top-color:#454545;}
.ie8 .vertical .step-past {background: #777777;color: #ffffff; cursor: pointer;}
.ie8 .vertical .step-past.step-outer .arrow:after {border-top-color: #777777;}