body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body * {
	box-sizing: border-box;
}

.header {
	position: fixed; 
	top: 0; 
	right: 0;
	height: 3em; 

	background: rgba(81, 160, 246, 0.35); 
	color: white; 

	padding: 0;
	z-index: 2;
	
	display: block;
}
.header .header_l {
	display: inline-block;	
	text-align: left;
	padding: 0.5em;
}
.header .header_r {
	position: absolute;
	right: 0;
	display: inline-block;
	padding: 0.5em;
}


.footer {
	position: fixed; 
	bottom: 0; 
	right: 0; 
	height: 1.5em; 
	
	background: rgba(81, 160, 246, 0.35); 
	color: white; 
	text-align: left; 
	padding-top: 0.2em;
	z-index: 0;
}
.footer .footer_l {
	position: absolute; left: 1em;
}
.footer .footer_r {
	position: absolute; right: 1em; 
}
.footer .footer_c {
	text-align: center;
}


.sidebar {
	position: fixed; 
	top: 0;
	left: 0;
	bottom: 0;
	
	z-index: 2;
	
	background: rgba(81, 160, 246, 0.35); 
	color: white;
	
	display: block;
	height: 100%;
}
.sidebar-head {
	position: fixed; 
	top: 0; 
	height: 3em; 
	width: 11.25em; /* sidebar_width */
	left: 0; 
	right: 0; 
	z-index: 2;
	background: black;
	color: white;
	padding: 0.5em;
	background: rgba(81, 160, 246, 0.35); 
}
.sidebar-foot {
	position: fixed; 
	bottom: 0; 
	height: auto; 
	width: 11.25em; /* sidebar_width */
	left: 0; 
	right: 0; 
	z-index: 2;

	background: rgba(0,0,0, 0.8);
	color: white;	
	padding: 0.5em;
	background: rgba(81, 160, 246, 0.35); 
}
.sidebar-body {
	position: absolute; 
	top: 3em; 
	width: 11.25em; /* sidebar_width */
	z-index: 1;
	
}

.main-viewport {
	position: absolute; 
	left: 11.25em; /* sidebar_width */ 	
	right: 0;
	
	transform: scale(1);
	
}

.content {
	position: absolute;
	top: 3em;
	right: 0;
	
	bottom: 1.5em;
	
	margin: 0;
	padding: 0.2em;
	z-index: 1;
	
	margin-bottom: 3em;
	background: transparent;
}



.d-inline {display: inline-block; }
.d-block {display: block; }
.d-none {display: none; }

.div-top {position: absolute; top: 1em;}
.div-bottom {position: absolute; bottom: 1em;}

.div-left {position: absolute; left: 1em;}
.div-middle {text-align: center; }
.div-right {position: absolute; right: 1em; }

.div-menu-bar1 {}
.div-menu-bar2 {float: right; }
.div-menu-drop {}


@media only screen and (max-width: 768px) {
	.sidebar { display: none; width: 0; }
	.central { left: 0; }
}
@media only screen and (min-width: 768px) {
	.sidebar { display: block;  width: 11.25em; /* sidebar_width */ }
	.central { left: 11.25em; /* sidebar_width */ }
}

.sidebar-show .sidebar { display: block; width: 11.25em; /* sidebar_width */ }
.sidebar-show .central { left: 11.25em; /* sidebar_width */ }

.sidebar-hide .sidebar { display: none; width: 0; }
.sidebar-hide .central { left: 0;}


.filler {
	background: transparent;
	height: 10em; 
}