/*main*/

#containerbg{width: 100%;height: 100%;position: absolute;top:0px;left: 0px;background-color: #f0f0f0;overflow: hidden;z-index: -1;opacity: 0.5;}
#map{width: 100%; height: 100%; position: absolute; top:0px; left: 0px; background-color: #000}
#canvas{width: 100%; height: 100%; position: absolute; top:0px; left: 0px;}
#points{width: 100%;height: 100%;position: absolute;top:0px;left: 0px;}
.point{background-color:white;width: 5px;height: 5px;position: absolute;border-radius: 10px;border-color:#4c4c4c;border-style: solid;border-width: 2px;cursor: pointer;}
.pText{width: 50px; height: 16px; position: absolute; font-size: 16px; color:#4c4c4c; font-weight: bold; cursor: pointer;}
#tuli{width: 230px;height: auto;position: absolute;bottom: 50px;left: 20px;pointer-events:none;}

#calendar{width: 230px;height: 80px;position: absolute;bottom: 226px;left: 20px;z-index: 0;}
#calendar .title{width: 100%; height: 30%; position: absolute; top:0px; left: 0px; background-image: url(../images/calendar_bk.png); background-size: 100% 100%;text-indent: 10px; color: white; font-size: 17px; }
#calendar .title:after{display:inline-block; width:0; height:100%; vertical-align:middle; content:'';}
#calendar .date{width: 100%; height: 70%; position: absolute; bottom: 0px; left: 0px; /*border-color:#893e18; border-width: 2px; border-style: solid;*/ background-color:white; box-shadow: 3px 3px 0px #d9d1b6;}
#calendar .seg{width: 10%; height: 80%; position: relative; float: left; margin-left: 1.6%; margin-top:2.5%; border-color:#4c4c4c; border-width: 1px; border-style: solid; color:#4c4c4c; font-size: 22px; text-align: center; overflow: hidden;}
#calendar .seg:after{display:inline-block; width:0; height:100%; vertical-align:middle; content:'';}
.segWrapper{width: 100%; height:100%; position: absolute; top:0px; left: 0px; }
.segInner{width: 100%;height: 10%;position: relative;float: left;}
.segInner:after{display:inline-block; width:0; height:100%; vertical-align:middle; content:'';}

#calendar .monthData{width: 230px; height: 250px; background-color: white; box-shadow: 3px 3px 0px #d9d1b6; position: absolute; top:100px;}

.monthData p{width:100%; text-align: center; color: #303030; font-size: 16px; pointer-events:none; position: absolute; left: 0px; bottom: 0px}
.monthData .inner{width: 70%; height: 70%; position: absolute; top:15%; left: 15%; text-align: center; color: #4c4c4c; font-size: 50px; background-size: 100% auto; background-repeat: no-repeat;}
.monthData .inner:after{display:inline-block; width:0; height:100%; vertical-align:middle; content:'';}
#elevation .measure{width: 100%; height: 20px; position: absolute; left: 0px; border-top-style: solid; border-top-width: 1px; border-top-color: black}
#elevation .measure p{bottom: 5px; font-size: 15px; color:#4c4c4c; text-align:left; text-indent: 20px; font-weight:bold;}
#calendar .sum{position: absolute; top:0px; left: 0px; opacity: 0}
#containerbg .foot{
	
	position: absolute;
	z-index: 3;
	bottom: 0px;
	width: 100%;
	height:30px;
	background-color: white;
	text-align: center;
	font-size: 12px;
	color: #4c4c4c;
	line-height: 30px;
	pointer-events:none;
}