ShowEasy/EuroTran/WebSite/TG/css/track.css

@charset "utf-8";
/* CSS Document */
/*-----------------------progress----------------------*/
#progress {
	overflow: auto;
}
#progress li {
	text-align: center;
	width: 16.6%;
	float: left;
	color: #999;
	background-image: url(../images/progressLine.gif);
	background-repeat: repeat-x;
	background-position: left 60px;
}
#progress li span {
	display: inline-block;
	width: 60px;
	height: 60px;
	line-height: 60px;
	font-size: 31px;
	border-radius: 40px;
	background: #ddd;
	color: #fff;
}
#progress li.active {
	background-image: url(../images/progressLineAct.gif);
}
#progress li.active span {
	background: #f26529;
	color: #fff;
}
#progress li p {
	font-size: 19px;
}
#progress li.active p {
	color: #f26529;
}
/*-----------------------for PC-----------------------*/
@media screen and (min-width:801px) {
/*-----------------------progress----------------------*/
#progress {
	overflow: auto;
}
#progress li {
	text-align: center;
	width: 16.6%;
	float: left;
	color: #999;
	background-image: url(../images/progressLine.gif);
	background-repeat: repeat-x;
	background-position: left 60px;
}
#progress li span {
	display: inline-block;
	width: 60px;
	height: 60px;
	line-height: 60px;
	font-size: 31px;
	border-radius: 40px;
	background: #ddd;
	color: #fff;
}
#progress li.active {
	background-image: url(../images/progressLineAct.gif);
}
#progress li.active span {
	background: #f26529;
	color: #fff;
}
#progress li p {
	font-size: 19px;
}
#progress li.active p {
	color: #f26529;
}
/*-----------------------trackBtn----------------------*/
#trackBtn {
	text-align: center;
}
#trackBtn li {
	display: inline-block;
	margin-right: 10px;
}
#trackBtn li:last-child {
	margin-right: 0;
}
/*-----------------------trackInfo----------------------*/
#trackInfo{
	padding:20px;
	background:#f9f9f9;
	overflow:auto;
}
#trackInfo li{
	width:49%;
	border-bottom:1px dotted #ccc;
	float:left;
	padding:5px 0;
	display:block;
	margin-right:2%;
	}
#trackInfo li:nth-child(even){margin:0;}
}

/*------------------for mobile------------------------*/
@media screen and (max-width:800px) {
/*-----------------------progress----------------------*/
#progress li {
	text-align: center;
	width: 33%;
	float: left;
	color: #999;
	background-image: url(../images/progressLine.gif);
	background-repeat: repeat-x;
	background-position: left 35px;
}
#progress li span {
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	font-size: 21px;
	border-radius: 30px;
	background: #ddd;
	color: #fff;
}
#progress li p {
	font-size:15px;
}
#progress li:nth-child(n+4):nth-child(-n+6){ margin-top:10px;}
/*-----------------------trackBtn----------------------*/
#trackBtn {
}
#trackBtn li {
	width:100%;
	margin-bottom: 10px;
}
#trackBtn li:last-child {
	margin-bottom: 0;
}
/*-----------------------trackInfo----------------------*/
#trackInfo{
	padding:5px 10px;
	background:#f9f9f9;
}
#trackInfo li{
	border-bottom:1px dotted #ccc;
	padding:5px 0;
	display:block;
}
#trackInfo li:last-child {
	border-bottom:none;
}
}