div.multi-step {
	-webkit-box-sizing:border-box;
	   -moz-box-sizing:border-box;
			box-sizing:border-box;	/* without it, the box will be 20 pixels more than 100% wide */
	display:table;
	font-size:1em;
	padding-right:20px;
	width:100%;
	position:relative;
}
div.multi-step ol {
	display:table-row;
	margin:0;
	padding:0;
}
div.multi-step ol > li {
	background-position:0 50%;
	background-repeat:no-repeat;
	display:table-cell;				/* table cells have equal heights */
	list-style:none;
	margin:0;
	padding:0;
}
div.multi-step ol > li:before {
	background-position:100% 50%;
	background-repeat:no-repeat;
	content:"";
	display:block;
	position:absolute;
	top:0;
	bottom:0;
	width:22px;
	margin-left:-20px;
}
div.multi-step ol > li.current p,
div.multi-step ol > li.current .wrap,
div.multi-step ol > li.current ~ li .wrap {
	opacity:1;
	filter:alpha(opacity=100);		/* this is for IE 8 */
}
div.multi-step ol > li .wrap {
	min-height:20px;				/* the number is abolutely positioned, so I need to save some space */
	padding:8px 8px 8px 28px;
	opacity:0.5;
	filter:alpha(opacity=50);
}
div.multi-step ol > li p {
	margin:0;
}
div.multi-step ol > li .title {
	font-weight:100;
	line-height:1;
	margin-top:2px;
	font-size: 14px;
    text-align: center;
}
div.multi-step ol > li .subtitle {
	font-size:0.8em;
	line-height:1.2;
	margin-top:0.4em;
}


div.multi-step.numbered ol {
	counter-reset:li;				/* initialize the step number */
}
div.multi-step.numbered ol > li .wrap {
	padding-left:58px;
	position:relative;
}
div.multi-step.numbered ol > li .wrap:before {
	content:counter(li);			/* the step number is generated with CSS and placed in the :before pseudo-element */
	counter-increment:li;
	position:absolute;
	top:4px;
	left:24px;
	border-style:solid;
	border-width:2px;
	border-radius:50%;
	width:24px;
	height:24px;
	line-height:22px;
	font-size:0.8em;
	font-weight:bold;
	text-align:center;
}


/* specific widths are needed for each step (LI) since table-cell are only as wide as it's content needs by default
   you should not really need less than three or more than five steps!
   the left percentages are for the arrows */
.one-step ol > li:first-child				{ width:100%; }
.one-step ol > li:before					{ left: 100%; }
.one-step ol > li + li:before				{ left:100%; display:none; }

div.multi-step.two-steps ol > li							{ width:50%; }
div.multi-step.two-steps ol > li:first-child				{ width:50%; }
div.multi-step.two-steps ol > li:before					    { left:50%; }
div.multi-step.two-steps ol > li + li:before				{ left:100%; }

div.multi-step.three-steps ol > li							{ width:34%; }
div.multi-step.three-steps ol > li:first-child				{ width:33%; }
div.multi-step.three-steps ol > li:before					{ left:33.6%; }
div.multi-step.three-steps ol > li + li:before				{ left:66.6%; }
div.multi-step.three-steps ol > li + li + li:before			{ left:100%; }

div.multi-step.four-steps ol > li							{ width:25%; }
div.multi-step.four-steps ol > li:before					{ left:26%; }
div.multi-step.four-steps ol > li + li:before				{ left:50.4%; }
div.multi-step.four-steps ol > li + li + li:before			{ left:74.8%; }
div.multi-step.four-steps ol > li + li + li + li:before		{ left:100%; }

div.multi-step.five-steps ol > li							{ width:20%; }
div.multi-step.five-steps ol > li:before					{ left:21%; }
div.multi-step.five-steps ol > li + li:before				{ left:40.6%; }
div.multi-step.five-steps ol > li + li + li:before			{ left:60%; }
div.multi-step.five-steps ol > li + li + li + li:before		{ left:79.6%; }
div.multi-step.five-steps ol > li + li + li + li + li:before{ left:100%; }


/* IE 8 fixes */
@media \0screen {
	div.multi-step ol > li .wrap:before {
		border-width:0;
		top:6px;
	}
}