@font-face {
	font-family: Ethnocentric;
	src: url(../fonts/ethnocentric.ttf) format("truetype");
}

*{
	font-family: Ethnocentric, Arial, Helvetica, sans-serif;
	user-select: none;
}

body{
	overflow:hidden;
	background-color: black;
	padding: 0;
	margin: 0;
}

#fancy-loading-bar{
	font-size: 60px;
	height: 80px;
	line-height: 80px;
	width: 100%;
	text-align: center;
	white-space: nowrap;
}
#load-complete{
	color: salmon;
}
#load-pending{
	color: rosybrown;
}
#fish-eye{
	color: royalblue;
}

.gun-btn{
	background-color: rgba(50,50,50,0.5);
	margin: 4px;
	cursor: pointer;
	color: rgba(255,255,255,0.5);
	padding-left: 20px;
	width: 400px;
	transition-duration: 0.5s;
}
.gun-btn:hover{
	background-color: rgba(150,150,170,0.5);
	color: rgba(255,255,255,0.8);
}
.gun-btn-selected{
	background-color: rgba(50,150,50,0.5);
	color: rgba(255,255,255,0.8);
	width: 440px;
}
.gun-btn-selected:hover{
	background-color: rgba(100,200,100,0.5);
	color: rgba(255,255,255,1);
}

.slider {
	-webkit-appearance: none;
	appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 5px;   
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

#shieldspeedslider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    height: 100px;
    border-radius: 50%; 
	background: rgba(50,150,50);
	border: 1px solid rgba(0,255,255,0.5);
	cursor: pointer;
}

#shieldspeedslider::-moz-range-thumb {
    width: 100px;
    height: 100px;
    border-radius: 50%;
	background: rgba(50,150,50);
	border: 1px solid rgba(0,255,255,0.5);
	cursor: pointer;
}

#colorslider{
	display:block;
	width: 400px;
	opacity: 1;
	height:15px;
	line-height: 40px;
	/*margin-top: 15px;*/
	margin-bottom: 29px;
	/*position: absolute;
	top: 20%;
	left: 50%;
	margin-left: -200px;*/
}

#colorslider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    border-radius: 50%; 
	background: rgba(150,150,150);
	border: 1px solid white;
	cursor: pointer;
}

#colorslider::-moz-range-thumb {
    width: 30px;
    height: 30px;
    border-radius: 50%;
	background: rgba(150,150,150);
	border: 1px solid white;
	cursor: pointer;
}

#play-btn-container{
	position: absolute;
	top: 50%;
	height: 282px;
	margin-top: -121px;
	right: 0px;
}
#btn-login{
	display: inline-block;
	height: 42px;
	width: 42px;
	background-image: url("../images/Logged_Out.png");
	background-color: rgba(255,0,0,0.2);
}
#input-nickname{
	/*background-color: rgba(0,0,0,0.5);*/
	height: 42px;
	width: 358px;
	font-size: 36px;
	line-height:42px;
	vertical-align: top;
	color: rgb(200,200,200);
	padding-left: 10px;
}
.big-btn{
	/*height: 42px;*/
	display: block;
	height: 200px;
	width: 400px;
	line-height: 200px;
	font-size: 100px;
	border-radius: 5px;
	color: white;
	background-color: rgba(100,150,255,0.5);
	transition-duration: 0.2s;
	cursor: pointer;
}

.big-btn:hover{
	background-color: rgba(200,240,255,0.8);
}

#btn-spawn{
	width: 600px;
}

#config-bottom-container{
	position: absolute;
	height: 64px;
	bottom: 0px;
	right: 0px;
	white-space: nowrap;
	
}
#config-bottom-container > .cfgbtn{
	display: inline-block;
	width: 64px;
	height: 64px;
	vertical-align: top;
}

.cfgbtn{
	position: relative;
	background-color: rgba(0,255,0,0.1);
	border: 1px solid rgba(0,255,0,0.4);
	background-position: 50% 50%;
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
	transition-duration: 0.5s;
}
.cfgbtn:hover{
	background-color: rgba(0,255,0,0.4);
	border: 1px solid rgba(0,255,0,1);
}

.btn-mute-mute{
	background-image: url("../images/Sound_Off.png");
}
.btn-mute-snd{
	background-image: url("../images/Sound_On.png");
}

#btn-graphics{
	background-image: url("../images/Graphics.png");
	/*padding-top: -16px;*/
	/*padding-bottom: 16px;*/
	text-align: center;
	vertical-align: top;
	color: white;
}
#btn-graphics>.cfbtn-abbreviation{
	line-height: 50px;
	height: 50px;
}

#btn-keyboard-layout{
	background-image: url("../images/Keyboard_Input.png");
	position: relative;
}

.cfgbtn>.cfbtn-indicator{
	position: absolute;
	opacity: 0;
	top: -2px;
	left: 0;
	height: 0px;
	font-size: 12px;
	color: white;
	background-color: rgba(255,0,0,0.3);
	border: 1px solid rgba(255,0,0,0.6);
	border-bottom: 0px;
	transition-duration: 0.1s;
}

.cfgbtn:hover>.cfbtn-indicator{
	opacity: 1;
	top: -18px;
	height: 16px;
}

#press-start-to-play-screen{
	background-color: rgba(0,0,0,0.6);
}

#btn-play-splash{
	background-color: rgba(0,255,0,0.4);
	border: 1px solid rgba(0,255,0,0.7);
	color: white;
	font-size: 72px;
	cursor: pointer;
	transition-duration: 0.1s;
}
#btn-play-splash:hover{
	background-color: rgba(0,255,0,0.8);
	border: 1px solid rgba(0,255,0,1);
}

#btn-playmute-splash{
	background-color: rgba(200,255,0,0.4);
	border: 1px solid rgba(200,255,0,0.7);
	color: white;
	font-size: 28px;
	cursor: pointer;
	transition-duration: 0.1s;
}
#btn-playmute-splash:hover{
	background-color: rgba(200,255,0,0.8);
	border: 1px solid rgba(200,255,0,1);
}

#splash-tos{
	color: white;
}

#splash-container{
	position: absolute;
	top: 100px;
	left: 50%;
	width: 1000px;
	margin-left: -500px;
	text-align: center;
}

#chat-messages{
	list-style-type: none;
	position: absolute;
	bottom: 0;
	padding-left: 0;
}
.chat-msg{
	color: white;
	font-family: Arial, Helvetica, sans-serif;
	width: 100%;
}