@charset "utf-8";

/* 共用樣式 */
body, ul, li, a{
	margin:0;
	padding:0;
}

h1,h2,h3,h4,h5,h6,h7{
	margin:0;
	padding:0;
	font-size:14px;
}

/* 系統標題 */
h1{ font-size:14px;}

/* 項目標題 */
h4{
	text-indent:5px;	
	padding:10px 20px; 
}
/* 單元標題 */
h5{
	text-indent:0;
	padding:10px 0 0 20px; 
}
/* 子標題 */
h6{
	color:#ccc;
	font-weight:800;
	margin:3px;
}
/* 備註 */
h7{
	color:#FFF;
	font-size:10px;
	float:right;
}

body {
	height:100%;
	background-color:#333;
}

#topCtrl{
	height:35px;
	line-height:35px;
	vertical-align:middle;
	color:#D5D5D5;
	background-color:#045d01;
}
	#topCtrl h1{
		line-height:33px;
		text-indent:16px;
	}

#wrap{
	width:100%;
	min-height:306px;
}

#main{
	width:100%;
	height:100%;
	background-color:#FFF;
}
	#mainMenu{
		font-size:18px;
		font-weight:800;
	}
		#mainMenu li{
			width:100%;
			text-indent:30px;
			display:block;
			list-style:none;
			line-height:50px;
			vertical-align:middle;
			border-bottom:#666 solid 1px;
		}
		.menuOverStyle{
			color:#fff;
			background-color:#045d01;
			border-top:#FFF solid 2px;
		}
		.contentStyle{
			width:100%;
			color:#454545;
			background-color:#ddd;
		}
#footer{
	height:30px;
	background-color:#333;
}

#mapMenuList li{
	font-size:16px;
	display:block;
	list-style:none;
	line-height:40px;
	text-indent:50px;
}

.top{
	border-top:#333 solid 1px;
}

#areaMenuList li{
	font-size:16px;
	display:block;
	list-style:none;
	line-height:40px;
	text-indent:50px;
	background-color:#E5E5E5;
}

.bkCanvasStyle{
	width:100%;
	height:100%;
	position:absolute;
	background-color:#000;
}

#mapCtrl ul{
	margin:0;
	padding:0;
}
	#mapCtrl li{
		top:2px;
		display:inline;
	}
	.mapCtrlStyle{
		width:100%;
		height:56px;
		color:#FFF;
		font-size:18px;
		background-color:#333;
	}
	
/* 共用 */
#backImg{
	float:right;
}
#homeImg{
	float:right;
}
#pageTitle{
	color:#F90;
	font-size:14px;
	margin-bottom:0px;
}
.noData{
	color:#FFF;
	text-indent:20px;
	background-color:#045d01;
	height:24px;
	line-height:24px;
}
#msg500{
	color:#FC0;
	text-align:left;
	text-indent:0;
	font-size:12px;
	font-weight:800;
	font-family:Arial, Helvetica, sans-serif;
}

#loading{
	color:#F90;
	font-size:16px;
	font-weight:800;
}
/* 速度顏色標示 */
.speed80up{
	color:#FFF;
	background-color:#090;
}
.speed60to79{
	color:#333;
	background-color:#FF0;
}
.speed40to59{
	color:#333;
	background-color:#F90;
}
.speed1to39{
	color:#FFF;
	background-color:#F00;
}
.speed0{
	color:#888;
	background-color:#454545;
}

/* 速度顏色標示 */
.text80up{
	color:#090;
}
.text60to79{
	color:#ff0;
}
.text40to59{
	color:#F90;
}
.text1to39{
	color:#F00;
}

/* 道路選單 */
#selt_sec_title{
	height:20px;
	line-height:20px;
	vertical-align:middle;
	color:#fff;
	background-color:#045d01;
	text-indent:10px;
	padding:4px 0 10px 0;
}
	#unitTitle{
		font-weight:bold;
	}

.sectionSpace{
	color:#FFF;
	background-color:#333;
}

	.sectionMenuList li{
		width:100%;
		color:#333;
		text-indent:40px;
		display:block;
		list-style:none;
		line-height:40px;
		vertical-align:middle;
		border-bottom:#666 solid 1px;
		background-color:#FFF;
	}

/* 平均速度 */
#directionSpace{
	text-align:center;
	color:#F90;
	padding:10px 10px 0px 10px;
}
	#directionSpace ul{
		width:100%;
		margin:auto;
		display:table;
	}
		#directionSpace li{
			text-align:center;
			list-style-type:none;
			background-color:#045d01;
			border:#CCC solid 1px;
			color:#FFF;
			margin:3px;
		}
			li .dirBtn{
				padding:5px;
			}
			.liBtnStyle{
				float:left;
			}
				.snBtnStyle{
					width:99.5%;
					height:100px;
					line-height:100px;
				}
				
				.ewBtnStyle{
					width:46%;
					height:200px;
					line-height:200px;
				}
				
#locationSpace{
	margin:auto;
	text-align:center;
	padding:6px 10px 0px 10px;
}
	.locBox{
		margin-top:10px;
	}
		.locBox a{
			color:#F90;
		}
		select{
			margin:8px 0px 13px 0px;
		}
	
	.btn{
		height:36px;
		line-height:36px;
		color:#FFF;
		text-align:center;
		background-color:#045d01;
		margin-top:12px;
		border:#888 solid 1px;
	}

#speedList{
	text-align:center;
	padding:12px 8px 16px 8px;
}
	#speedTb{
		color:#FFF;
		width:100%;
	}
		.speedLoc{
			height:30px;
		}
		
		.speedVal{
			font-size:20px;
			font-family:Arial, Helvetica, sans-serif;
			height:40px;
			line-height:40px;
		}
			.speedVal .val1{
				width:45px;
			}
			.speedVal .val3{
				width:45px;
			}
			
/* 壅塞路段 */
#dataList{
	text-align:left;
	text-indent:20px;
	padding:12px 8px 16px 8px;
}
	#congTb{
		color:#FFF;
		width:100%;
		background-color:#F00;
	}
		.congVal{
			line-height:30px;
			height:30px;
			color:#FFF;
			
		}
			.congVal .val1{
				text-indent:12px;
			}
			.congVal .val2{
				text-align:right;
				border-bottom:#333 solid 2px;
			}
				.congVal .val2 a{
					right:20px;
				}

/* 即時影像 */
#cctvTb{
	width:100%;
}
	#cctvTb .locRow{
		color:#FFF;
		text-indent:10px;
		background-color:#045d01;
		height:30px;
		line-height:30px;
	}
	#cctvTb .cctvRow{
		color:#FFF;
		height:30px;
		text-indent:20px;
		line-height:30px;
	}
	#cctvTb .noCctv{
		color:#999;
		height:30px;
		text-indent:20px;
		line-height:30px;
	}
.rowLine{
	border-bottom:#454545 solid 1px;
}
#cctvSpeed, 
#cctvMile{
	color:#FFF;
	width:100%;
	margin-top:6px;
	padding:5px;
}
	#staticImg img,
	#staticImg iframe{
		margin:3px 0 3px 0;
	}
		#dCctv{
			margin-top:10px;
			color:#FC0;
			text-indent:20px;
			font-size:14px;
		}
#stateChange,
#prvNext{
	width:100%;
	text-align:center;
	line-height:30px;
}
#att{
	margin-top:20px;
	color:#F00;
}
#attStr{
	color:#F90;
	text-indent:20px;
}
.km{
	font-size:14px;
	color:#CCC;
}

#fromLocDtl, #toLocDtl, #staticImg{
	margin-top:6px;
	color:#fff;
	text-indent:8px;
}
	 #fromLocDtl{
		 text-align:right;
	 }
#road{
	padding:10px 0 0 0;
	margin:auto;
}
	#nwRoad{
		border-bottom:#333 solid 2px;
	}
	#seRoad,
	#nwRoad{
		width:100%;
		min-height:28px;
		text-align:center;
		background-color:#999;
		vertical-align:middle;
	}
#seRoadTb,
#nwRoadTb{
	width:100%;
}
	#seRoadTb td,
	#nwRoadTb td{
		width:100%;
		text-align:center;
	}
		.roadCctvUl{
			padding:5px 0 5px 0;
			white-space:nowrap;
		}
		.roadCctvUl li{
			display:inline;
			padding:1px;
		}		
		.roadCctvUl a{
			color:#333;
			font-size:10px;
			min-width:30px;
			height:24px;
			line-height:24px;
			vertical-align:middle;
			display:inline-block;
		}
			.cctvBtnMile{
				background:url(../assets/cctv_bg.png) no-repeat;
			}
#roadCanvas{
	text-align:left;
}
#nodataDiv{
	width:auto;
	text-align:center;
}

#leftcar{float:left;}

#rightcar{float:right;}

/* 旅行時間 */

#travelTimeInfo{
	margin:0;
	padding:0;
	text-indent:0;
	color:#FFF;
	background-color:#045d01;
	padding:3px;
	margin-bottom:5px;
}
	#travelTimeInfo table{
		width:100%;
		border:#ccc solid 1px;
		padding:15px 5px 15px 5px;
		line-height:22px;
	}
	#travelTimeInfo #moreTd{
		text-align:center;
		height:50px;
		line-height:50xp;
		vertical-align:bottom;
	}
	
	#info0, #info1, #info2, #info3{
		text-indent:12px;
	}
	
#secList{
	margin:0;
	padding:0;
	text-indent:0;
	width:100%;
	margin-top:10px;
	color:#FFF;
	text-align:center;
}
	#travelTimeTb{
		width:100%;
		padding:5px;
	}
		#travelTimeTb .traLoc{
			line-height:26px;
			background-color:#045d01;
		}
		
		#travelTimeTb .traTime{
			line-height:32px;
		}
		
#historyData{
	background:#045d01;
	color:#FFF;
	padding:5px;
}
	#historyData ul{
		
	}
	#historyData li{
		text-indent:0;
		text-align:center;
		width:100%;
		line-height:22px;
		display:table;
		border:#ccc solid 1px;
		margin:3px 0 3px 0;
		padding:8px 0 8px 0;;
	}
	
/* 天氣 */
#weatherTb{
	width:100%;
	color:#FFF;
}
	#weatherTb td{
		padding:6px 0 6px 0;
	}
	#weatherTb a{
		text-indent:13px;
	}
	#weatherTb .boun{
		width:58px;
		color:#F90;
	}
		.bun1 td{
			background:url(../assets/weather_up_bg.png) repeat-x;
		}
		.bun2 td{
			background:url(../assets/weather_botton_bg.png) repeat-x;
			border-bottom:#888 solid 1px;
		}
		
/* 事件/施工 */

#incTb,
#workTb{
	width:100%;
	color:#FFF;
}
	.inc td,
	.work td{
		height:30px;
		line-height:30px;
		border-bottom:#888 solid 1px;
	}
		.i1{
			width:90px;
			white-space:nowrap;
		}
		.i2{
			white-space:nowrap;
		}
		.i3{
			width:100px;
			text-align:right;
			white-space:nowrap;
		}