#page-wrap { width: 1060px; margin: 60px auto; }

h1 { font: normal 32px Helvetica, Arial, Sans-Serif; letter-spacing: -1px; margin: 0 0 15px 0; }

body {
    font:13px arial,helvetica,clean,sans-serif;
}

.steps {
	padding: 0;
	overflow: hidden;
}

.steps a {
	color: white;
	text-decoration: none;
}

.steps em {
	display: block;
	font-size: 1.1em;
	font-weight: bold;
}



.steps li {
	float: left;
	margin-left: 0;
	width: 180px; /* 100 / number of steps */
	height: 80px; /* total height */
	list-style-type: none;
	padding: 5px 5px 5px 30px; /* padding around text, last should include arrow width */
	border-right: 3px solid white; /* width: gap between arrows, color: background of document */
	position: relative;
}

/* remove extra padding on the first object since it doesn't have an arrow to the left */
.steps li:first-child {
	padding-left: 5px;
}

/* white arrow to the left to "erase" background (starting from the 2nd object) */
.steps li:nth-child(n+2)::before {
	position: absolute;
	top:0;
	left:0;
	display: block;
	border-left: 25px solid white; /* width: arrow width, color: background of document */
	border-top: 40px solid transparent; /* width: half height */
	border-bottom: 40px solid transparent; /* width: half height */
	width: 0;
	height: 0;
	content: " ";
}

/* colored arrow to the right */
.steps li::after {
	z-index: 1; /* need to bring this above the next item */
	position: absolute;
	top: 0;
	right: -25px; /* arrow width (negated) */
	display: block;
	border-left: 25px solid #6b84aa; /* width: arrow width */
	border-top: 40px solid transparent; /* width: half height */
	border-bottom: 40px solid transparent; /* width: half height */
	width:0;
	height:0;
	content: " ";
}

.steps li:first-child {
    border-top-left-radius: 10px; border-bottom-left-radius: 10px;
}

.steps li:first-child::before {
    display: none;
}

.steps li:last-child {
    padding-right: 10px;
	border-top-right-radius: 10px; border-bottom-right-radius: 10px;
}

.steps li:last-child::after {
	display: none; 
}
		
/* Setup colors (both the background and the arrow) */

/* Completed */
.steps li { background-color: #6b84aa; }
.steps li::after { border-left-color: #6b84aa; }
		
/* Current */
.steps li.current { background-color: #156cab; }
.steps li.current::after { border-left-color: #156cab; }
		
/* Following */
.steps li.current ~ li { background-color: #9ea4ad; }
.steps li.current ~ li::after {	border-left-color: #9ea4ad; }
		
/* Hover for completed and current */
.steps li:hover {background-color: #696}
.steps li:hover::after {border-left-color: #696}