* {
  -webkit-box-sizing: border-box;
	 -moz-box-sizing: border-box;
		  box-sizing: border-box;
}
html {
	font-family: "Microsoft YaHei UI Light", "Microsoft YaHei UI", sans-serif;
}
body {
	margin: 0px;
	transition: background-color 0.5s, color 0.5s;
}
a {
	color: inherit;
	text-decoration: inherit;
}
hr {
	border:1px solid white;
}
#top_bar {
	position:fixed;
	top: 0px;
	height: 50px;
	line-height:50px;
	width:100%;
	padding: 0px 15px;
	color:white;
	transition: background-color 0.5s, color 0.5s;
}
#btn {
	width:50px;
	height:30px;
	border-radius:15px;
	color:white;
	border: 1px solid white;
	transition: background-color 0.5s, color 0.5s;
}
#left_bar {
	position:fixed;
	vertical-align: text-top;
	padding: 15px;
	left:-200px;
	width:200px;
	top:50px;
	height:calc(100% - 50px); 
	z-index:876;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transition: background-color 0.5s, color 0.5s;
}
#main_area {
	position:fixed;
	padding: 0px;
	left:0px;
	width:calc(100% - 0px);
	height:calc(100% - 50px);
	top:50px;
	-webkit-overflow-scrolling: touch;
	overflow-y: auto;
	z-index:765;
}
#main {
	width:100%;
	height:100%;			
}
@media screen and (min-width: 901px) {
	#btn {
		display: none;
	}
	#left_bar {
		left:0px !important; 
	}
	#main_area {
		left:200px !important;
		width:calc(100% - 200px);
	}
}
span.stretch {
	display:inline-block;
	-webkit-transform:scale(2,1.5); /* Safari and Chrome */
	-moz-transform:scale(2,1.5); /* Firefox */
	-ms-transform:scale(2,1.5); /* IE 9 */
	-o-transform:scale(2,1.5); /* Opera */
	transform:scale(2,1.5); /* W3C */
}
@media (prefers-color-scheme: dark) { 
	body {
		color: #AAA;
	}
	hr {
		border: 1px solid black;
	}
}