html, body {
    overflow: hidden;
}

body {
    position: absolute;
    background: #333;
    width: 100%;
	height: 100%;
    margin: 0;
	cursor: crosshair;
}
canvas {
    background: #000;
	position: fixed;
	top:0;
	left:0;
	width:1920px;
	height:1080px;
}
.gui table{
	background: #5559;
	border-radius: 5px;
	padding: 2px;
	margin: 0;
}
.gui table caption{
	background: #5555;
	width: 280px;
	padding: 3px;
	margin-top: 2px;
}
.gui{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 280px;
	z-index: 1000;
  	color: #fffa;
  	transform: scale(1.0);
  	transform-origin: top left;
}
#guiContent {
  display: block;
}

#guiContent.hide{
  display: none;
}
.toggles{
	background: #0007;
	color: white;
	border: solid 2px #fff3;
	border-radius: 5px;
	padding: 4px 6px;
	min-width: 1.5em;
	min-height: 1.5em;
}
.toggles:hover{
	border: solid 2px #fffa;
}
.toggles:focus {
    outline: none;
}
.no-select{
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently */
}
.clickable{
	color: #fffa;
	-webkit-transition: .2s;
	transition: color .2s;
}
.clickable:focus {
    outline: none;
}
.clickable:hover{
	color:#ffff;
}
.sub-gui{
	display: block;
}
.sub-gui.hide{
	display: none;
}
#buttonHide{
	display: block;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	 -khtml-user-select: none; /* Konqueror HTML */
	   -moz-user-select: none; /* Old versions of Firefox */
	    -ms-user-select: none; /* Internet Explorer/Edge */
	        user-select: none; /* Non-prefixed version, currently */
	position: absolute;
	top: 2px;
	right: 2px;
	font-size: 2em;
	color: #fffa;
	padding: 0 0 5px 0;
	margin: 0;
	z-index: 1100;
	-webkit-transition: .2s;
	transition: color 0.2s;
}
#buttonHide:hover {
	color: #ffff;
}
#buttonHide.hide{
	display: none;
}
#gui-settings{
	background: #5559;
	position: absolute;
	top: 0;
	right: 50px;
	width: 200px;
}
#gui-settings table{
	background: #5559;
	position: absolute;
	top: 32px;
	right: 0;
	width: 200px;
}
#gui-settings caption{
	color: #fffa;
	background: #5555;
	padding: 4px;
	margin-top: 4px;
}
#swatches{
	position: relative;
	float: right;
}
#buttonCol0{
	width: 28px;
	height: 28px;
	background: #f0fa;
}
#buttonCol1{
	width: 28px;
	height: 28px;
	background: #ff0a;
}
#buttonCol2{
	width: 28px;
	height: 28px;
	background: #0ffa;
}
#color-buttons{
	float: left;
}
#colorRect{
	background: #000;
	width: 40px;
	border-radius: 5px;
}
#txtrRect{
	background: transparent;
	border: solid 2px #fff7;
	border-radius: 5px;
	padding: 0;
}
#lightRect{
	background: transparent;
	width:70px;
	height:70px;
	border: solid 2px #fff7;
	border-radius: 5px;
	padding: 0;
}
#fluid-gui{
	width:280px;
}
#customize-keys{
  	display: none;
	position: absolute;
	top:10px;
	left:300px;
	width: 300px;
	height: 700px;
	background: #fffa;
	border: solid 2px #fff7;
	border-radius: 5px;
	color:black;
	font-size: 1em;
}
#customize-keys.show{
  	display: block;
}
#customize-keys table{
	border-radius: 0;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}
#customize-keys caption{
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	width: 294px;
}
#customize-keys tbody{
	display: block;
	width: 290px;
	height: 667px;
	overflow-y: scroll;
}

#customize-keys tr{
	width: 100%;
}
#customize-keys td{
	width: 100%;
}
#customize-keys .hotkey{
	text-align: right;
}

#context-menu{
	display: none;
	position: absolute;
	top:500px;
	left:500px;
	background: #000B;
	color: #fffa;
}

.slidecontainer {
  width: 100%;
}
.slider {
	-webkit-appearance: none;
	width: 95%;
	height: 20px;
	border-radius: 5px;
	background: #0005;
	outline: none;
	-webkit-transition: .2s;
	transition: background .2s;
}

.slider:hover {
	background: #088a;
}

.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 15px;
	height: 25px;
	border-radius: 5px;
	background: #fffa;
	cursor: pointer;
}

.slider::-moz-range-thumb {
	width: 15px;
	height: 25px;
	border-radius: 5px;
	background: #fffa;
	cursor: pointer;
}
#rgbSliders{
	display: block;
}
#rgbSliders.hide{
	display: none;
}
#sliderR{
	background: linear-gradient(to right, #8000, #800f 100%);
}
#sliderG{
	background: linear-gradient(to right, #0800, #080f 100%);
}
#sliderB{
	background: linear-gradient(to right, #0080, #008f 100%);
}
#sliderR:hover {
	background: linear-gradient(to right, #8000, #f00e 100%);
}
#sliderG:hover {
	background: linear-gradient(to right, #8000, #0f0e 100%);
}
#sliderB:hover {
	background: linear-gradient(to right, #8000, #00fe 100%);
}
#hslSliders{
	display: none;
}
#hslSliders.show{
	display: block;
}
#sliderRandomSpeed{
	width: 50px;
	transform: translateY(5px);
}
#sliderRandomStrength{
	transform: translateY(3px);
}

#sliderH{
  background-image: linear-gradient(to right, 
  rgba(255,0,0,1) 0%, 
  rgba(255,255,0,1)16.67%, 
  rgba(0,255,0,1) 33.33%, 
  rgba(0,255,255,1) 50%, 
  rgba(0,0,255,1) 66.66%, 
  rgba(255,0,255,1) 83.33%, 
  rgba(255,0,0,1) 100%);
}
#sliderS{
	background: linear-gradient(to right, #0800, #080f 100%);
}
#sliderL{
  background-image: linear-gradient(to right, 
  rgba(0,0,0,1) 0%, 
  rgba(255,255,255,1) 100%);
}
#sliderH:hover {
  background-image: linear-gradient(to right, 
  rgba(255,0,0,1) 0%, 
  rgba(255,255,0,1)16.67%, 
  rgba(0,255,0,1) 33.33%, 
  rgba(0,255,255,1) 50%, 
  rgba(0,0,255,1) 66.66%, 
  rgba(255,0,255,1) 83.33%, 
  rgba(255,0,0,1) 100%);
}
#sliderS:hover {
	background: linear-gradient(to right, #8000, #0f0e 100%);
}
#sliderL:hover {
  background-image: linear-gradient(to right, 
  rgba(0,0,0,1) 0%, 
  rgba(255,255,255,1) 100%);
}
#info-text{
	position: absolute;
	display: block;
	top:20px; 
	right:300px;
	color:white;
	background:#000a;
	width:auto;
	z-index: 100;
	pointer-events: none;
}