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

#container {
	width: 100%; height: 100%;
	clear: both;
	margin: 0; padding: 0; 
	overflow-y: hidden;
}

/* for 3D model and elements on it */
#left {
	float: left; width: 100%; height: 100%;
	margin: 0; padding: 0;
	background-color: Black;
	overflow: hidden;
	position: relative;
}
#left.share {
	width: 50%;
}

/* for 3D model */
#model {
	position: absolute;
	width: 100%; height: 100%;
	margin: 0; padding: 0;
	z-index: 1;
}
#overlay {
	position: absolute;
	background-color: transparent;
	width: 100%; height: 100%;
	margin: 0; padding: 0;
	z-index: 2;
	pointer-events: none;
}

/* button for information over left half */
#control_info_button {
	position: absolute;
	left: 1%; top: 1%;
	z-index: 10;
	background-color: transparent;
	color: White;
	font-size: 2.5em;
	text-decoration: none;
	border: none;
	transition: opacity 2s ease 0s;
	-webkit-transition: opacity 2s ease 0s;
	-moz-transition: opacity 2s ease 0s;
	-khtml-transition: opacity 2s ease 0s;
	-ms-transition: opacity 2s ease 0s;
	opacity: 0;
}
#control_info_button:hover, #control_info_button:active {
	z-index: 10;
	transition: opacity 1s ease 0s;
	-webkit-transition: opacity 1s ease 0s;
	-moz-transition: opacity 1s ease 0s;
	-khtml-transition: opacity 1s ease 0s;
	-ms-transition: opacity 1s ease 0s;
	opacity: 1;
}
#control_info_button.shown {
	z-index: 10;
	transition: opacity 2s ease 0s;
	-webkit-transition: opacity 2s ease 0s;
	-moz-transition: opacity 2s ease 0s;
	-khtml-transition: opacity 2s ease 0s;
	-ms-transition: opacity 2s ease 0s;
	opacity: 1;
}

/* console for printing loading information */
#console {
	position: absolute;
	left: 40%; top: 40%;
	color: White;
	font-size: 1.5em;
	z-index: 10;
}
#console.done {
	display: none;
}

/* for annotation */
#right {
	float: left; width: 50%; height: 100%;
	margin: 0; padding: 5px; 
	background-color: White;
	box-sizing: border-box;
	border-style: solid;
	border-color: Black;
	border-width: 0;
	border-left-width: 0;
	overflow-y: scroll;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-ms-user-select: none;
}
#right.hidden {
	display: none;
	width: 50%;
}

/* emphasis */
.emph {
	font-weight: bold;
	font-style: normal;
}