/* --------------------------------------------------------------

   metromap.css
   * Metro map related styles
   
-------------------------------------------------------------- */


.metro-map-wrapper {
	width: 573px;
	height: 56px;
	background-image: url(/ulem-industry/javax.faces.resource/img/metro-map/metromap_horizontal_line.png.xhtml);
	background-repeat: repeat-x;
	background-position: center center;
}

.metro-map {
	width:90%;
	height:100%;
	background-image: url(/ulem-industry/javax.faces.resource/img/metro-map/metromap_horizontal_thick_line.png.xhtml);
	background-repeat: repeat-x;
	background-position: right center;
	float:right;
	margin-right: 30px;
}

.metro-map-wrapper .metro-vertical-line { 
	width: 1px;
	height: 49%;
	position: absolute;
	background-image: url(/ulem-industry/javax.faces.resource/img/metro-map/metromap_vertical_line.png.xhtml);
	background-repeat: repeat-y;
	background-position: center center;
	margin-top: 28px;
	
}

.metro-map-wrapper .star-left, .star-right {
	width: 21px;
	height: 100%;
	position: absolute;
}

.metro-map-wrapper .star-left { 
	background-image: url(/ulem-industry/javax.faces.resource/img/metro-map/metromap_star_left.png.xhtml);
	background-repeat: no-repeat;
	background-position: center right;
	margin-left: 19px;
}


.metro-map-wrapper .star-right { 
	background-image: url(/ulem-industry/javax.faces.resource/img/metro-map/metromap_star_right.png.xhtml);
	background-repeat: no-repeat;
	background-position: center right;
	right: 14px;
}

.metro-map ul { height:100%; margin-top: 16px;}
.metro-map li { height:100%; display:inline-block; }

.metro-map li span {
	color: #FFFFFF;
	display: inline-block;
	padding-top: 4px;
}

.metro-map li div {
	height: 99%;
	background-image: url(/ulem-industry/javax.faces.resource/img/metro-map/metromap_vertical_line.png.xhtml);
	background-repeat: no-repeat;
	background-position: center center;
    height: 93%;
    }

.metro-map li div div {
	color: #999;
	font-size: 8px;
	position: absolute;
	background: none;
	margin-top: 12px;
	width: 50px;
}

.metro-map li.active, li.pending, li.completed {
	width: 50px;
}

.metro-map li.active {
	background-image: url(/ulem-industry/javax.faces.resource/img/metro-map/metromap_step_active.png.xhtml);
	background-repeat: no-repeat;
	background-position: top center;
}

.metro-map li.pending {
	background-image: url(/ulem-industry/javax.faces.resource/img/metro-map/metromap_step_pending.png.xhtml);
	background-repeat: no-repeat;
	background-position: top center;
}

.metro-map li.completed {
	background-image: url(/ulem-industry/javax.faces.resource/img/metro-map/metromap_step_completed.png.xhtml);
	background-repeat: no-repeat;
	background-position: top center;
}

.metro-simple-mode {
	background-image: none;
	display: inline-block;
}