body {
	// background:#49E;
	webkit-touch-callout:none;
	// padding:0; margin:0;
	font-family:Arial, Helvetica, sans-serif;
	overflow: hidden;
}

#layersPanel p {
	margin: 0.5em 0.5em 0;
	font-weight: bold;
}

#timelinePanel {
overflow:hidden;
position: absolute;
padding-top: 40px;
z-index: 100;
}

.timelineGraduation {
	position:absolute;
	width:10%;
	top: 20px;
	height:280px;
	border-left:1px solid blue;
	background: white;
	overflow:hidden;
	white-space:nowrap;
	text-align:center;
}

.majorGraduation {
	position:absolute;
	top: -40px;
	height:20px;
	margin-left: -1px;
	border-left:2px solid gray;
	padding: 1px;
	overflow:hidden;
	white-space:nowrap;
	text-align:center;
	font-size: 16px;
	background: #333;
	color: #ccc;
}

.minorGraduation {
	position:absolute;
	top: -20px;
	height:160px;
	margin-left: 0px;
	border-left:1px solid #555;
	padding: 0;
	overflow:hidden;
	white-space:nowrap;
	text-align:center;
	font-size: 12px;
	background: #222;
	color: #ccc;
}

.sixHours, .fourHours, .hour, .tenMinutes, .minute, .tenSeconds, .second, .y100, .y200, .y500, .ky, .ky2, .ky5, .ky10, .ky20, .ky50, .ky100, .ky200, .ky500, .My, .My2, .My5, .My10, .My20, .My50, .My100, .My200, .My500, .Gy, .Gy2, .Gy5, .Gy10  {
	text-align:left;
	padding-left: 2px;
}

.timelineBar, .placemarkBar {
	overflow:hidden;
	white-space:nowrap;
	color: #DDD;
	text-align:center;
	vertical-align: middle;
	line-height: 18px;
	font-size: 12px;
	position:absolute;
	z-index: 200;
	box-sizing: border-box;
}

.timelineBar .description, .placemarkBar .description {  // default descriptions to invisible
	

}

.plot {
	text-align: left;
}

.axisLabel {
	color: #ddd;
}

#timeSlice {
	position: absolute;
	box-sizing:border-box;
	top: 0;
	margin-right: -2px;
	border-right: 4px solid red;
	opacity: 0.8;	
	z-index: 1000;
}

#nowElement {
	position: absolute;
	top: -40px;
	height: 300px;
	margin-left: -2px;
	border-left: 4px solid black;
	background-color: gray;
	padding-top: 40px;
	z-index: 900;
	opacity: 0.4;
}

#timeSlice a {
	display: block;
	width: 100%;
	height: 180px;
	margin-left: 1px;
	background-color: red;
	opacity: 0.2;
}

#timeSlice a:hover {
	opacity: 0.3;
}



#timeSlice #pastSpan {
	width: 100%;
	top: 40px;
	height: 300px;
	background-color: red;
	opacity: 0.2;
}

.weekend {
	background: #444;
	color: #ddd;
}



.minorGraduation.daytime {
	/* background: #553;
	color: #CCC; */
	background-color: #1d85af;  /* = DeepSkyBlue @ 30% */
	color: #fff;
}
.minorGraduation.nighttime {
	background-color: #0e0e3f;  /* = MidnightBlue @ 15% */
	color: #ccc;
	font-weight: bold;
	/*background: #111;
	color: #bbb;*/
}
.minorGraduation.firsthour {
	background-repeat: no-repeat;
	background-position: 5px 15px;
}
.minorGraduation.daytime.firsthour {
	background-image: url('timeline_images/sun_icon-30px.png');
}
.minorGraduation.nighttime.firsthour {
	background-image: url('timeline_images/moon_icon-30px.png');
}

#timelineContent {
	position:absolute; width:100%; height:100px; left:0%; border:none; background:gray;
}

#datePanel {
	text-align:center;
	background-color: #333333;
	color: white;
	padding-top: 8px;
	color: #eee;
	background-color: white;
	color: black;
}

.yearDisplay {
	overflow:hidden;
	white-space:nowrap;
	text-align:center;
	font-size: 80px;
	font-weight: bold;
	margin-top: 5px;
	display: block;
}
.dayDisplay, .monthDisplay {
	overflow:hidden;
	white-space:nowrap;
	text-align:center;
	font-size: 24px;
	display: none;
	line-height: 30px;
}

#datePanel.month .dayDisplay, #datePanel.day .dayDisplay, #datePanel.hour .dayDisplay, #datePanel.sixHours .dayDisplay {
	display: inline;
}

#datePanel.month .monthDisplay, #datePanel.day .monthDisplay, #datePanel.hour .monthDisplay, #datePanel.sixHours .monthDisplay {
	display: inline;
}

#datePanel.year .monthDisplay {
	display: inline;
	font-size: 30px;
	line-height: 30px;
}

#datePanel.year .yearDisplay, #datePanel.month .yearDisplay, #datePanel.day .yearDisplay, #datePanel.hour .yearDisplay, #datePanel.sixHours .yearDisplay {
	font-size: 60px;
	margin-top: 0;
}

#remoteFileTextArea { padding: 3px; }