/* Progress bar example
* 15 July 2014 - NHH137
*
* Progress bar styling
*/


/* step-navigation CSS start */
.step-nav-wrapper {
	position: relative;
	min-height: 1px;	
	border: 0;
	line-height: 1;
	font-size: 0.96em;
}

.step-navigation{
	width: 100%;
	overflow: hidden;
	display: block;
}

.step-navigation li{
	display:inline-block;
	margin:1em 0;
	vertical-align: top;
}

.sn-container,
.sn-link {
	width: 100%;
	display: block;
	text-align: center;
}
	
.sn-container,
.sn-link-grey {
	width: 100%;
	display: block;
	text-align: center;
	color: #C2C2C2;
}
	
.sn-container,
.sn-link-grey-curr {
	width: 100%;
	display: block;
	text-align: center;
}

	
.sn-link > a {
	color: rgb(75,172,198);;
	text-decoration: none;
}

.sn-link > a:hover {
	color: rgb(75,172,198);
	text-decoration: none;
}


/* 
* widths here 
* so if there are 4 steps then 100/4 = 25%
*/

.sn-2-items > li { width:98.3%; }
.sn-3-items > li { width:49.7%; }
.sn-4-items > li { width:33.45%; }
.sn-5-items > li { width:25.3%; }
.sn-6-items > li { width:20.4%; }

.step-navigation .completed {margin-right: -12px; }
.step-navigation .incompleted{	margin-right: -12px; }
.step-navigation .last { width: 10px; margin-right: -12px; }
.step-navigation .last.current{margin-right: -12px; width: 17px; margin-left: 0.6em; }



.step-navigation .sn-container{
	padding-top:1em;
	background:url('images/navigation/incomplete-step-icon.png') 0% 9.1px no-repeat;
}

.step-navigation .incompleted .sn-container{
	padding-top:1em;
	background:url('images/navigation/incomplete-step-icon.png') 0% 9.1px no-repeat;
	outline:none;
}

.step-navigation .completed .sn-container{
	background:url('images/navigation/complete-step-icon.png') 0% 9.1px no-repeat;
	outline:none;
}

.step-navigation .current .sn-container{
	background:url('images/navigation/current-step-icon.png') 0% 14.2px no-repeat;
	
	outline:none;
}
.step-navigation .last.current .sn-container{
	background:url('images/navigation/current-step-icon.png') 50% 14.2px no-repeat;
	outline:none;
}

.step-navigation .sn-link{
	border-top: 1px solid rgb(75,172,198);
	padding:0.75em 0;

}

.step-navigation .sn-link-grey {
	border-top: 1px solid #C2C2C2;
	padding: 0.75em 0;
}

.step-navigation .sn-link-grey-curr {
	border-top: 1px solid #C2C2C2;
	padding: 0.75em 0;
}

.step-navigation .first .sn-link {
	text-align: left;
	margin-left: -2% !important;
	width: auto;
}

.step-navigation .first .sn-link-grey {
	border-top: 1px solid #C2C2C2;
	text-align: left;
	margin-left: -2% !important;
	width: auto;
	color: rgb(75,172,198) !important;
	padding-left: 9px;
}

.step-navigation .first .completed .sn-link {
	border-top: 1px solid rgb(75,172,198);
	text-align: left;
	margin-left: -2% !important;
	width: auto;
	color: rgb(75,172,198) !important;
}

.step-navigation .completed .sn-link {
	color: #363636;
	width: auto;
	text-align: left;
	margin-left: -23%;
	padding-left: 7px;
}

.step-navigation .last .sn-link-grey {
	border-top: 1px solid #C2C2C2;
	color: #C2C2C2;
	margin-left: -7em; 
	width: auto;
}


.sn-2-items .completed .sn-link,
.sn-2-items .first .sn-link-grey { padding-left: 1.8em; }

.sn-3-items .incompleted .sn-link-grey { margin-left: -18.5em; }
.sn-3-items .completed .sn-link { margin-left: -9%; }
.sn-3-items .first .sn-link-grey, .sn-3-items .first .sn-link { padding-left: 1em; }

.sn-4-items .incompleted .sn-link-grey { margin-left: -16.5em; }
.sn-4-items .completed .sn-link { margin-left: -14%; }
.sn-4-items .first .sn-link-grey, .sn-4-items .first .sn-link { padding-left: 0.7em; }


.sn-5-items .incompleted .sn-link-grey { margin-left: -9.5em; }
.sn-5-items .completed .sn-link { margin-left: -17%; }

.txt-left {
	margin-left: -49%;
}


.txt-left-curr {
	color: rgb(75,172,198);
	margin-left: -96% !important;
}


.sn-2-last-txt { margin-left: -12%; }
.sn-3-last-txt { margin-left: 50%; }
.sn-4-last-txt { margin-left: 48%; }
.sn-5-last-txt { margin-left: 25%; }
.sn-6-last-txt { margin-left: 13%; }
.text-left-last-current { color: rgb(75,172,198); margin-left: -8em;}

/* Step Navigation CSS end */


.progress-wrapper {

	margin-top: 2em;
}

.sample-2steps {
	margin-top: 1em;
	font-size: 2em;
}

.prog-heading {
	font-size: 2em;
}

@media (max-width: 991px) {
	
	.step-navigation .completed .sn-link { margin-left: -31%; }
	.sn-3-items .incompleted .sn-link-grey { margin-left: -13.5em; }
	.sn-3-last-txt {margin-left: 53.5%; }
	.sn-3-items .completed .sn-link { margin-left: -12%; }
	
	.sn-4-items .incompleted .sn-link-grey { margin-left: -9em; }
	.sn-4-items .completed .sn-link { margin-left: -18%; }
	.sn-4-last-txt {margin-left: 30%; }
	
	.sn-5-items .incompleted .sn-link-grey { margin-left: -7em; }
	.sn-5-items .completed .sn-link { margin-left: -24%; }
	.sn-5-last-txt {margin-left: 15%; }
}

@media (max-width: 767px) {
	
	.step-nav-wrapper {
		display: none;
	}
		
}