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

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

p,p *{
	font-family: Arial, Helvetica, sans-serif;
}

input{
	font-family: Arial, Helvetica, sans-serif;
}

button{
	cursor: pointer;
}

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

div,span {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently
						supported by Chrome and Opera */
  }

#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;
}

#classified-text{
	position: fixed;
	left: 50%;
	top: 50%;
	width: 500px;
	height: 100px;
	margin-top: -50px;
	margin-left: -250px;
	font-size: 50px;
	line-height: 100px;
	color: red;
	border: 4px solid red;
	border-radius: 5px;
	transform: rotate(25deg);
	text-align: center;
}

.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;
	margin-bottom: 50px;
}
.gun-btn-selected:hover{
	background-color: rgba(100,200,100,0.5);
	color: rgba(255,255,255,1);
}

.gun-wave-btn-inner-style{
	position: absolute;
	height: 25px;
	width: 75px;
	background-color: #666;
	opacity: 0.6;
	transition-duration: 0.5s;
}

.gun-btn-wave-option-selected>.gun-wave-btn-inner-style{
	background-color: #FFF;
}

.gun-wave-btn-inner-style-top{
	top: 0px;
	transform: skewX(45deg);
}

.gun-wave-btn-inner-style-bottom{
	bottom: 0px;
	transform: skewX(-45deg);
}

.gun-wave-btn-icon{
	position: absolute;
	height: 50px;
	width: 50px;
	left: 15px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 50%;

	color: white;
	font-size: 40px;
	line-height: 50px;
	text-align: center;
}

.gun-btn-wave-options{
	position: absolute;
	bottom: -50px;
	opacity: 0;
	transition-duration: 0.5s;
}

.gun-btn-wave-option{
	position: relative;
	height: 50px;
	cursor: pointer;
}

.gun-btn-selected + .gun-btn-wave-options{
	opacity: 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;
}

#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;
}

.big-btn{
	white-space: nowrap;
}

#above-play-btn{
	position: absolute;
	width: 300px;
	/*height: 200px;*/
	left: 50%;
	/*top: 50%;
	margin-top: 100px;*/
	margin-left: -150px;
}
#btn-login{
	display: inline-block;
	height: 42px;
	width: 42px;
	/*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;
}
#input-box-nickname{
	/*background-color: rgba(0,0,0,0.5);*/
	font-family: Arial, Helvetica, sans-serif;
	height: 36px;
	width: 300px;
	font-size: 36px;
	line-height:42px;
	vertical-align: top;
	color: black;
	padding-left: 10px;
}

#saucers-space-select-box{
	width: 352px;
	height: 48px;
	font-size: 16px;
	vertical-align: top;
}

#refresh-server-list-btn{
	height: 48px;
	width: 48px;
	background-image: url("../images/refresh.png");
	background-position: 50% 50%;
	background-size: contain;
}

#play-btn-container{
	position: absolute;
	top: 50%;
	height: 282px;
	margin-top: -121px;
	right: 0px;
	vertical-align: top;
}

.server-unavailable{
	background-color: #300;
	color: #888;
}
.server-available{
	background-color: #030;
	color: #AAA;
}

#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-autofullscreen-true{
	background-image: url("../images/autofullscreenon.png");
}

.btn-autofullscreen-false{
	background-image: url("../images/autofullscreenoff.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: 48px;
	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);
}

#btn-view-ship{
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: 270px;
	width: 64px;
	height: 64px;
	color: white;
	vertical-align: middle;
	line-height: 32px;
	text-align: center;
}

#btn-save-ship-image{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 200px;
	height: 32px;
	color: white;
	vertical-align: middle;
	line-height: 32px;
	text-align: center;
}

.bottom-link-button{
	display: inline-block;
	cursor: pointer;
	/*white-space: nowrap;*/
}

.bottom-link-button>div{
	position: relative;
	/*left: -5px;*/
	background-color: rgba(20,0,0,0.8);
	border: 2px solid rgba(255,0,0,1);
	border-bottom: 0;
	color: white;
	padding: 10px;
	/*padding-left: 20px;*/
	transition: 0.5s;
}
.bottom-link-button>div:hover{
	background-color: rgba(50,0,0,0.8);
	color: #FF5;
}

.bottom-link-button-normal{margin-left: -3px;}
.bottom-link-button-reversed{margin-right: -3px;}
.bottom-link-button-normal>div{border-left: 0;transform: skewX(10deg);}
.bottom-link-button-reversed>div{border-right: 0;transform: skewX(-10deg);}
.bottom-link-button-normal>div>div{transform: skewX(-10deg);}
.bottom-link-button-reversed>div>div{transform: skewX(10deg);}

#splash-tos{
	color: white;
}

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

.menu-validation-errors{
	color: #F33;
	width: 100%;
}

.login-text-input{
	width: 100%;
}

#nickname-preview{
	display: inline-block;
	vertical-align: top;
	padding-left: 10px;
	width: 500px;
	height: 42px;
	line-height: 42px;
	color: white;
	font-size: 24px;
}