body
{
	background-color: black;
}
canvas
{
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 5;
}
div
{
	background-color: rgb(88, 88, 88);
	/*z-index: 1;*/
	color: white;
	font-family: sans-serif;
	position: absolute;
}
#topGUI
{
	left: 25%;
	top: -100%;
	width: 50%;
	display: none;
}
#botGUI
{
	left: 25%;
	bottom: -100%;
	width: 50%;
	height: 11%;
	display: none;
}
#Query
{
	left: 10%;
	width: 80%;
	text-align: center;
	position: absolute;
	bottom: 51%;
	font-size: 150%;
}
#botMove
{
	z-index: 1;
	position: absolute;
	top: 98%;
	left: 48%;
	width: 4%;
	height: 20px;
}
#topMove
{
	z-index: 1;
	position: absolute;
	top: 0%;
	left: 48%;
	width: 4%;
}
#AtomInfo
{
	text-align: center;
	left: 10%;
	width: 80%;
	position: absolute;
	top: 51%;
	font-size: 135%;
}
#AtomInfoLeft
{
	text-align: left;
	position: relative;
	top: 10%;
}
#AtomInfoRight
{
	text-align: right;
	position: relative;
	right: -100%;
	top: -10%;
}
#loadIndicator
{
	position: absolute;
	bottom: 0%;
	left: 0%;
	width: 100px;
	height: 100px;
	z-index: -5;
}
/*All test css for a more usable GUI*/
#selectHolder
{
	position: absolute;
	top: 44%;
	width: 100%;
	left: 17%;
	font-size: 130%;
}
#toggles
{
	position: absolute;
	left: 17%;
	top: 60%;
}
#loading
{
	position: absolute;
	top: 55%;
	left: 17%;
	
}
#selectHolder select
{
	font-size: 50%;
}
#files
{
	position: absolute;
	top: 90%;
	width: 100%;
	left: 17%;
	font-size: 230%;
}
:root
{
	--test-width: 384px;
}

#test
{
	display: inline;
	position: absolute;
	z-index: 6;
	width: 384px;
	height: 100%;
	bottom: 0px;
	left: 0px;
	background-color: rgba(113,113,113, 0.7);
	opacity: 0.7;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}
#rightTest
{
	display: inline;
	position: absolute;
	z-index: 6;
	width: 384px;
	height: 100%;
	bottom: 0px;
	left: 0px;
	background-color: rgba(113,113,113, 0.7);
	opacity: 0.7;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}
#menuButton
{
	z-index: 7;
	position: absolute;
	top: 1%;
	left: 0.5%;
	padding: 16px;
	font-size: 130%;
}
#infoButton
{
	z-index: 7;
	position: absolute;
	top: 1%;
	left: 0.5%;
	padding: 16px;
	font-size: 130%;
}
#buttonContainer
{
	width: 230px;
	
}
.hide
{
	-webkit-animation: collapseMenu 1s; /* Chrome, Safari, Opera */
	animation: collapseMenu 1s;
}
.show
{
	-webkit-animation: showMenu 1s; /* Chrome, Safari, Opera */
	animation: showMenu 1s;
}
.hideInfo
{
	/*-webkit-animation: collapseInfo 1s; /* Chrome, Safari, Opera */
	/*animation: collapseInfo 1s;*/
	-webkit-animation: collapseMenu 1s; /* Chrome, Safari, Opera */
	animation: collapseMenu 1s;
}
.showInfo
{
	/* -webkit-animation: showInfo 1s; /* Chrome, Safari, Opera */
	/* animation: showInfo 1s;*/
	-webkit-animation: showMenu 1s; /* Chrome, Safari, Opera */
	animation: showMenu 1s;
}
.open
{
	
}
@viewport
{
	zoom: 1.0;
	width: extend-to-zoom;
}




/* Chrome, Safari, Opera */
@-webkit-keyframes collapseMenu
{
	0%
	{
		left: 0px;
	}
	100%
	{
		left: -384px;
	}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes showMenu
{
	100%
	{
		left: 0px;
	}
	0%
	{
		left: -384px;
	}
}

@keyframes collapseMenu
{
	0%
	{
		left: 0px;
	}
	100%
	{
		left: -384px;
	}
}

 /*Chrome, Safari, Opera */
@keyframes showMenu
{
	100%
	{
		left: 0px;
	}
	0%
	{
		left: -384px;
	}
}