*{
	_noFocusLine: expression(this.hideFocus=true);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout:none;
}
::-moz-focus-inner{border:0;}
:focus{outline:none;}
html{
	font-family: Verdana, Arial, sans-serif;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	overflow: hidden;
	display: block;
	background: #000;
}
input{
	cursor: text;
	background: #059;
}
body{
	font-family: Verdana, Arial, sans-serif;
	font-size: 1.5em;
	position: absolute;
	opacity: 0;
	background: #000;
	overflow: hidden;
}
header{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	font-size: 1.375em;
	padding: .25em .5em;
	word-spacing: .05em;
}
#mainWrap{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
a{
	color: #8bf;
}
.fwFont{
	color: #aef;
}
audio{
	display: none;
}
h1,h2{
	font-size: 1.25em;
	color:#fff;
	margin:0;
	padding:0;
}
.header{
	font-family: Cinzel, Palatino Linotype, serif;
	letter-spacing: .2em;
	color: #aef;
    background: -webkit-radial-gradient(center center, farthest-side, rgba(32,64,124,.5) 0%, rgba(0,0,0,.1) 100%);
    background: -moz-radial-gradient(center center, farthest-side, rgba(32,64,124,.5) 0%, rgba(0,0,0,.1) 100%);
    background: -ms-radial-gradient(center center, farthest-side, rgba(32,64,124,.5) 0%, rgba(0,0,0,.1) 100%);
    background: -o-radial-gradient(center center, farthest-side, rgba(32,64,124,.5) 0%, rgba(0,0,0,.1) 100%);
}
a:hover{
	color: #8bf;
	text-decoration: none;
}
/* common helpers */
.crystalIcon{
	background:url('/images1/currency.png') 100% 0 / 200% 100%;
	width:30px;
	height:30px;
}
.accountDetails{
	height:30px;
	float:left;
	margin-right:12px;
}
.accountValues{
	float:left;
	height:30px;
	line-height:30px;
	text-indent:5px;
}
#crystals{
	width:16px;
	height:16px;
	display: inline-block;
}
.accountValueText{
	line-height:32px;
	margin: 0 2px;
}
.accountValueText2{
	float:left;
	line-height:32px;
}
.modePanel{
	float:right;
	line-height:32px;
	padding-right:16px;
}
.fancyhr{
	border: 0; 
	height: 1px; 
	margin: 1% 0;
	background-image: -webkit-linear-gradient(
		left, 
		rgba(16,64,176,.4), 
		rgba(32,128,232,1), 
		rgba(16,64,176,.4)
	); 
	background-image: -moz-linear-gradient(
		left, 
		rgba(16,64,176,.4), 
		rgba(32,128,232,1), 
		rgba(16,64,176,.4)
	); 
	background-image: -ms-linear-gradient(
		left, 
		rgba(16,64,176,.4), 
		rgba(32,128,232,1), 
		rgba(16,64,176,.4)
	); 
	background-image: -o-linear-gradient(
		left, 
		rgba(16,64,176,.4), 
		rgba(32,128,232,1), 
		rgba(16,64,176,.4)
	); 
}
.shadow1{
	text-shadow:
		1px 1px #000,
		-.4px .6px #000,
		.6px -.6px #000,
		-.4px 0 #000,
		.6px 0 #000,
		0 .6px #000,
		0 -.6px #000,
		.6px .6px #000;
}
.shadow2{
	text-shadow:
		.6px .6px #000,
		-.4px .6px #000,
		.6px -.6px #000,
		-.4px 0 #000,
		.6px 0 #000,
		0 .6px #000,
		0 -.6px #000,
		0 0 5px #000,
		0 0 10px #000,
		0 0 20px #000;
}
.shadow3{
	text-shadow:
		.6px .6px #000,
		-.4px .6px #000,
		-.4px 0 #000,
		.6px 0 #000,
		0 .6px #000,
		0 -.6px #000,
		0px 0px 5px #000,
		0px 0px 2px #000;
}
.shadow4{
	text-shadow:
		1px 1px #000,
		-1px 0 #000,
		1px 0 #000,
		-1px 1px #000,
		1px -1px #000,
		-1px -1px #000;
}
/* logo */
#firmamentWarsLogoWrap{
	background: #000;
	width: 100%;
	height: 100%;
}
#firmamentWarsStars1{
	opacity: .25;
}
#firmamentWarsStars2{
	opacity: .6;
}
#firmamentWarsStars3{
	opacity: .85;
}
.titleBG{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}
.titleStars{
	background: url('../images/title/firmamentWarsTitle_stars.png');
	background-size: 800px 800px;
	width: 100%;
	height: 100%;
}
.fwHidden, #titleMain{
	visibility: hidden;
	opacity: 0;
}
#titleGlobe{
	top: auto;
	bottom: -15%;
	width: 100%;
}
#firmamentWarsLogo{
	left: 0;
	right: 0;
	margin: 0 auto;
	top: 0%;
	width: 100%;
	max-width: 1400px;
}
/* Firmament Wars */
#gameWrap{
	visibility: hidden;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
}
.fw-text{
	color: #bef;
	text-shadow: .5px .5px #357, 1px 1px #357, 1.5px 1.5px #357, 2px 2px #357;
}
.no-select{
	-khtml-user-select: none;
	-o-user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}
#chat-content{
	vertical-align:bottom;
	padding: 2%;
}
#chat-ui{
	font-family: Verdana, Arial, sans-serif;
	display: table;
	table-layout:fixed;
	position: absolute;
	bottom: 5%;
	left: .5%;
	width: 50%;
	padding: 1%;
	z-index: 9999;
	font-size: 1em;
	vertical-align: bottom;
	pointer-events: none;
}
#logout, #login{
	font-size: .75em;
}
.uppercase{
	text-transform: uppercase;
}
.chat-img{
	max-width: 40%;
	display: block;
}
.chat-manpower{
	color: #ffff00;
	text-shadow: .5px .5px #520, 1px 1px #520, 1.5px 1.5px #520, 2px 2px #520;
}
.chat-hidden{
	font-family: Consolas, monospace;
	color: #000000;
	background: #000000;
	text-shadow: none;
	pointer-events: auto;
}
.chat-hidden:hover{
	color: #fff;
	pointer-events: auto;
}
.chat-alert{
	color: #ff0000;
	text-shadow: .5px .5px #500, 1px 1px #500, 1.5px 1.5px #500, 2px 2px #500;
}
.chat-warning{
	color: #ffff1a;
	text-shadow: .5px .5px #550, 1px 1px #550, 1.5px 1.5px #550, 2px 2px #550;
}
.chat-danger{
	color: #ff1a1a;
	text-shadow: .5px .5px #500, 1px 1px #500, 1.5px 1.5px #500, 2px 2px #500;
}
.chat-moves{
	color: #dd6600;
	text-shadow: .5px .5px #420, 1px 1px #420, 1.5px 1.5px #420, 2px 2px #420;
}
.chat-production{
	color: #33e5e5;
	text-shadow: .5px .5px #044, 1px 1px #044, 1.5px 1.5px #044, 2px 2px #044;
}
.chat-food{
	color: #8d0;
	text-shadow: .5px .5px #150, 1px 1px #150, 1.5px 1.5px #150, 2px 2px #150;
}
.chat-culture{
	color: #d2d;
	text-shadow: .5px .5px #515, 1px 1px #515, 1.5px 1.5px #515, 2px 2px #515;
}
.chat-arrow{
	color: #1e1;
	text-shadow: .5px .5px #050, 1px 1px #050, 1.5px 1.5px #050, 2px 2px #050;
}
.chat-whisper{
	color: #c8f;
	text-shadow: .5px .5px #326, 1px 1px #326, 1.5px 1.5px #326, 2px 2px #326;
}
.chat-white{
	color: #fff;
	text-shadow: .5px .5px #444, 1px 1px #444, 1.5px 1.5px #444, 2px 2px #444;
}
#titleMenu{
	position: absolute;
	top: 7%;
	right: 0%;
	width: 45%;
	bottom: 2%;
	overflow: hidden;
	padding: .5% .75%;
	z-index: 100;
}
#refreshGameWrap{
	position: relative;
	top: 0; bottom: 0; left: 0; right: 0;
	color: #bef;
	height: 73%;
	margin-top: .5%;
	background: rgba(0,0,0,.5);
	overflow-y: auto;
}
#gameTable{
	table-layout: fixed;
	width: 100%;
	padding: 0 1%;
	margin: 0;
	color: #fff;
}
#exitSpectate{
	display: none;
}
tbody{
	border: 0;
}
/* title chat */
#titleChat{
	position: absolute;
	padding: 0;
	top: 7%;
	left: 0%;
	width: 54.8%;
	bottom: 2%;
}
#titleChatHeader{
	text-align: center;
	background: rgba(0, 0, 0, .7);
	margin-bottom: .25em;
	padding: .125em 0;
	border-bottom: 1px solid #357;
    background: -webkit-radial-gradient(top center, farthest-side, rgba(0, 48, 96, 1) 0%, rgba(0,0,0,1) 100%);
    background: -moz-radial-gradient(top center, farthest-side, rgba(0, 48, 96, 1) 0%, rgba(0,0,0,1) 100%);
    background: -ms-radial-gradient(top center, farthest-side, rgba(0, 48, 96, 1) 0%, rgba(0,0,0,1) 100%);
    background: -o-radial-gradient(top center, farthest-side, rgba(0, 48, 96, 1) 0%, rgba(0,0,0,1) 100%);
}

.titlePlayer{
	padding: 0 .5em;
}
#titleChatWrap{
	position: absolute;
	padding: 0%;
	bottom: 3%;
	width: 53.8%;
	left: .5%;
	font-family: Verdana, Arial, sans-serif;
	color: #bef;
	text-shadow: 2px 2px 0 #357;
	border-radius: 0;
}
#titleChatLog{
	position: absolute;
	left: 20%;
	width: 34.33%;
	background: rgba(0,0,0,.5);
}
#login{
	color: #fff;
}
.small-caps{
	font-family: Cinzel, Palatino Linotype, serif;
}
#title-chat-input{
	padding: 0 2%;
	width: 100%;
	border: 1px solid #2e6da4;
	border-right: none;
	background: rgba(0,12,32,1);
}
#chatAd{
	position: relative;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 320px;
	height: 50px;
}
#titlePlayerCountWrap{
	float: right;
	color: #aef;
	font-family: Verdana, Arial, sans-serif;
	padding: .25em .5em;
	border-radius: 4px;
	background: rgba(255,255,255,.1);
}
.titlePanelLeft{
	position: absolute;
	font-family: Verdana, Arial, sans-serif;
	top: 8%;
	bottom: 7%;
	text-shadow: .5px .5px #357, 1px 1px #357, 1.5px 1.5px #357, 2px 2px #357;
	color: #bef;
	border-radius: 4px;
	border: 1px solid #357;
	margin: 0;
	padding: .25em .5em .5em;
	overflow: auto;
}

#titleChatPlayers{
	left: .5%;
	width: 19%;
	padding: 0;
	background: rgba(0,55,155,.2);
}
.fwGameLabel{
	background: rgba(16,56,96,1);
	color: #aef !important;
	border: 1px solid #2e6da4;
}
.fwBlue{
	background: rgba(16,56,96,1);
	color: #aef !important;
	cursor: pointer;
	border: 1px solid #2e6da4;
	border-radius: 4px;
	text-shadow:
		1px 1px #000,
		-1px 0 #000,
		1px 0 #000,
		-1px 1px #000,
		1px -1px #000,
		-1px -1px #000 !important;
}
.fwBlue:hover{
	background: rgba(26,66,106,1);
}
.fwBlue:active{
	background: rgba(6,46,86,1);
}
.fwGreen{
	background: rgba(11,76,11,1);
	color: #afa !important;
	cursor: pointer;
	border: 1px solid #3a3;
	border-radius: 4px;
	text-shadow:
		1px 1px #000,
		-1px 0 #000,
		1px 0 #000,
		-1px 1px #000,
		1px -1px #000,
		-1px -1px #000 !important;
}
.fwGreen:hover{
	background: rgba(26,86,26,1);
}
.fwGreen:active{
	background: rgba(1,66,1,1);
}
#lobbyChatSend, #titleChatSend{
	border-radius: 0 4px 4px 0;
}

/* lobby chat */
#lobby-chat-input{
	padding: .5% 1%;
	width: 100%;
	border: 1px solid #2e6da4;
	border-right: none;
}
#chat-input{
	position: absolute;
	bottom: .5em;
	left: .5em;
	width: 40%;
	padding: .5% 1%;
	z-index: 9999;
	font-size: 1em;
	font-family: Verdana, Arial, sans-serif;
	border-radius: 4px;
	pointer-events: none;
}
.nobg{
	border: none;
	background: none;
}
.chatOn{
	background: rgba(0,0,0,.3);
	border: 1px solid rgba(192,240,255,.2);
}
#screenFlash{
	position: absolute;
	background: '#ffffff';
	width: 100%;
	height: 100%;
	z-index: 4999;
	opacity: 0;
	pointer-events: none;
}
.marginLeft{
	margin-left: .5em;
}
#ui2-head{
	position: relative;
	color: #fff;
	font-size: 1em;
	z-index: 9999;
	padding: .25em .5em;
	text-align: right;
	border-radius: 4px;
	margin-bottom: .5em;
}
#ui2{
	position: absolute;
	color: #fff;
	top: .25em;
	right: .25em;
	padding: .5em;
	width: 24%;
	max-width: 250px;
	z-index: 9999;
	border-radius: 4px;
}
#resources-ui{
	position: absolute;
	bottom: .25em;
	right: .25em;
	width: 16%;
	max-width: 200px;
	padding: .5em 0;
	text-overflow: ellipsis;
	color: #fff;
	text-align: right;
	z-index: 9999;
}
#resources-ui > .row, #target-ui > .row{
	margin: 0;
	padding: 0 .5em;
}
#diploHead{
	font-family: Cinzel, Palatino Linotype, serif;
	font-size: .875em;
	color: #8df;
	margin-bottom: .25em;
	letter-spacing: .25em;
}
#diplomacy-ui{
	font-size: 1.125em;
	position: absolute;
	left: .25em;
	top: .25em;
	padding: .5em;
	color: #fff;
	text-align: left;
	z-index: 9999;
	min-width: 200px;
}
#targetName{
	white-space: nowrap;
}
.tight{
	margin: 0 !important;
	padding: 0 !important;
}
.crystalCost{
	padding-left: 5px;
}
#target-ui{
	padding: 0;
	margin: 0;
	color: #fff;
}
.stagBlue{
	border: 1px solid rgba(176,240,255,1);
	border-radius: 4px;
	background: rgba(0, 16, 60, .8);
	background: linear-gradient(top, 
		rgba(0, 24, 100, .82) 0%, rgba(0, 24, 100, .84) 10%, 
		rgba(0, 22, 90, .84) 10%, rgba(0, 22, 90, .86) 20%, 
		rgba(0, 20, 80, .86) 20%, rgba(0, 20, 80, .88) 30%, 
		rgba(0, 18, 70, .88) 30%, rgba(0, 18, 70, .9) 40%, 
		rgba(0, 16, 60, .9) 40%, rgba(0, 16, 60, .92) 50%, 
		rgba(0, 14, 50, .92) 50%, rgba(0, 14, 50, .94) 60%, 
		rgba(0, 12, 40, .94) 60%, rgba(0, 12, 40, .96) 70%, 
		rgba(0, 10, 30, .96) 70%, rgba(0, 10, 30, .98) 80%, 
		rgba(0, 8, 20, .98) 80%, rgba(0, 8, 20, 1) 90%, 
		rgba(0, 6, 10, 1) 90%, rgba(0, 6, 10, 1) 100%);
	background: -webkit-linear-gradient(top, 
		rgba(0, 24, 100, .82) 0%, rgba(0, 24, 100, .84) 10%, 
		rgba(0, 22, 90, .84) 10%, rgba(0, 22, 90, .86) 20%, 
		rgba(0, 20, 80, .86) 20%, rgba(0, 20, 80, .88) 30%, 
		rgba(0, 18, 70, .88) 30%, rgba(0, 18, 70, .9) 40%, 
		rgba(0, 16, 60, .9) 40%, rgba(0, 16, 60, .92) 50%, 
		rgba(0, 14, 50, .92) 50%, rgba(0, 14, 50, .94) 60%, 
		rgba(0, 12, 40, .94) 60%, rgba(0, 12, 40, .96) 70%, 
		rgba(0, 10, 30, .96) 70%, rgba(0, 10, 30, .98) 80%, 
		rgba(0, 8, 20, .98) 80%, rgba(0, 8, 20, 1) 90%, 
		rgba(0, 6, 10, 1) 90%, rgba(0, 6, 10, 1) 100%);
	background: -moz-linear-gradient(top, 
		rgba(0, 24, 100, .82) 0%, rgba(0, 24, 100, .84) 10%, 
		rgba(0, 22, 90, .84) 10%, rgba(0, 22, 90, .86) 20%, 
		rgba(0, 20, 80, .86) 20%, rgba(0, 20, 80, .88) 30%, 
		rgba(0, 18, 70, .88) 30%, rgba(0, 18, 70, .9) 40%, 
		rgba(0, 16, 60, .9) 40%, rgba(0, 16, 60, .92) 50%, 
		rgba(0, 14, 50, .92) 50%, rgba(0, 14, 50, .94) 60%, 
		rgba(0, 12, 40, .94) 60%, rgba(0, 12, 40, .96) 70%, 
		rgba(0, 10, 30, .96) 70%, rgba(0, 10, 30, .98) 80%, 
		rgba(0, 8, 20, .98) 80%, rgba(0, 8, 20, 1) 90%, 
		rgba(0, 6, 10, 1) 90%, rgba(0, 6, 10, 1) 100%);
	background: -ms-linear-gradient(top, 
		rgba(0, 24, 100, .82) 0%, rgba(0, 24, 100, .84) 10%, 
		rgba(0, 22, 90, .84) 10%, rgba(0, 22, 90, .86) 20%, 
		rgba(0, 20, 80, .86) 20%, rgba(0, 20, 80, .88) 30%, 
		rgba(0, 18, 70, .88) 30%, rgba(0, 18, 70, .9) 40%, 
		rgba(0, 16, 60, .9) 40%, rgba(0, 16, 60, .92) 50%, 
		rgba(0, 14, 50, .92) 50%, rgba(0, 14, 50, .94) 60%, 
		rgba(0, 12, 40, .94) 60%, rgba(0, 12, 40, .96) 70%, 
		rgba(0, 10, 30, .96) 70%, rgba(0, 10, 30, .98) 80%, 
		rgba(0, 8, 20, .98) 80%, rgba(0, 8, 20, 1) 90%, 
		rgba(0, 6, 10, 1) 90%, rgba(0, 6, 10, 1) 100%);
	background: -o-linear-gradient(top, 
		rgba(0, 24, 100, .82) 0%, rgba(0, 24, 100, .84) 10%, 
		rgba(0, 22, 90, .84) 10%, rgba(0, 22, 90, .86) 20%, 
		rgba(0, 20, 80, .86) 20%, rgba(0, 20, 80, .88) 30%, 
		rgba(0, 18, 70, .88) 30%, rgba(0, 18, 70, .9) 40%, 
		rgba(0, 16, 60, .9) 40%, rgba(0, 16, 60, .92) 50%, 
		rgba(0, 14, 50, .92) 50%, rgba(0, 14, 50, .94) 60%, 
		rgba(0, 12, 40, .94) 60%, rgba(0, 12, 40, .96) 70%, 
		rgba(0, 10, 30, .96) 70%, rgba(0, 10, 30, .98) 80%, 
		rgba(0, 8, 20, .98) 80%, rgba(0, 8, 20, 1) 90%, 
		rgba(0, 6, 10, 1) 90%, rgba(0, 6, 10, 1) 100%);
}
.diplomacyPlayers{
	position: relative;
	line-height: 1.25em;
}
.diploNames{
	position: relative;
	top: .125em;
}
#lobbyFirmamentWarsLogo{
	opacity: 1;
	width: 100%;
}
#surrender{
	margin-right: .375em;
}
.surrender{
	margin-right: .375em;
	opacity: 0;
	pointer-events: none;
}
.resourceIndicator{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-left: .5em;
}
.manpower{
	color: #ffff00;;
}
.moves{
	color: #dd6600;
}
.food{
	color: #8d0;
}
.production{
	color: #33e5e5;
}
.culture{
	color: #d2d;
}
#target{
	padding: 3% 0;
	
}
#actionTable  tr{
    border-spacing: 1em;
    border-collapse: separate;
}
#tileInfo{
	font-size: .875em;
	margin: 2% 0;
}
#researchHead{
	font-family: Cinzel, Palatino Linotype, serif;
	font-size: 1.5em;
	letter-spacing: .25em;
}
#tileActions, #tileResearch{
	margin-top: 4%;
	font-size: .625em;
}
#menuSelect{
	width: 100%;
}
#tileAction > tbody > tr > td{
	color: #f00;
}
table td, .table th, .table td {
	border: none;
	outline: none;
    border-top: none !important;
}
.actionBolt{
	float: left;
	line-height: 1.75em;
}
.actionButtons{
	font-size: 1.5em;
	line-height: 1.75em;
	margin-bottom: .05em;
	cursor: pointer;
	border: 2px solid #000;
	border-radius: 8px 0 8px 0;
	box-shadow:
		0 .1em .3em rgba(128, 192, 255, .5) inset,
		0 -.1em .1em rgba(16, 92, 192, .7) inset;
	background: rgba(23,42,84,1); /* 23 42 84 */
	background: linear-gradient(top, 
		rgba(23, 42, 84, 1) 0%, rgba(23, 42, 84, 1) 50%, 
		rgba(4, 67, 136, 1) 50%, rgba(4, 67, 136, 1) 100%);
	background: -webkit-linear-gradient(top, 
		rgba(23, 42, 84, 1) 0%, rgba(23, 42, 84, 1) 50%, 
		rgba(4, 67, 136, 1) 50%, rgba(4, 67, 136, 1) 100%);
	background: -moz-linear-gradient(top, 
		rgba(23, 42, 84, 1) 0%, rgba(23, 42, 84, 1) 50%, 
		rgba(4, 67, 136, 1) 50%, rgba(4, 67, 136, 1) 100%);
	background: -ms-linear-gradient(top, 
		rgba(23, 42, 84, 1) 0%, rgba(23, 42, 84, 1) 50%, 
		rgba(4, 67, 136, 1) 50%, rgba(4, 67, 136, 1) 100%);
	background: -o-linear-gradient(top, 
		rgba(23, 42, 84, 1) 0%, rgba(23, 42, 84, 1) 50%, 
		rgba(4, 67, 136, 1) 50%, rgba(4, 67, 136, 1) 100%);
}
.actionButtons:hover{
	background: rgba(32,100,177,1); /* 23 42 84 */
	background: linear-gradient(top, 
		rgba(32, 100, 177, 1) 0%, rgba(32, 100, 177, 1) 50%, 
		rgba(32, 177, 232, 1) 50%, rgba(32, 177, 232, 1) 100%);
	background: -webkit-linear-gradient(top, 
		rgba(32, 100, 177, 1) 0%, rgba(32, 100, 177, 1) 50%, 
		rgba(32, 177, 232, 1) 50%, rgba(32, 177, 232, 1) 100%);
	background: -moz-linear-gradient(top, 
		rgba(32, 100, 177, 1) 0%, rgba(32, 100, 177, 1) 50%, 
		rgba(32, 177, 232, 1) 50%, rgba(32, 177, 232, 1) 100%);
	background: -ms-linear-gradient(top, 
		rgba(32, 100, 177, 1) 0%, rgba(32, 100, 177, 1) 50%, 
		rgba(32, 177, 232, 1) 50%, rgba(32, 177, 232, 1) 100%);
	background: -o-linear-gradient(top, 
		rgba(32, 100, 177, 1) 0%, rgba(32, 100, 177, 1) 50%, 
		rgba(32, 177, 232, 1) 50%, rgba(32, 177, 232, 1) 100%);
}
.actionButtons:active{
	box-shadow:
		0 5em 5em rgba(0,0,0,.3) inset;
}
#players{
	height: 30%;
}
.fa{
	cursor: pointer;
}
#chatId{
	display: none;
}

#surrenderScreen, #victoryScreen{
	position: absolute;
	display: none;
	font-family: Cinzel, Consolas, monospace;
	top: 28%;
	margin: 0 auto;
	left: 0;
	right: 0;
	width: 33%;
	max-width: 400px;
	padding: 1% 3%;
	font-size: 1.25em;
	text-align: center;
	z-index: 9999;
}
.endBtn{
	border: 1px solid #3377dd;
	box-shadow: 0 0 20px rgba(0,40,148,1) inset;
	border-radius: 5%;
	color: #ff0;
	cursor: pointer;
	padding: 1%;
	margin-top: 4%;
}
.endBtn:hover{
	background: rgba(0, 48, 112, .5);
}
.modalBtnChild{
	border: 1px solid #335577;
	border-radius: 10%;
}
.portal{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
}
#overlay{
	display: none;
	background: rgba(0,0,0,.5);
	z-index:9999999;
	cursor: wait;
}
#worldTitle{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200%;
	max-width: 4400px;
	height: auto;
}
#worldWrap{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 195.31%;
	height: 143.22%;
	background: #00061a;
}
.worldWater{
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	opacity: 1;
	background: url('../images/water13.jpg');
}
#worldWater2{
	opacity: .5;
	background: url('../images/water14.jpg');
}
#worldWater3{
	opacity: .5;
	background: url('../images/water16.jpg');
}
#worldWater4{
	opacity: .5;
	background: url('../images/water2.jpg');
}
#world{
	position: absolute;
	top: 0%; 
	left: 0%;
}
#mapUnits{
	text-shadow: 1px 1px #000;
	color: #ffffff;
	position: absolute;
	top: 0%; 
	left: 0%;
	overflow: visible;
	z-index:9999;
	pointer-events: none;
}
.hole{
	fill-rule: evenodd;
}
.land{
	fill: #02063a;
	fill-opacity: 1;
	stroke: #85daf2;
	stroke-opacity: 1;
	stroke-width: 1;
	overflow: visible;
	cursor: pointer;
}
.landOutline{
	stroke: #85daf2;
}
.unit{
	visibility: hidden;
	margin-left: 1em;
	white-space: nowrap;
	font-size: 22px;
	font-family: Times New Roman, Serif;
	pointer-events: none;
	text-anchor: middle;
	alignment-baseline: center;
}
.mapBars{
	stroke-dasharray:2,1;
}
.targetBarsWrap{
	margin: .1em 1em;
	padding: 1px;
	background: #2a2a2a;
	height: 8px;
	border: 1px solid #000;
	overflow: hidden;
}
.targetBarsFood{
	margin: 0;
	color: none;
	border-top: 2px dotted #8d0;
	background-color: none;
	height: 0;
}
.targetBarsCulture{
	margin: 0;
	color: none;
	border-top: 2px dotted #d2d;
	background-color: none;
	height: 0;
	
}
.targetBarsDefense{
	margin: 0;
	color: none;
	border-top: 2px dotted #ff0;
	background-color: none;
	height: 0;
}
text{
	fill: rgba(255,255,255,1);
	stroke: rgba(0,0,0,1);
	stroke-width: 3px;
	stroke-linejoin: round;
	paint-order: stroke;
}
#motionPath{
	visibility: hidden;
}
#targetLine{
	visibility: hidden;
	stroke-width: 3;
	stroke-dasharray: 8,4;
}
#targetLineShadow{
	visibility: hidden;
	stroke-width: 1;
	stroke-dasharray: 8,4;
	stroke: rgba(0,0,0,.3);
}
#targetCrosshair{
	stroke: "#1a1a1a";
	stroke-width: 12;
	visibility: hidden;
	fill: #f00;
	pointer-events: none;
}
.paths{
	stroke: rgba(255,255,0,1);
	stroke-width: 2;
	stroke-miterlimit: 4;
	stroke-dasharray: 2,2;
	pointer-events: none;
	fill: none;
}
.mapSelect{
	text-shadow: none;
}
circle{
	opacity: 0;
}
.block{
	display: block;
}
.center{
	position: relative;
	margin: 0 auto;
}
.w33{
	width: 33%;
}
.w66{
	width: 66%;
}
.w100{
	width: 100%;
}
.bigFont{
	font-size: 1.25em;
}
#nationFlag{
	position: absolute;
	margin-top: 0%;
	right: 1%;
	height: 7em;
}
#nation-ui{
	margin-top: 3%;
	font-size: 1em;
	font-family: Times New Roman, serif;
	text-overflow: ellipsis;
	text-align: center;
	overflow: hidden;
}
#tileName{
	font-family: Times New Roman, serif;
	font-size: 1em;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: center;
	overflow: hidden;
}
.fw-primary{
	border: 1px solid #01a;
	background: rgba(0,0,0,.7);
	border-radius: 6px;
	color: #fff;
	box-shadow: 0 0 5px #3377dd, 0 0 5px #3377dd inset;
}
#lobby{
	padding: 8px;
}
#lobbyHead{
	font-size: 1.25em;
}
.active{
    background-color: #286090;
    border-color: #204d74;
}
#joinGame{
	position: relative;
	top: -1px;
}
#joinGameLobby{
	visibility: hidden;
	position: absolute;
	top: 0%;
	width: 100%;
	height: 100%;
	left: 0;
	right: 0;
}
#lobbyLeftCol{
	position: absolute;
	top: 2%;
	left: 2%;
	width: 55%;
	height: 96%;
}
#lobbyRightCol{
	position: absolute;
	top: 2%;
	width: 35%;
	left: 60%;
	font-size: 1em;
}
#lobbyPlayers{
	position: relative;
	top: 0%;
	height: 59%;
	left: 0%;
}
#lobbyGame{
	position: relative;
	top: 0%;
	padding: 1em;
}
#lobbyGameName{
	overflow: hidden;
	text-overflow: ellipsis;
}
#lobbyGovernmentDescription{
	padding: 1em;
}
.lobbyFlags{
	max-height: 2.8em;
	margin-top: .1em;
}
.lobbyRelWrap{
	position: relative;
	top: 0%;
	margin-top: 4%;
}
.lobbyAccounts{
	margin-top: .25em;
	font-size: 1em;
	line-height: 1em;
}
.lobbyNames{
	font-family: Cinzel, Palatino Linotype, serif;
	font-size: 1.125em;
	line-height: 1.5em;
	color: #8df;
	text-shadow: .5px .5px #145, 1px 1px #145, 1.5px 1.5px #145, 2px 2px #145;
	letter-spacing: .125em;
}
.govDropdown{
	margin-top: .125em;
}
#lobbyChatLogWrap{
	height: 35%;
	border-radius: 6px 6px 0 0;
}
#lobbyChatLog{
	position: relative;
	overflow: auto;
	top: 2%;
	left: 1%;
	right: 1%;
	width: 98%;
	height: 83%;
	font-family: Verdana, Arial, sans-serif;
	color: #bef;
	text-shadow: 2px 2px 0 #357;
	border-radius: 4px;
}
#lobbyChatWrap{
	position: absolute;
	top: auto;
	bottom: 2%;
	left: 1%;
	right: 1%;
	margin: 0;
	width: 98%;
	font-family: Verdana, Arial, sans-serif;
	color: #bef;
	text-shadow: 2px 2px 0 #357;
	border-radius: 0;
}
#lobbyGovernmentDescription{
	padding: 1em;
}
#lobbyButtonWrap{
	position: relative;
	padding: 1em 5em;
}
.lobbyButtons{
	position: relative;
	left: 0;
	right: 0;
	margin: 0 auto;
	max-width: 200px;
}
.joinGameInputs{
	color: #bef;
	background: none;
	border: 1px solid #2e6da4;
	margin: 0;
	padding: .25em .5em;
	border-radius: 4px;
	width: 33%;
}
.fwBlueInput{
	background: rgba(0,12,32,1);
	color: #fff !important;
	border: 1px solid #2e6da4;
}
.gameTableCol1{
	width: 50%;
}
.gameTableCol2{
	width: 35%;
}
.gameTableCol3{
	width: 15%;
}
.soundSlider{
	cursor: pointer !important;
	width: 1em;
	margin-right: .25em;
}
#Msg{
	opacity: 0;
	position: absolute;
	top: 10%;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 80%;
	padding: 0 8%;
	text-align: center;
	font-size: 1.5em;
	color: #fff;
	background: rgba(0,0,0,.9);
	background: linear-gradient(right, rgba(0,0,0,0) 0%, rgba(0,0,0,.9) 20%, rgba(0,0,0,.9) 80%, rgba(0,0,0,0) 100%);
	background: -o-linear-gradient(right, rgba(0,0,0,0) 0%, rgba(0,0,0,.9) 20%, rgba(0,0,0,.9) 80%, rgba(0,0,0,0) 100%);
	background: -moz-linear-gradient(right, rgba(0,0,0,0) 0%, rgba(0,0,0,.9) 20%, rgba(0,0,0,.9) 80%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(right, rgba(0,0,0,0) 0%, rgba(0,0,0,.9) 20%, rgba(0,0,0,.9) 80%, rgba(0,0,0,0) 100%);
	background: -ms-linear-gradient(right, rgba(0,0,0,0) 0%, rgba(0,0,0,.9) 20%, rgba(0,0,0,.9) 80%, rgba(0,0,0,0) 100%);
	/* border gradient */
	border-width: 0;
	border-top: 2px solid transparent;
	border-bottom: 2px solid transparent;
	border-image: linear-gradient(right, rgba(4, 67, 136,0) 0%, rgba(4, 67, 136,.9) 20%, rgba(4, 67, 136,.9) 80%, rgba(4, 67, 136,0) 100%);
	-o-border-image: -o-linear-gradient(right, rgba(4, 67, 136,0) 0%, rgba(4, 67, 136,.9) 20%, rgba(4, 67, 136,.9) 80%, rgba(4, 67, 136,0) 100%);
	-moz-border-image: -moz-linear-gradient(right, rgba(4, 67, 136,0) 0%, rgba(4, 67, 136,.9) 20%, rgba(4, 67, 136,.9) 80%, rgba(4, 67, 136,0) 100%);
	-webkit-border-image: -webkit-linear-gradient(right, rgba(4, 67, 136,0) 0%, rgba(4, 67, 136,.9) 20%, rgba(4, 67, 136,.9) 80%, rgba(4, 67, 136,0) 100%);
	-ms-border-image: -ms-linear-gradient(right, rgba(4, 67, 136,0) 0%, rgba(4, 67, 136,.9) 20%, rgba(4, 67, 136,.9) 80%, rgba(4, 67, 136,0) 100%);
	border-image-slice: 1;
	z-index: 999999;
	pointer-events: none;
}
#hud{
	font-family: Cinzel, Palatino Linotype, serif;
	letter-spacing: .1em;
	position: absolute;
	top: 5%;
	left: 0%;
	width: 100%;
	text-align: center;
	font-size: 1.75em;
	color: #bef;
	z-index:999999;
	pointer-events: none;
	visibility: hidden;
}
#createGameFormWrap{
	padding: 0 .5em;
}
#gamePlayers{
	width: 33%;
}
#titleViewBackdrop{
	position: absolute;
	visibility: hidden;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.8);
    background: -webkit-radial-gradient(center center, farthest-corner, rgba(0,0,0,1) 0%, rgba(0,0,0,.7) 100%);
    background: -moz-radial-gradient(center center, farthest-corner, rgba(0,0,0,1) 0%, rgba(0,0,0,.7) 100%);
    background: -ms-radial-gradient(center center, farthest-corner, rgba(0,0,0,1) 0%, rgba(0,0,0,.7) 100%);
    background: -o-radial-gradient(center center, farthest-corner, rgba(0,0,0,1) 0%, rgba(0,0,0,.7) 100%);
	z-index: 999999;
}
.capitalColor{
	color: #ffc500;
}
.capitalStar{
	position: relative;
	top: -1px;
	color: #ffc500;
	margin-right: .125em;
	font-size: .875em;
}
.fa-stack{
	width: 1em;
	height: 1em;
	line-height: 1em;
}
.titleModal{
	visibility: hidden;
	position: absolute;
	padding: 8px;
	top: 2%;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 50%;
	max-width: 600px;
	z-index: 999999;
}
.wars{
	white-space: nowrap;
	cursor: pointer;
}
.wars:hover{
	color: #9df;
	background: rgba(0,64,128,.8);
}
.wars:active{
	color: #7be;
}
.table-borderless tbody tr td, 
.table-borderless tbody tr th, 
.table-borderless thead tr th {
    border: none;
}
.warCells{
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
table {
	table-layout: fixed;
	word-wrap: break-word;
}
#updateNationName{
	color: #222;
	width: 100%;
}
#flagDropdown{
	font-family: Cinzel, Palatino Linotype, serif;
	width: 100%;
	max-height: 300px;
	overflow: auto;
}
.dropdown-menu>li>a{
	color: #222;
}
.dropdown-menu>li>a:hover{
	background: #135;
	color: #fff;
}
.dropdown-header{
	font-weight: bold;
	font-size: 1.125em;
	background: #357;
	border-top: 1px solid #016;
	border-bottom: 1px solid #016;
	color: #fff;
	letter-spacing: .125em;
	font-family: Cinzel, Palatino Linotype, serif;
	padding-left: 1em;
}
#updateNationFlag{
	display: none;
}
#nationName{
	overflow: hidden;
	word-break: break-word;
	max-height: 160px;
}
#lobbyWrap{
	width: 96%;
	padding: 0;
}
.lobbyRow{
	display: none;
	height: 2.8em;
	line-height: 2.8em;
	margin-top: .5em;
}
.lobbyCaret{
	position: absolute;
	top: .375em;
	right: .5em;
	font-size: 1.5em;
}
.fwDropdownButton{
	position: relative;
	text-align: left;
	width: 100%;
	height: 2.75em;
	background: rgba(0,0,0,.5);
	border: 1px solid #2e6da4;
	color: #aef;
}
.fwDropdownButton:hover{
	border: 1px solid #2e6da4;
	background: rgba(0,16,56,.5) !important;
}
.fwDropdownButton:active{
	border: 1px solid #2e6da4;
	background: rgba(0,6,36,.5) !important;
}
.open>.dropdown-toggle.btn{
	border: 1px solid #aef !important;
	color: #aef !important;
	background: rgba(0,16,56,.5) !important;
}
.fwDropdownButton:hover{
	background: rgba(32,112,192,.5);
	color: #aef;
	border: 1px solid #aef;
}
.fwDropdownButtonEnemy:hover{
	background: rgba(0,0,0,.5);
	border: 1px solid #2e6da4;
	color: #aef;
}
#governmentDropdown{
	font-family: Cinzel, Palatino Linotype, serif;
	text-shadow: none;
	background: #00061a;
	border: 2px groove #204d74;
}
#governmentDropdown>li>a{
	color: #aef;
}
#governmentDropdown>li>a:hover{
	background: #135;
}
.fwDropdown{
	text-shadow: none;
	background: #00061a;
	border: 2px groove #204d74;
}
.fwDropdown>li>a{
	color: #aef;
	padding-left: 1em;
}
.fwDropdown>li>a:hover{
	background: #135;
	color: #aef;
}
.lobbyNationName{
	word-break: break-word;
	font-family: Times New Roman, serif;
	font-size: 1.5em;
	overflow: hidden;
}
.lobbyNationInfo{
	overflow: hidden;
}
.gameNationName{
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: left;
	font-family: Times New Roman, serif;
	font-size: 1em;
	overflow: hidden;
}
#buyFlag{
	font-size: 1.625em;
	background: rgba(16,56,96,.7);
}
#buyFlag:hover{
	color: #00bb00;
}
.crystal{
	float: left;
	background: url('/images1/currency.png') 100% 0 / 200% 100%;
	width:32px;
	height:32px;
}
#flagPurchased{
	display: none;
}
#offerMap{
	display: none;
	margin-right: 4em;
}
#offerFlag{
	position: absolute;
	top: 5%;
	left: 0;
	right: 0;
	margin: 0 auto;
	display: none;
	text-align: center;
	width: 55%;
	background: rgba(0,0,0,.4);
	border-radius: 6px;
	border: 1px solid #3377dd;
	
}
#researchFutureTech{
	display: none;
}
.player0{
	color: #02063a;
	background: #02063a;
}
/* gov icon */
.player1{
	color: #bb0000;
}
/* stat border */
.pb1{
	border: 1px solid #bb0000;
}
/* star bar */
.pbar1{
	background: #bb0000;
}
.player2{
	color: #0077ff;
}
.pb2{
	border: 1px solid #0077ff;
}
.pbar2{
	background: #0077ff;
}
.player3{
	color: #a5a500;
}
.pb3{
	border: 1px solid #a5a500;
}
.pbar3{
	background: #a5a500;
}
.player4{
	color: #006000;
}
.pb4{
	border: 1px solid #006000;
}
.pbar4{
	background: #006000;
}
.player5{
	color: #b06000;
}
.pb5{
	border: 1px solid #b06000;
}
.pbar5{
	background: #b06000;
}
.player6{
	color: #33ddff;
}
.pb6{
	border: 1px solid #33ddff;
}
.pbar6{
	background: #33ddff;
}
.player7{
	color: #b050b0;
}
.pb7{
	border: 1px solid #b050b0;
}
.pbar7{
	background: #b050b0;
}
.player8{
	color: #5500aa;
}
.pb8{
	border: 1px solid #5500aa;
}
.pbar8{
	background: #5500aa;
}
.player9{
	color: #02063a;
	background: #02063a;
}
.p9b{
	outline: 1px solid #02063a;
}
.diploSquare{
	font-size: .875em;
	margin-right: .375em;
	text-shadow: 1px 1px #000;
}
#myNationWrap{
	margin: .5em 0;
}
.mapFlag{
	pointer-events: none;
}
.inlineFlag{
	display: inline-block;
	margin: 0 .5em .1em 0;
	height: 1em;
	outline-width: 1px;
}
.diploFlag{
	position: relative;
}
.barWrap{
	overflow: hidden;
	margin: .25em;
}
.resourceBar{
	height: .5em;
	background: #777;
	border-radius: 6px;
}
#foodBar{
	margin: 0;
	background: #8d0;
	border: none;
	width: 0;
	border-radius: 0;
	box-shadow: 
		-2px 0 2px #040 inset,
		0 -2px 2px #480 inset,
		0 2px 2px #480 inset;
}
#cultureBar{
	margin: 0;
	background: #d2d;
	border: none;
	width: 0;
	border-radius: 0;
	box-shadow: 
		-2px 0 2px #505 inset,
		0 2px 2px #a4a inset,
		0 -2px 2px #a1a inset;
}
#startGame{
	display: none;
}
#countdown{
	display: none;
	margin: 1em 0 0;
	font-family: Cinzel, Palatino Linotype, serif;
	letter-spacing: .1em;
}
#optionsFormWrap{
	padding: 0 3em;
}
/* helper classes */
.no-point{
	pointer-events: none;
}
.nowrap{
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.margin-top{
	margin-top: 12px;
}
/* stat */
#statWrap{
	display: none;
	position: absolute;
	top: 0%;
	bottom: 0%;
	margin: 0%;
	left: 0;
	right: 0;
	z-index: 9999;
	padding: 0;
	background: #000;
}
#statWorld{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200%;
	max-width: 4400px;
	height: auto;
	z-index: -1;
}
#statResult{
	font-family: Cinzel, Palatino Linotype, serif;
	font-size: 3.5em;
	line-height: 1.7em;
	color: #fff;
	border-bottom: 1px solid #369;
	padding: 0;
	text-indent: .5em;
	text-align: center;
	letter-spacing: .025em;
    background: -webkit-radial-gradient(center center, farthest-side, rgba(32,64,124,.5) 0%, rgba(0,0,0,.1) 100%);
    background: -moz-radial-gradient(center center, farthest-side, rgba(32,64,124,.5) 0%, rgba(0,0,0,.1) 100%);
    background: -ms-radial-gradient(center center, farthest-side, rgba(32,64,124,.5) 0%, rgba(0,0,0,.1) 100%);
    background: -o-radial-gradient(center center, farthest-side, rgba(32,64,124,.5) 0%, rgba(0,0,0,.1) 100%);
}
.statResultFlag{
	height: 1.675em;
}
#statTabWrap{
	border-bottom: 1px solid #369;
	margin-bottom: 1em;
}
.statTabs{
	font-family: Cinzel, Palatino Linotype, serif;
	letter-spacing: 2px;
	position: relative;
	display: inline-block;
	margin: 0;
	padding: 0;
	color: #bef;
	width: 20%;
	font-size: 1.625em;
	cursor: pointer;
	text-align: center;
	background: rgba(0, 0, 0, .8);
}
.statTabs.active{
    background: -webkit-radial-gradient(top center, farthest-side, rgba(48, 96, 155, 1) 0%, rgba(0,32,69,1) 100%);
    background: -moz-radial-gradient(top center, farthest-side, rgba(48, 96, 155, 1) 0%, rgba(0,32,69,1) 100%);
    background: -ms-radial-gradient(top center, farthest-side, rgba(48, 96, 155, 1) 0%, rgba(0,32,69,1) 100%);
    background: -o-radial-gradient(top center, farthest-side, rgba(48, 96, 155, 1) 0%, rgba(0,32,69,1) 100%);
	color: #d5faff;
	box-shadow: 0 0 3px #17d inset;
}
.statTabs:hover{
	color: #d5faff;
}
.statTabs:active{
	color: #9cd;
}
#gameStatsTable{
	border-spacing: 0;
	padding: 1em;
	font-size: 1.125em;
}
#gameStatsTable > tr > th{
	font-size: 1.25em;
	line-height: 1.25em !important;
	padding: 0 !important;
}
.statHead{
	font-family: Times New Roman;
	font-size: 1.125em;
	box-shadow: 0 0 0 2px #0a1a4a inset,
		0 0 0 3px #357 inset;
	border-radius: 7px 7px 0 0;
    background: -webkit-linear-gradient(bottom, rgba(16, 64, 128, 1) 0%, rgba(0, 16, 64,1) 100%) !important;
    background: -moz-linear-gradient(bottom, rgba(16, 64, 128, 1) 0%, rgba(0, 16, 64,1) 100%) !important;
    background: -ms-linear-gradient(bottom, rgba(16, 64, 128, 1) 0%, rgba(0, 16, 64,1) 100%) !important;
    background: -o-linear-gradient(bottom, rgba(16, 64, 128, 1) 0%, rgba(0, 16, 64,1) 100%) !important;
}
.statRow{
	border: 1px solid #037;
	border-left: none;
	border-right: none;
}
.statSpacer{
	height: 2px;
}
.statSpacer2{
	height: 0;
}
.statsFlags{
	max-height: 3em;
	margin: 0 .5em .5em;
	float: left;
}
.statsPlayerWrap{
	margin-left: 6.5em;
}
.statsAccount{
	font-size: .875em;
}
.statsNation{
	font-family: Cinzel, Palatino Linotype, serif;
	font-size: 1.25em;
	color: #8df;
	text-shadow: .5px .5px #145, 1px 1px #145, 1.5px 1.5px #145, 2px 2px #145;
	letter-spacing: .05em;
}
.statsGov{
	font-size: .875em;
	margin-right: .25em;
}
#statFooter{
	font-family: Times New Roman, serif;
	font-size: 1.25em;
	border-left: none;
	border-right: none;
	border-radius: 0;
}
#statQuote{
	font-family: Palatino Linotype, Times New Roman, serif;
	font-size: .925em;
	padding: .25em .5em;
	margin: 0 2em 0 .5em;
}
#statVerse{
	font-family: Cinzel, Palatino Linotype, serif;
	margin-top: .5em;
}
#statDuration{
	padding: .25em 1em;
}
#gameDuration{
	font-family: Cinzel, Palatino Linotype, serif;
	letter-spacing: 2px;
}
#statsEndGame{
	font-family: Cinzel, Consolas, monospace;
	font-size: .875em;
	padding: .125em 1em;
	margin: .5em;
	font-variant: normal;
}
#statsEndGame:hover{
	color: #d5faff;
	cursor: pointer;
}
.statTD{
	line-height: 3em !important;
	text-align: center;
}
.statBar{
	position: relative;
	margin: .5em 10% 0;
	color: #fff;
	left: 0;
	right: 0;
	line-height: 2em;
	border-radius: 5px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	background: rgba(0,0,0,.4);
}
.statBarBg{
	width: 0;
	border-radius: 5px;
	box-shadow: 0 0 0 1px rgba(0,0,0,1) inset,
		0 6px 6px rgba(255,255,255,.4) inset,
		0 -6px 6px rgba(0,0,0,.4) inset;
}
.statVal{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
/* bootstrap overwrites */
.slider-handle{
	cursor: pointer;
	background-image: linear-gradient(to bottom, #8bf 0, #0480be 100%)
}
.fa{
	cursor: default;
	/* background: none !important; */
}
.text-right{
	text-align: right;
}
.text-disabled{
	color: #333;
}
.text-success{
	color: #0d0;
}
.text-primary{
	color: #8bf;
}
.text-info{
	color: #00bb00;
}
.text-warning{
	color: #ee7;
}
.text-danger{
	color: #d11;
}
.text-hotkey{
	color: #5dd;
}
.input-group-addon{
	text-shadow: none;
	color: #1a1a1a;
}
.buffer{
	margin-top: .5em;
}
.buffer2{
	margin-top: 1em;
}
#createGameMapWrap{
}
#mapDropdown{
	font-family: Cinzel, Palatino Linotype, serif;
}
#mapDropdownWrap{
	height: 1em;
}
label{
	display: inline;
}
#createGameDescription{
	line-height: 1em;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  
	opacity: 1;
}
.footMargin{
	margin-bottom: .5em;
}
.text-overflow{
	overflow: hidden;
	text-overflow: ellipsis;
}
.btn{
	font-family: Cinzel, Consolas, monospace;
}
.btn:active,
.btn:focus{
	outline: none;
}
.btn-info{
	background: #008811;
	border-color: #005511;
}
.btn.btn-info:hover,
.btn.btn-info:active,
.btn.btn-info:focus{
	outline: none;
	background: #00660a;
	border-color: #00440a;
}
.btn-default{
	color: #fff;
	background: #555;
	border-color: #222;
}
.btn.btn-default:hover, 
.btn.btn-default:active,
.btn.btn-default:focus{
	outline: none;
	color: #fff;
	background: #333;
	border-color: #111;
}
.tooltip-inner {
	background: rgba(16, 56, 96, 1);
	color: #aef;
	text-shadow: 1px 1px #000;
	border: 2px ridge #357;
}
.text-crystal{
	color: #8bf;
}
/* helper classes */
.no-padding{
	padding: 0 !important;
}
.no-margin{
	margin: 0 !important;
}
.pointer{
	cursor: pointer;
}
.text{
	cursor: text !important;
}
.crosshair{
	cursor: crosshair;
}
/* responsive height */
@media all and (max-height: 1080px) and (min-height: 1040px){
	#refreshGameWrap{
		height: 72%;
	}
}
@media all and (max-height: 1040px) and (min-height: 980px){
	#refreshGameWrap{
		height: 70.5%;
	}
}
@media all and (max-height: 980px) and (min-height: 940px){
	#refreshGameWrap{
		height: 69%;
	}
}
@media all and (max-height: 940px) and (min-height: 900px){
	#refreshGameWrap{
		height: 67.5%;
	}
	#lobbyChatLog{
		height: 82%;
	}
}
@media all and (max-height: 900px) and (min-height: 870px){
	.titlePanelLeft{
		bottom: 7.3%;
	}
	#refreshGameWrap{
		height: 66.5%;
	}
	#lobbyChatLog{
		height: 82%;
	}
}
@media all and (max-height: 870px) and (min-height: 840px){
	.titlePanelLeft{
		bottom: 7.6%;
	}
	#refreshGameWrap{
		height: 64.5%;
	}
	#lobbyChatLog{
		height: 80%;
	}
}
@media all and (max-height: 840px) and (min-height: 780px){
	.titlePanelLeft{
		bottom: 8%;
	}
	#refreshGameWrap{
		height: 63%;
	}
	#lobbyChatLog{
		height: 78%;
	}
}
@media all and (max-height: 780px) and (min-height: 740px){
	.titlePanelLeft{
		bottom: 8%;
	}
	#refreshGameWrap{
		height: 61%;
	}
	#lobbyChatLog{
		height: 78%;
	}
}
@media all and (max-height: 740px) and (min-height: 700px){
	.titlePanelLeft{
		bottom: 8.5%;
	}
	#refreshGameWrap{
		height: 59%;
	}
	#lobbyChatLog{
		height: 76%;
	}
}
@media all and (max-height: 700px) and (min-height: 660px){
	.titlePanelLeft{
		bottom: 8.5%;
	}
	#refreshGameWrap{
		height: 57%;
	}
	#lobbyChatLog{
		height: 76%;
	}
}
@media all and (max-height: 660px) and (min-height: 620px){
	.titlePanelLeft{
		bottom: 9%;
	}
	#refreshGameWrap{
		height: 53.5%;
	}
	#lobbyChatLog{
		height: 74%;
	}
}
@media all and (max-height: 620px) and (min-height: 580px){
	.titlePanelLeft{
		bottom: 9.5%;
	}
	#refreshGameWrap{
		height: 50%;
	}
	#lobbyChatLog{
		height: 72%;
	}
}
@media all and (max-height: 580px) and (min-height: 540px){
	.titlePanelLeft{
		bottom: 9.5%;
	}
	#refreshGameWrap{
		height: 47%;
	}
	#lobbyChatLog{
		height: 72%;
	}
}
@media all and (max-height: 540px) and (min-height: 500px){
	.titlePanelLeft{
		bottom: 10%;
	}
	#refreshGameWrap{
		height: 43%;
	}
	#lobbyChatLog{
		height: 70%;
	}
}
@media all and (max-height: 500px) and (min-height: 450px){
	.titlePanelLeft{
		bottom: 11%;
	}
	#refreshGameWrap{
		height: 36%;
	}
	#lobbyChatLog{
		height: 68%;
	}
}
@media all and (max-height: 450px) and (min-height: 350px){
	.titlePanelLeft{
		bottom: 13%;
	}
	#refreshGameWrap{
		height: 30%;
	}
	#lobbyChatLog{
		height: 66%;
	}
}
@media all and (max-height: 350px) and (min-height: 250px){
	.titlePanelLeft{
		bottom: 16%;
	}
	#refreshGameWrap{
		height: 23%;
	}
	#lobbyChatLog{
		height: 64%;
	}
}
@media all and (max-height: 250px) and (min-height: 0px){
	.titlePanelLeft{
		bottom: 21%;
	}
	#refreshGameWrap{
		height: 20%;
	}
	#lobbyChatLog{
		height: 60%;
	}
}
/* responsive width */
@media all and (min-width: 1024px){
	body { 
		font-size: 1.5em; 
	}
	.btn-responsive{
		padding: 4px 8px;
	}
}
@media all and (max-width: 1023px) and (min-width: 640px){
	body { 
		font-size: 1.325em; 
	}
	.btn-responsive{
		font-size: 1em; 
		padding: 3px 6px;
	}
	.inlineFlag{
		height: 14px;
	}
}
@media all and (max-width: 639px){
	body { 
		font-size: 1em; 
	}
	.btn-responsive{
		font-size: 1.125em; 
		padding: 2px 4px;
	}
	.inlineFlag{
		height: 10px;
	}
}