html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

#nav {
	height:100%;
	width:14%;
	float:left;
	padding-right:5px;
}
#section {
	width:100%;
	height:100%;
}

#map {
	height: 100%;
}
.cpBtn {
	background-color:#fff;
	text-align:center;
	border : 1px solid #cccccc;
	border-radius: 3px;
	box-shadow: 0 2px 6px rgba(0,0,0,.3)
	cursor: pointer;
	margin-bottom: 5px;
	margin-bottom: 5px;
	margin-right: 2%;
	margin-left: 2%;
}
.cpBtn[status=on] {
	background-color:orange;
}
.cpBtn:hover {
	background-color:#ccc;
}
.cpBtnTxt {
	color : rgb(25,25,25);
	padding-left: 3px;
	padding-right: 3px;
	cursor: pointer;
}
#btnAnima {
	width: 30%;
	float:left;
}
#btnLeft, #btnRight {
	width: 10%;
	float:center;
}
#btnReset {
	width: 30%;
	float:right;
}
#trkList  td[pathName] {
	color: blue ;
	cursor: pointer;
}
#trkList  td[visiten=yes] {
	color: purple ;
}
#trkList  td[pathName]:hover {
	background-color:yellow ;
}

#txtFname {
	width:100%;
	text-align:center;
}

#infoBox {
	background-color:#fff;
	border-radius: 4px;
	padding:2px;
	margin-right:4px;
	opacity:0.7;
	font-size: 12px;
	line-height: 16px;
	font-family: Roboto,Arial,sans-serif;
}

#infoBox table {
	width:100%;
	border:1px solid #00ff;
}

#infoBox th {
	text-align:right;
	padding-right: 3px;
	white-space:nowrap;
	width:1px;
	max-width:10%;
}
#infoBox td {
	text-align:left;
	padding-left: 3px;
}

#txtTotUp,#txtVspeed[status=up],#txtGrade[status=up] {
	color:red ;
}
#txtTotDn,#txtVspeed[status=dn],#txtGrade[status=dn] {
	color:green ;
}