@font-face {
	font-family: "PF Ronda Seven";
	src: url('../fonts/pf_ronda_seven/pf_ronda_seven.eot');
	src: url('../fonts/pf_ronda_seven/pf_ronda_seven.eot?#iefix') format('embedded-opentype'),
	url('../fonts/pf_ronda_seven/pf_ronda_seven.woff2') format('woff2'),
	url('../fonts/pf_ronda_seven/pf_ronda_seven.woff') format('woff'),
	url('../fonts/pf_ronda_seven/pf_ronda_seven.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

* {
	font-family: "PF Ronda Seven", Verdana, Geneva, Arial, Helvetica, sans-serif;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: pixelated;
	-ms-interpolation-mode: bicubic;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 0;
	padding: 0;
	border: none;
	cursor: url("../imgs/cursor.cur"), auto;
}

li {
	list-style: none outside none;
}

textarea, pre, input[type=text], input[type=password], .selectable {
	-webkit-user-select: text;
	-khtml-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
	cursor: url("../imgs/text.cur.png"), text;
}

pre {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

body {
	background-color: #000000;
}

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 14px;
}

::-webkit-scrollbar-thumb {
    background-image: url(../imgs/main_ui/scroll_bar.png);
    image-rendering: pixelated;
    background-repeat: repeat-y;
    background-size: contain;
    background-color: transparent;
}

.emoteDescDiv
{
    font-size: 14px;
    margin-top: 4px;
    color: #959595;
}

.highlightSpan
{
    color: #aeff85;
}

.mute2
{
    width: 24px !important;
    height: 24px !important;
    background-image: url(../imgs/btn_normal.png) !important;
}

#lpd
{
	position: absolute;
    top: 100px;
    width: 60%;
    left: 20%;
    border: 6px solid #16170e;
}

#lpd button
{
	position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 45px;
    cursor: pointer;
    font-size: 28px;
    text-align: end;
    vertical-align: sub;
    display: flex;
    align-content: stretch;
    flex-direction: column-reverse;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: stretch;
}

#lpd img
{
	width: 100%;
}

.hover {
	position: absolute;
	top: 0;
	left: 0;
	background-clip: padding-box;
	pointer-events: none;
	z-index: 2;
	display: none;
	width: calc(100% - 32px);
	height: calc(100% - 32px);
	border: 16px solid;
	-webkit-border-image: url("../imgs/main_ui/hover_light.png") 8 8 8 8 repeat;
	-moz-border-image: url("../imgs/main_ui/hover_light.png") 8 8 8 8 repeat;
	-o-border-image: url("../imgs/main_ui/hover_light.png") 8 8 8 8 repeat;
	border-image: url("../imgs/main_ui/hover_light.png") 8 8 8 8 repeat;
}

.hover.lite {
	width: calc(100% - 24px);
	height: calc(100% - 24px);
	-webkit-border-image: url("../imgs/main_ui/hover_light_lite.png") 6 6 6 6 repeat;
	-moz-border-image: url("../imgs/main_ui/hover_light_lite.png") 6 6 6 6 repeat;
	-o-border-image: url("../imgs/main_ui/hover_light_lite.png") 6 6 6 6 repeat;
	border-image: url("../imgs/main_ui/hover_light_lite.png") 6 6 6 6 repeat;
	border-width: 12px 12px 12px 12px;
}

.center {
	position: absolute;
	left : 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.hint {
	position: absolute;
	display: block;
	background-image: url("../imgs/hint.png");
	width: 16px;
	height: 16px;
}

*:hover > .hover {
	display: block;
}

textarea {
	resize: none;
}

input, button, textarea, select
{
	border: 3px solid #262918;
	background: rgba(232,239,185,0.6);
	color: #5B6339;
}

textarea:focus, input:focus {
	outline: none;
}

input[type=text], input[type=password]
{
	font-size: 20px;
}

.watchRepLink
{
	color: #76e353 !important;
	font-size: 8px;
}

.pseudoLink
{
	text-decoration: underline;
}

.pseudoLink:hover
{
	color: white;
	text-shadow: 0 0 3px #353a20;
	cursor: pointer;
}

#modeSwitchDiv
{
	position: absolute;
	top: 124px;
	right: 56px;
	text-align: center;
	font-size: 16px;
	width: 140px;
	height: 60px;
	line-height: 60px;
}

#modeSwitchDiv span
{
	display: inline-block;
	vertical-align: middle;
	line-height: normal;
}

#modeSwitchLeft
{
	position: absolute;
	top: 130px;
	right: 200px;
}

#modeSwitchRight
{
	position: absolute;
	top: 130px;
	right: 20px;
}

#backButtonPlInfo
{
	position: absolute;
	bottom: 12px;
	right: 12px;
}

#canvas
{
	position: relative;
	margin: 0;
	padding: 0;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	/*z-index: -5000;*/
}

html, body
{
	overflow: hidden;
    color: white;
}

button:hover
{
	border-color: #F9FFCF;
}

button
{
	padding: 5px;
	margin: 2px;
	font-weight: 900;
	font-size: 22px;
}

#serverSelect
{
	position: absolute;
	bottom: 22px;
	left: 34px;
	font-size: 24px;
	max-width: 150px;
}

#serverState
{
	position: absolute;
	bottom: 80px;
	left: 40px;
	font-size: 12px;
	width: 120px;
}

#serverInfo
{
	position: absolute;
	bottom: 10px;
	width: 100%;
	text-align: center;
	margin: 0;
}

.green2
{
	color: #36b517;
	text-shadow: 0 0 3px #24290f;
}

#playerNameInput, #playerPwInput
{
	width: 190px;
}

.red
{
	color: #900000;
}

.infoDiv
{
	display: none;
	position: absolute;
	border: 3px solid #C0C5A2;
	background: #6B7242;
	padding: 6px;
	color: #EFF1E4;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	z-index: 999999;
}

.backButton
{
	position: absolute;
	top: 12px;
	right: 12px;
}

#optionsWindow
{
	position: absolute;
	top: 100px;
	left: 50%;
	width: 600px;
	height: 500px;
	margin-left: -300px;
	display: none;
	padding: 10px;
	text-align: center;
	font-size: 24px;
	image-rendering: pixelated;
	transform-origin: top center;
}

#optionsWindow td
{
	padding: 0 4px;
}

.hatname
{
	margin: -36px 0 -5px 0;
	font-size: 14px;
}

.hatname2
{
	position: absolute;
	left: 96px;
	top: 10px;
	font-size: 12px;
	right: 2px;
}

.ab_canvas
{
	position: absolute;
	left: 10px;
	top: 10px;
}

.mainPMButtons
{
	position: absolute;
	left: 104px;
	right: 2px;
	top: 46px;
}

#hatsInner
{
	overflow: auto;
	height: 84%;
	margin-top: 16px;
}

#abilities_inner
{
	overflow: auto;
	position: absolute;
	bottom: 30px;
	top: 120px;
	right: 20px;
	left: 10px;
}

#mapSettings
{
	position: absolute;
	left: 20px;
	top: 70px;
	font-size: 16px;
}

#games_inner
{
	overflow: auto;
	position: absolute;
	top: 140px;
	left: 20px;
	right: 20px;
	bottom: 150px;
}

#games_inner div
{
	float: left;
}

#games_inner p
{
	margin: 2px;
	text-shadow: none;
	font-size: 11px;
}

.map_title
{
	font-size: 1em !important;
}

.mapButtonActive
{
	background: #606943;
}

.mapButtonActive p
{
	color: white;
}

#startGameButton
{
	position: absolute;
	bottom: 20px;
	right: 20px;
}

#maps_inner
{
	overflow: auto;
	height: 78%;
	margin-top: 62px;
	margin-right: 8px;
}

.currentHat
{
	border: 4px solid #FFFF90 !important;
}

#team1header td
{
	background: #FF6B6B;
}

#team2header td
{
	background: #6060FF;
}

.minW150
{
	min-width: 150px;
}

.minW80
{
	min-width: 80px;
}

#statsDivWrapper
{
	text-align: center;
	position: absolute;
	width: 100%;
}

#statsDiv
{
	margin: 100px auto;
	text-align: center;
	display: none;
	width: 50%;
	background: rgba(255, 255, 255, 0.2);
	padding: 10px;
	z-index: 9;
	font-size: 1em;
	line-height: 18px;
}

#statsDiv table
{
	margin: 10px auto;
	border-spacing: 0;
}

.playingPlayerTR td
{
	background: rgba(255, 255, 255, 0.3);
}

.statsDivTitleTR td
{
	border-bottom: 2px solid white;
}

.ignoreButton
{
	font-size: .7em;
	padding: 1px 6px;
	margin: 0;
	border: 2px solid black;
}

#redTeamButton
{
	margin: 8px;
	background: #FF6B6B;
	color: #923E3E;
	font-size: 1.5em;
}

#blueTeamButton
{
	margin: 8px;
	background: #6060FF;
	color: #37379C;
	font-size: 1.5em;
}

#spectateButton
{
	margin: 8px;
	font-size: 1.5em;
}

.w120
{
	width: 120px;
}

.w200
{
	width: 220px;
}

#optionsButton
{
	background-image: url("../imgs/options2.png");
}

#playerListButton
{
	background-image: url("../imgs/star.png");
}

#clanListButton
{
	background-image: url("../imgs/clans.png");
}

#faqButton
{
	background-image: url("../imgs/faq.png");
}

#playerListTable
{
	margin: 20px auto;
	font-size: 17px;
}

.headTR td
{
	padding: 0 10px 0 10px;
	font-size: 21px;
	padding-bottom: 10px;
}

.member button
{
	font-size: 11px;
	padding: 0px 2px;
	border: 2px solid #282b1b;
}

.smallerButton
{
	font-size: 11px;
}

#pageSystem, #pageSystem button
{
	font-size: 12px;
	padding: 3px;
}

#cookie_div
{
	position: absolute;
	bottom: 0;
	text-align: center;
	width: 100%;
	background: #5d653a;
	padding-bottom: 10px;
	padding-top: 10px;
}

.basicTable
{
	font-size: 20px;
}

.basicTable button
{
	padding: 0 10px;
	margin: 0 10px;
}

.mapSizeInput
{
	width: 70px;
}

#mapSettingsCloseButton
{
	position: absolute;
	right: 10px;
	bottom: 10px;
}

.menuButton
{
	width: 58px;
	height: 64px;
	border: none;
	background: none;
	background-size: cover;
}

.menuButton:hover
{
	background-color: rgba(255, 255, 255, 0.9);
}

.hatButton
{
	background: url("../imgs/tile.png");
	background-size: 60px 60px;
	background-position: -35px -20px;
	color: white;
	padding: 10px 0 0 10px;
	position: relative;
	width: 120px;
	height: 130px;
	background-clip: padding-box;
	outline: none;
}

/**
* Used in the old UI
*/
.hatButtonOld
{
	margin: 6px;
	background: url("../imgs/tile.png");
	background-size: 80px 80px;
	background-position: -32px -20px;
	color: white;
	padding: 0 0 10px 0;
	border: 4px solid #393E25;
	position: relative;
	width: 180px;
	height: 180px;
}

.hatButtonGrey
{
	margin: 6px;
	background: url("../imgs/tile-grey.png");
	background-size: 80px 80px;
	background-position: -32px -20px;
	color: #777777;
	padding: 0;
	border: 4px solid #1D1D1D;
	position: relative;
	width: 172px;
	height: 172px;
	display: inline-table;
	text-shadow: none;
}

.hatButtonGrey:hover
{
	border: 4px solid #1D1D1D;
}

.ability_button
{
	margin: 6px;
	padding: 5px;
	background: url("../imgs/ability-button-bg.png");
	background-size: 50px;
	color: white;
	border: 4px solid #393E25;
	position: relative;
	float: left;
	text-shadow: 0 0 3px #000000;
	min-width: 260px;
	min-height: 220px;
}

.plusbutton
{
	color: #598a1b;
}

.minusbutton
{
	color: #8e0c0c;
}

.ability_button:not(.has_ability)  .atts_container
{
	opacity: 0.4;
}

.ability_button:not(.has_ability) .btn_ab_putdown {
	display: none;
}

.ability_button.has_ability .btn_ab_setup {
	display: none;
}

.atts_container_inner
{
	position: absolute;
	left: 0;
	top: 0;
	left: 0;
	right: 0;
	display: none;
	height: 100%;
}

.ability_button:not(.has_ability) .atts_container_inner
{
	display: block;
}

.profileSmaller
{
	font-size: 18px;
}

.killMsg, .killMsg *
{
	vertical-align: bottom;
}

.killMsg {
	margin-top: 5px;
}

#ab_pts_display
{
	position: absolute;
	top: 40px;
	right: 80px;
	font-size: 12px;
	color: #ffff8d;
	text-shadow: 0 0 3px #000000;
}

#abilityMsg
{
	position: absolute;
	top: 30px;
	left: 30px;
	width: 300px;
	font-size: 12px;
	color: #dc0000;
	text-shadow: 0 0 3px #000000;
	text-align: left;
}

.atts_container
{
	font-size: 11px;
	margin-top: 100px;
	text-align: left;
	position: relative;
}

.atts_container button
{
	height: 26px;
	font-size: 9px;
	padding: 0 5px;
}

.blackWindow
{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.5);
	display: none;
}

.filledRect
{
	background: #225412;
	margin: 1px;
	border: 2px solid white;
	width: 8px;
	height: 12px;
	display: inline-block;
}

.emptyRect
{
	background: #c3c3c3;
	margin: 1px;
	border: 2px solid white;
	width: 8px;
	height: 12px;
	display: inline-block;
}

.header
{
	margin: 20px;
	font-size: 20px;
}

.header2
{
	margin-top: 20px;
	font-size: 30px;
}

.options_h2
{
	font-size: 16px;
	margin-bottom: -4px;
	margin-top: 6px;
}

.yellow
{
	color: #ffff84;
	text-shadow: 0 0 3px #000000;
}

#abilities_description
{
	font-size: 11px;
	margin: 10px;
}

.hotkeySubDiv
{
	font-size: 12px;
}

.hotkeySubDiv button
{
	font-size: 18px;
	padding: 4px 10px;
}

.member
{
	font-size: 9px;
}

.authLevelName
{
	font-size: 8px;
	color: #cc0000;
}

#applyStateDiv
{
	color: #440000;
	font-size: 16px;
	margin: 14px;
}

#memberListDiv
{
	position: absolute;
	top: 100px;
	bottom: 30px;
	left: 20px;
	right: 20px;
	overflow: auto;
}

.closeButton
{
	position: absolute;
	top: 12px;
	right: 12px;
	width: 50px;
	height: 50px;
}

.underline
{
	text-decoration: underline;
}

#mainKillMsg, #mainKillMsg2
{
	position: absolute;
	bottom: 17%;
	left: 0;
	width: 100%;
	font-size: 2.0em;
	text-align: center;
	height: 100px;
	vertical-align: super;
	pointer-events: none;
}

#mainKillMsg span, #mainKillMsg2 span, #mainKillMsg canvas, #mainKillMsg2 canvas
{
	opacity: 0;
	animation-fill-mode: forwards;
	font-weight: bold;
}

#mainKillMsg2
{
	bottom: 25%;
}

#chatInputDiv
{
	display: none;
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: 20%;
	pointer-events: none;
	z-index: 100000;
}

#chatlog
{
	display: none;
	width: 50%;
	text-align: left;
	position: absolute;
	bottom: 20%;
	margin-bottom: 50px;
	top: 100px;
	left: 25%;
	overflow: auto;
	line-height: 20px;
}

#chatloginner
{
	position: absolute;
	bottom: 0;
	left: 10px;
	max-height: 96%;
	width: 96%;
	overflow: auto;
	line-height: 20px;
}

#chatInput
{
	font-size: 1em;
	width: 50%;
	border: 3px solid white;
	background: black;
	color: white;
}

#chatDisplayDiv
{
	position: absolute;
	bottom: 2%;
	overflow: hidden;
	pointer-events: none;
}

#killsDisplayDiv
{
	position: absolute;
	left: 6px;
	top: 135px;
	overflow: hidden;
	pointer-events: none;
}

.chatMsg {
	margin-top: 5px;
}

.chatMsg, .chatMsg *
{
	animation-name: fadeOut0;
	animation-delay: 9s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

#unlockDiv
{
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 999999;
	display: none;
	background: rgba(0, 0, 0, 0.7);
	text-align: center;
}

#unlockDivInner
{
	background: black;
	width: 400px;
	height: 300px;
	margin: 100px auto;
	border: 4px solid white;
	position: relative;
	transform-origin: top center;
}

#lvlUpDiv1
{
	margin-top: 100px;
	font-size: 36px;
}

#lvlUpDiv2
{
	font-size: 20px;
}

#lvlUpDiv3
{
	font-size: 20px;
	position: absolute;
	bottom: 20px;
	width: 100%;
}

#unlockCloseButton
{
	position: absolute;
	top: 10px;
	right: 10px;
	border: 3px solid white;
	color: white;
	background: black;
}

#unlockCanvas
{
	margin-top: 30px;
	margin-bottom: -60px;
}

.buySkinButton
{
	position: absolute;
	bottom: 5px;
	width: 160px;
	left: 50%;
	margin-left: -80px;
	color: #262917;
	font-size: 16px;
	background: #abb389;
}

.disabled_button
{
	color: black;
	background: grey;
	border: 4px solid #1d1d1d;
}

.disabled
{
	filter: grayscale(1);
}

.disabled_button:hover
{
	border: 4px solid #1d1d1d;
}

.green
{
	color: green;
}

.fontSize20px
{
	font-size: 20px;
}

.ability_blocked *
{
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	opacity: 0.5;
}

.blocker
{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.active_ability_buy_button
{
	-webkit-filter: grayscale(0%);
	filter: grayscale(0%);
	opacity: 1;
	pointer-events: auto;
}

#playerGold
{
	font-size: 26px;
}

#playerGoldWrap
{
	margin-top: 20px;
}

#playerGoldWrap *
{
	vertical-align: middle;
}

#getMoreGoldButton
{
	display: none;
	font-size: 18px;
	background: #bdc48e;
	margin: 0;
}

#goldImg
{
	width: 32px;
	margin-right: 14px;
}

.buy_button_price
{
	color: rgb(255, 255, 157);
}

.buy_button
{
	font-size: 15px;
}

.legalDiv
{
	background: rgba(255, 255, 255, 0.2);
	padding: 4px;
	margin-top: 6px;
	font-size: 11px;
}

.inactive_textarea
{
	resize: none;
	background: rgba(255, 255, 255, 0.1);
	color: black;
	text-shadow: 0 0 2px #99A261;
}

.textarea
{
	width: 350px;
	height: 160px;
	font-weight: bold;
	font-size: 13px;
	padding: 8px;
}

.inactive_input
{
	resize: none;
	background: none;
	color: black;
	text-shadow: 0 0 2px #99A261;
	border: none;
}

.clan_name_input
{
	width: 150px;
	font-weight: bold;
	text-align: center;
}

.invis
{
	display: none;
}

#faqDiv
{
	font-size: 16px;
	margin: 20px;
}

.highlighted
{
	color: #ff8484;
	text-shadow: 0 0 3px #000000;
}

#reddit_link
{
	width: 92px;
	height: 80px;
	background: url("../imgs/reddit-logo.png");
	position: absolute;
	top: 120px;
	right: -112px;
	background-size: 100%;
	border: 4px solid white;
}

#fb_link
{
	width: 80px;
	height: 80px;
	background: url("../imgs/fb-logo.png");
	position: absolute;
	top: 220px;
	right: -100px;
	background-size: 100%;
	border: 4px solid white;
}
/*
#hat_button_main
{
	position: absolute;
	left: 24px;
	top: 24px;
	margin: 0;
}
*/
#abilities_div
{
	position: absolute;
	left: 240px;
	top: 24px;
	width: 200px;
	padding: 0;
}

#ability_button_main
{
	width: 180px;
	height: 130px;
	/*border: 4px solid #444;*/
	/*margin: 0;*/
    background: #222;
}

#quickPlayButton
{
	position: absolute;
	top: 60px;
	right: 50px;
	font-size: 30px;
	height: 60px;
	background: #bf2626;
	color: #ffffff;
	padding: 0 12px;
}

#nameInput
{
	position: absolute;
	right: 180px;
	top: 62px;
	font-size: 30px;
	width: 260px;
	height: 52px;
}

#nameInput2
{
	position: absolute;
	right: 160px;
	top: 50px;
	font-size: 26px;
	width: 270px;
	overflow: hidden;
}

#welcome
{
	font-size: 20px;
	margin-bottom: -10px;
}

#welcomeName
{
	overflow: hidden;
	height: 50px;
	width: 430px;
}

/*#logState
{
	position: absolute;
	right: 50px;
	top: 20px;
	font-size: 20px;
}*/

#gamesDiv
{
	position: absolute;
	right: 20px;
	left: 460px;
	top: 200px;
	bottom: 100px;
	overflow: auto;
}

#mainGamesTable
{
	text-align: center;
	margin: 0;
	border-spacing: 3px;
	font-size: 14px;
	width: 100%;
}

#mainGamesTable td
{
	background: rgba(152, 158, 107, 0.24);
}

#mainGamesTable td button
{
	font-size: 14px;
	height: 26px;
	font-variant: small-caps;
}

#buttonsDiv
{
	position: absolute;
	bottom: 20px;
	left: 20px;
	right: 20px;
	text-align: center;
}

#buttonsDiv button
{
	font-size: 18px;
}

#playLabel
{
	position: absolute;
	font-size: 14px;
	text-shadow: 0 0 3px #b7bf7b;
	top: 130px;
	left: 480px;
	right: 250px;
}

#divLabel
{
	font-size: 12px;
	position: absolute;
	top: 210px;
	left: 30px;
	width: 180px;
	text-shadow: 0 0 3px #b7bf7b;
}

#abilitiesLabel
{
	font-size: 12px;
	text-shadow: 0 0 3px #b7bf7b;
	padding: 6px;
}

.onlyreg
{
	font-size: 12px;
}

.pixelated
{
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: pixelated;
}

.faqTips {
	color: #c0c461;
	font-size: 14px;
	line-height: 1.8;
	width: 600px;
    margin: 10px auto;
    text-align: left;
}

.faqTips a {
	color: #fff;
}

@keyframes textInGreen
{
	0% {opacity: 0;}
	1% {opacity: 0.6;}
	6% {opacity: 0.9;}
	50% {opacity: 0.9;}
	53% {opacity: 0.0;}

	0% { text-shadow: 0.15em 0.15em rgba(0, 0, 0, 0.4); }
	3% { text-shadow: 0em 0em 0.5em #36FF36; }
	6% { text-shadow: 0.15em 0.15em rgba(0, 0, 0, 0.5); }
}

@keyframes textInBlue
{
	0% {opacity: 0;}
	1% {opacity: 0.6;}
	6% {opacity: 0.9;}
	50% {opacity: 0.9;}
	53% {opacity: 0.0;}

	0% { text-shadow: 0.15em 0.15em rgba(0, 0, 0, 0.4); }
	3% { text-shadow: 0em 0em 0.5em #95A6F0; }
	6% { text-shadow: 0.15em 0.15em rgba(0, 0, 0, 0.5); }
}

@keyframes textInRed
{
	0% {opacity: 0;}
	1% {opacity: 0.6;}
	6% {opacity: 0.9;}
	50% {opacity: 0.9;}
	53% {opacity: 0.0;}

	0% { text-shadow: 0.15em 0.15em rgba(0, 0, 0, 0.4); }
	3% { text-shadow: 0em 0em 0.5em #FF3232; }
	6% { text-shadow: 0.15em 0.15em rgba(0, 0, 0, 0.5); }
}

@keyframes textInGrey
{
	0% {opacity: 0;}
	1% {opacity: 0.6;}
	6% {opacity: 0.9;}
	50% {opacity: 0.9;}
	53% {opacity: 0.0;}

	0% { text-shadow: 0.15em 0.15em rgba(0, 0, 0, 0.4); }
	3% { text-shadow: 0em 0em 0.5em #D2D2D2; }
	6% { text-shadow: 0.15em 0.15em rgba(0, 0, 0, 0.5); }
}

@keyframes rankUp
{
	0% {color: white;}
	50% {color: #30FF00;}
	100% {color: white;}

	0% { text-shadow: 0.15em 0.15em rgba(0, 0, 0, 0.4); }
	50% { text-shadow: 0em 0em 0.4em #30FF00; }
	100% { text-shadow: 0.15em 0.15em rgba(0, 0, 0, 0.4); }
}

@keyframes rankDown
{
	0% {color: white;}
	50% {color: red;}
	100% {color: white;}

	0% { text-shadow: 0.15em 0.15em rgba(0, 0, 0, 0.4); }
	50% { text-shadow: 0em 0em 0.4em red; }
	100% { text-shadow: 0.15em 0.15em rgba(0, 0, 0, 0.4); }
}

@keyframes fadeOut0
{
	0% {opacity: 1;}
	100% {opacity: 0;}
}

@keyframes fadeOut
{
	0% {color: rgba(255, 255, 255, 1);}
	100% {color: rgba(255, 255, 255, 0);}
}

@keyframes fadeIn
{
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes fadeOut2
{
	100% {opacity: 0;}
	0% {opacity: 1;}
}

@keyframes shine
{
	0% { text-shadow: 0 0 15px #FFEF94; }
	50% { text-shadow: 0 0 40px #FFEF94; }
	100% { text-shadow: 0 0 15px #FFEF94; }
}

#adContainer
{
	position:fixed;
    left: 50%;
    bottom: 40px;
    margin-left: -364px;
    width:728px;
    height:90px;
    display: none;
}

.fullscreen-bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .8);
}

#playerProfileScreen .nameColorContainer > .changeNameColor {
	margin: 10px auto;
	display: block;
	text-transform: uppercase;
}

#nameColor {
	width: 400px;
	z-index: 100000;
}

#nameColor > .close {
	z-index: 10;
}

#nameColor .content {
	padding: 20px 0;
}

#nameColor .content > div {
	padding: 6px 0;
	text-align: center;
}

#nameColor .content > div.selected {
	background-color: #363;
}

#nameColor .content > div.can-select:hover {
	background-color: #666;
}

#nameColor .content > div.invalid {
	opacity: 0.2;
}

#betaMsg
{
	position: absolute;
	top: -60px;
    line-height: 120%;
}

#clanSearchTable td
{
	padding: 4px;
	font-size: 14px;
}

#ladderDiv
{
	background: url("../imgs/btn_ladder.png");
	background-size: cover;
	position: absolute;
	left: 5px;
	top: 80px;
	width: 240px;
	height: 152px;
	text-align: center;
	transform-origin: top left;
}

#ladderDiv:hover
{
	background: url("../imgs/btn_ladder_hover.png");
	background-size: cover;
}

#ladderDivInner1
{
	font-size: 30px;
	color: #ffe5a6;
}

#ladderDivInner2
{
	font-size: 20px;
	margin-top: 4px;
}

#ladderDivInner3
{
	font-size: 24px;
	margin-top: -16px;
}

#ladderDivInner4
{
	font-size: 12px;
	margin-top: 10px;
	color: #ffe5a6;
}

#ladderList
{
	width: 600px;
    z-index: 99999;
    text-align: center;
}

#ladderList table
{
	width: 100%;
}

#ladderList td
{
	text-align: center;
}

#ladderList .title
{
    font-size: 22px;
    margin-bottom: 12px;
    color: #6a694e;
}

#slayTV
{
	position: absolute;
	width: 200px;
	height: 320px;
	bottom: 10px;
	left: -205px;
	background-image: url("../imgs/slayTVBG.png");
}

.slayTV_hover:hover
{
    outline: none;
    border-color: #ffec5b;
    box-shadow: 0 0 14px #ffec5b;
}

#slayTV_title
{
	position: absolute;
    width: 180px;
    height: 80px;
    top: -47px;
    left: 11px;
	background-image: url("../imgs/slaytvGIF.gif");
}

#slayTV_content
{
	position: absolute;
	top: 38px;
	left: 13px;
	right: 13px;
	bottom: 7px;
    overflow: hidden;
    font-size: 10px;
}

#slayTV_content p
{
	font-size: 20px;
	margin-top: 50px;
}

#slayTV_content div:hover
{
	background-color: rgba(255, 255, 255, 0.1);
}



/* New stuff */
[type="checkbox"] + label
{
	position: absolute;
}
[type="checkbox"]
{
	position: relative;
	left: 15px;
	top: -4px;
	display: none;
}
[type="checkbox"] + label::before
{
	width: 24px;
    height: 24px;
    border-image: url(../imgs/main_ui/standard_field.png) 3 4 6 3 repeat;
    display: block;
    content: "";
    float: left;
    margin-right: 5px;
    z-index: 5;
    position: absolute;
    border-width: 6px 8px 12px 6px;
    border-style: solid;
    margin-right: 5px;
}
[type="checkbox"]:checked + label::before
{
	background-image: url(../imgs/main_ui/icon_checked_new.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0px;
}

#optionsDiv
{
    width: 600px;
    height: 504px;
    margin: 100px auto;
    border-image: url(../imgs/main_ui/frame_popup.png) 10 10 10 10 repeat;
    border-width: 20px 20 20 20;
    border-style: solid;
	background-color: #262626;
	color: #919191;
	position: relative;
}

.optionsSubDiv
{
	float: left;
    margin: 10px;
    width: 280px;
    height: 56px;
}
.optionsSubDiv label
{
	line-height: 2;
	width: 250px;
}

.spaceSpan
{
	width: 48px;
    display: inline-block;
}

.popupTitle
{
	margin: -59px auto;
    width: 200px;
    margin-bottom: 5px;
    border-image: url(../imgs/main_ui/frame_wnd_title.png) 14 11 15 11 repeat;
    border-style: solid;
    border-width: 28px 22px 32px 22px;
    height: 0px;
    text-align: center;
    font-size: 26px;
    line-height: 0;
}

.optionsButton
{
	background-image: url(../imgs/main_ui/btn_normal_h.png);
    width: 246px;
    height: 54px;
    display: inline-block;
    text-align: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    font-size: 18px;
    font-weight: bold;
    color: #c2c5a7;
    background-color: #262626;
}

.popupWndCloseBtn
{
	position: absolute;
	top: -48px;
    right: -24px;
}

.popupWndCloseBtn img
{
	width: 60px;
}

.popupWndCloseBtn .hoverLight
{
	display: none;
	width: calc(26px);
	height: calc(28px);
}

.popupWndCloseBtn:hover .hoverLight
{
	display: block;
}

.popupBG
{
	height: 100%;
    width: 100%;
    background-color: #00000052;
    position: absolute;
}

.labelButton:hover .hover, .F-Button:hover .hover, .item:hover .hover, .label:hover .hover
{
	display: block;
}

.standardTooltipContainer
{
	display: none;
}

.hasTooltip:hover .standardTooltipContainer.active
{
	display: block;
}

#confirm .F-Button.yes {
    margin-left: 100px;
}