@font-face{
	font-family: ProximaNova;
	src: url('/static/proximanova/ProximaNova-Regular.otf');}
@font-face{
	font-family: ProximaNovaLight;
	src: url('/static/proximanova/Proxima Nova Alt Light.otf');}
@font-face{
	font-family: ProximaNovaThin;
	src: url('/static/proximanova/Proxima Nova Thin.otf');}
@font-face{
	font-family: ProximaNovaBlack;
	src: url('/static/proximanova/Proxima Nova Black.otf');}
@font-face{
	font-family: ProximaNovaBold;
	src: url('/static/proximanova/Proxima Nova Bold.otf');}


@font-face{
	font-family: Baloo2;
	src: url('/static/Baloo_2/Baloo2-Regular.ttf');}
@font-face{
	font-family: Baloo2Medium;
	src: url('/static/Baloo_2/Baloo2-Medium.ttf');}
@font-face{
	font-family: Baloo2Bold;
	src: url('/static/Baloo_2/Baloo2-Bold.ttf');}

/*
:root,::before,::after{
	--menu-text: "nothing";
}
*/

*{
	/*font-family: BazoukSSK;*/
	font-family: ProximaNova;
	/*letter-spacing: 1px;*/}
html{
	padding: 0px;
	margin: 0px;
	/*width: 100vw;*/
	min-height: 100vh;
	overflow-x: hidden;
/*
	overflow-y: hidden;
	scroll-behavior: smooth;
*/}
body{
	background-color: #000;
	margin: 0px;
	padding: 0px;
	color: #DDD;
	/*background-attachment: fixed;
	background-size:cover;
	background-position: center;*/
	width: 100%;
	min-height: 100vh;
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
	z-index: -10000;
	overflow-x: hidden;
	overflow-y: auto;
	text-align: center;
	font-family: BazoukSSK;
	position: relative;
/*
	scroll-behavior: smooth;
*/
	}

body>*{
	z-index: 0;}
/* this fixes firefox's stupid autofill input tint */
input {
  filter: none;}



a,a:visited{
	text-decoration: none;
	color: #DDD;}


button,.navbutton,input[type=submit],.button,.smallbutton{
	background: none;
	background-color: none;
	border: none;
	padding: 5px;
	margin: 3px;
	padding-top:6px;
	display: inline-block;
	white-space: nowrap;
	color: #DDD;
	cursor: pointer;}
button,input[type=submit],.button{
	font-size: 120%;
	padding: 5px 15px;}
button:active,.button:active,.smallbutton:active{
	transform: scale(0.85);}

input[type=text],input[type=password],select,.fakeTextInput{
	color: #DDD;
	background: none;
	background-color: none;
	border: none;
	border-bottom: 2px solid #AAA;
	padding: 4px;
	box-sizing: content-box;}
textarea{
	padding: 6px;
	box-sizing: content-box;
	border: none;
	/*background: rgba(255,255,255,0.3);*/
	background: #000;
	color: #DDD;
	border: #AAA 1px solid;}
textarea:focus{
	border: #DDD 3px solid;}

input:disabled,textarea:disabled,button:disabled,select:disabled,.smallbutton:disabled{
	opacity: 0.5;
	user-select: none;
	pointer-events: none;}



/* artificial tables */
.table {
	display: table;}
.table > div {
	display: table-row}
.table > div > div{
	display: table-cell;
	padding: 1px;}
	
.monotable, .monotable > div, .monotable > div > div{
	font-family: ShareTechMono}
	

/* this sits under dialogs and menus so that we can click them away */
.dialogcover{
	position:fixed;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
	z-index: 9000;
	display: none;}
	

.mobileonly{
	display:none;}
.desktoponly{
	display:unset;}
/*
@media screen and (max-aspect-ratio: 13/9), (max-width: 1000px){
*/
@media screen and (max-aspect-ratio: 4/3), (max-width: 1000px){
	.mobileonly{
		display:unset;}
	.desktoponly{
		display:none;}}



.noselect{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.clickthrough{
	pointer-events: none;}



/* artificial tables */
.table {
	display: table;}
.table > div {
	display: table-row}
.table > div > div{
	display: table-cell;
	padding: 1px;}
	
.monotable, .monotable > div, .monotable > div > div{
	font-family: ShareTechMono}


.ac{
	text-align: center;
	width: 100%;
	display: block;}





/* plugins */

.plugincont{
	margin: 5px;}



/*
.zonicon{
	width: 1em;
	height: 1em;
	fill: #DDD;}
*/





.navslider{
	position: absolute;
	/*background: #111;*/
	/*border-radius: 5px;*/
	border-bottom: 2px solid #DDD;
	/*/z-index: -10;*/
	pointer-events: none;
	}


/* for use in empty place holder pages */
.constructionfiller{
	display: inline-block;
	padding: 1em;
	box-sizing: border-box;
	box-shadow: 0px 0px 33px #000;
	border: 2px solid #000;}
@media screen and (max-aspect-ratio: 4/3){
	.constructionfiller{
		box-shadow: none;}}



.backcatch{
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0px;
	left: 0px;
	/*background: rgba(255,0,0,0.2);*/
	z-index: 10000;}

.menucont{
	position: fixed;
	width: 180px;
	/*background: #111;*/
	background: #333;
	padding: 8px 0px;
	/*border: 2px #000 solid;*/
	border: 2px #555 solid;
	borderRadius: 3px;
	text-align: left;
	transform: rotate3d(0.2,-0.2,0,50deg) scale(0.85);
	transform-origin: left top 0px;
	transition: transform 0.065s linear;}
.menucont-before{
	width: 15px;
	height: 15px;
	position: absolute;
	left: -7px;
	top: -7px;
	background: #333;
	border: 2px #555 solid;
	text-align: center;
	/*padding-bottom: 3px;*/
	font-size: smaller;
	color: #999;}
/*
.menucont::before{
	width: 15px;
	height: 15px;
	position: absolute;
	left: -7px;
	top: -7px;
	background: #333;
	border: 2px #555 solid;
	content: var(--menu-text);}
*/
.menuarrow{
	float: right;
	font-size: 90%;}
.menuItem{
	padding: 4px;
	padding-left: 20px;
	cursor: pointer;}

@media screen and (max-aspect-ratio: 4/3), (max-width: 1000px){
	.menuItem{
		padding: 8px;
		padding-left: 20px;
		cursor: pointer;}
	.menucont{
		font-size: 150%;
		overflow-y: auto;
		max-height: 100vh;}}
.menuItem:hover{
	background: #555;
	/*text-decoration: underline;*/}





.topbar{
	width: 100%;
	min-height: 2em;
	text-align:left;
	display: flex;
	padding: 0px 7px;
	box-sizing: border-box;
	flex-wrap: wrap;
	/*background: #111;*/
	/*background: linear-gradient(#111, rgba(0,0,0,0));*/
	/*background: linear-gradient(#111, #000);*/
	background: url('/static/noise.png');
	border-radius: 5px;
	margin-bottom: 3px;}
	
@media screen and (max-aspect-ratio: 4/3){
	.topbar{
		padding: 0px;
		padding-top: 10px;
		padding-bottom: 5px;
		background: #000;
		border-top: solid 1px #111;
		border-radius: 0px;}}
.topbar>.typcn{
	padding:0px 7px;
	margin-top: -1px;
	font-size: xx-large;
	cursor: pointer;}
.topbar>.zi{
	padding:0px 7px;
	padding-top: 7px;
	font-size: x-large;
	cursor: pointer;}
/*
.topbar>.typcn,.topbar>.zi{
	transition: transform 0.1s ease;}
*/
.topbar>.typcn:active,.topbar>.zi:active{
	transform: scale(0.8);}

.topbarMenuButton{
	padding: 10px;
	cursor: pointer;
	user-select: none;}

.topbarMenu{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 180px;
	background: #222;
	border: 2px #555 solid;
	border-radius: 2px;}

.topbarMenuMobile{
	top: 0px!important;
	left: 0px!important;
	width: 94vw;
	height: 94vh;
	margin: 1.5vw 1.5vh;
	overflow: auto;}

.topbarMenuMobile>.topbarMenuItem{
	font-size: 200%;}

.topbarMenuItem{
	padding: 4px;
	padding-left: 20px;
	cursor: pointer;
	text-Align: left;
	user-select: none;}
.topbarMenuItem:hover{
	background: #555;}


select{
	margin: 5px;
	/*padding: 4px;
	box-sizing: border-box;
	color: #DDD;
	border: none;
	border-bottom: 2px solid #AAA;*/
	padding-right: 2em;
	background: none;
	appearance: none;
	background: url("/static/downarrow.png");
	background-size: 0.65em;
	background-position-y: center;
	background-position-x: calc(100% - 10px);
	background-repeat: no-repeat;}
select:hover,select:checked{
	background: url("/static/downarrow_selected.png");
	background-size: 0.65em;
	background-position-y: center;
	background-position-x: calc(100% - 10px);
	background-repeat: no-repeat;}

option{
	color: #DDD;
	background-color: #111;}


.bdialogblocker{
	display: flex;
	align-items: center;
	justify-content: center;}
.bdialog{
	min-width: 350px;
	border: 2px solid black;
	position: relative;
	display: inline-block;
	}

.contextareacap{
	/*background: rgba(0,0,0,0.01);*/
	position: absolute;
	top: -10px;
	left: -185px;
	height: 40px;
	width: 185px;}