*
{
	box-sizing:border-box;
    background-color:transparent;
	padding:0;
	margin:0;
	scrollbar-color:rgba(255, 255, 255, 0.1) transparent;
	scrollbar-width:thin;
	image-rendering:optimizespeed;
    font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size:14px;
    font-weight:400;
    line-height:1.2;
    color:#e0e0e0;
}

html
{
	overflow: hidden; 
}

body
{
	cursor:url("/pics/cursor_default.png"), auto;
	background-color:#000000;
	overflow: hidden;
	width:100vw;
	height:100vh;
}

#topbar
{
	width:100%;
	height:32px;
}

#search
{
	display:block;
	margin:auto;
	width:400px;
	height:32px;
	padding:4px;
	border: none;
	border-bottom: rgba(255, 255, 255, 0.5) 1px solid;
	outline: none;
}

#main
{
	overflow: hidden;
	width:100%;
	height:100%;
}

.b
{
	display:block;
	position:absolute;
	top:0px;
	left:0px;
    background-color:rgba(16, 16, 16, 0.9);
	max-width: 600px;
	min-height: 200px;
	text-align: justify;
	border-right: rgba(27, 134, 81, 1.0) 2px solid;
	/*border-right: rgba(194, 16, 16, 1.0) 2px solid;*/
}

.b.x-1 { max-width: 300px; }
.b.x-2 { max-width: 450px; }
.b.x-3 { max-width: 600px; }
.b.x-4 { max-width: 800px; }
.b.x-5 { max-width: 1200px; }

.b.y-1 > .content { max-height: 200px; }
.b.y-2 > .content { max-height: 300px; }
.b.y-3 > .content { max-height: 400px; }
.b.y-4 > .content { max-height: 640px; }
.b.y-5 > .content { max-height: 800px; }

.content
{
	display:block;
	position: relative;
	min-height:200px;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 8px;
	max-height: 400px;
	background-repeat: no-repeat;
	background-position: center;
}

.title
{
	height:24px;
	max-width:200px;
	position:absolute;
	transform:rotate(-90deg) translate(-100%, -100%);
	transform-origin:0% 0%;
	padding:4px;
	padding-bottom:0px;
	font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
	/*background-color:rgba(27, 134, 81, 1.0);*/
	border-bottom: 24px solid rgba(27, 134, 81, 1.0);
    border-left: 24px solid transparent;
}

.handle
{
	position:absolute;
	top:0px;
	right:100%;
	margin:0px;
	padding:0px;
	width:24px;
	height:100%;
	background-color:rgba(27, 134, 81, 1.0);
	cursor:url("/pics/cursor_grab.png"), auto;
	overflow:visible;
}

.grabbed .handle
{
	cursor:url("/pics/cursor_grabbed.png"), auto;
}

a:link, a:visited
{
	cursor:url("/pics/cursor_hand.png"), auto;
	text-decoration:none;
	font-weight:600;
	color:rgb(39, 192, 115);
}

ul
{
	padding-left:16px;
	list-style-type:square;
}

.bgimage
{
	position:absolute;
	left:0px;
	top:0px;
	z-index:-1;
	opacity:0.2;
}

.close_button
{
	cursor:url("/pics/cursor_hand.png"), auto;
	width:24px; 
	height:40px;
	position:absolute;
	left:0px;
	bottom:0px;
	background-color: rgba(194, 16, 16, 1.0);
	background-image: url(/pics/cross.png);
	background-position: center;
	background-repeat: no-repeat;
	/*background-color: rgba(255, 255, 255, 0.9);*/
	/*mask-image: url(/pics/cross_inv.png);*/
	/*mask-position: center;*/
	/*mask-repeat: no-repeat;*/
}

.rlogo, .rlogo2
{
	position:fixed;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
	z-index:-1000;
	perspective: 768px;
	perspective-origin: 50% 50%;
}

.rlogo > div
{
	animation: rotateY2 10s linear infinite;
	backface-visibility: hidden;
}

.rlogo2 > div
{
	animation: rotateY3 10s linear infinite;
	backface-visibility: hidden;
} 

@keyframes rotateY { 
	from 
	{
		transform: rotate3d(1, -1, 0, 0turn);
	}
	to 
	{
		transform: rotate3d(1, -1, 0, 1turn);
	}
}

@keyframes rotateY2 {
	from 
	{
		transform: rotate3d(0, -1, 0, 0turn);
	}
	to 
	{
		transform: rotate3d(0, -1, 0, 1turn);
	}
}

@keyframes rotateY3 {
	from 
	{
		transform: rotate3d(0, -1, 0, 0.5turn);
	}
	to 
	{
		transform: rotate3d(0, -1, 0, 1.5turn);
	}
}