body
	{
	position: relative;
	color: #fff;
	font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	}

.backdrop
	{
	position: fixed;
	z-index: -1;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #707070;
	color: rgba(0,0,0,.04);
	background: -webkit-linear-gradient(top, #363636 0%, #666666 19%, #9c9c9c 49%, #666666 88%, #363636 100%);
	background: linear-gradient(to bottom, #363636 0%,#666666 19%,#9c9c9c 49%,#666666 88%,#363636 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#363636), color-stop(19%,#666666), color-stop(49%,#9c9c9c), color-stop(88%,#666666), color-stop(100%,#363636)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #363636 0%,#666666 19%,#9c9c9c 49%,#666666 88%,#363636 100%); /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #363636 0%,#666666 19%,#9c9c9c 49%,#666666 88%,#363636 100%); /* IE10+ */
	/* 
	text-shadow: 0px 0px 32px rgba(255,255,255,.15), 32px 32px 32px rgba(0,0,0,.2);
	*/
	}

.game
	{
	box-sizing: content-box; 
	width: 400px;
	height: 400px; 
	outline: none; 
	background: #222; 
	border: 1px solid #fff;
	box-shadow: inset 4px 4px 4px rgba(255,255,255,.5), 10px 10px 10px rgba(0,0,0,.5);
	}

.fps
	{
	display:block; 
	font-size: 14px; 
	color: #FFF;	
	}

.enter-name
	{
	display: none;
	box-sizing: content-box;
	position: absolute; 
	outline: none; 
	background: rgba(0,0,0,.5);
	z-index: 1;
	font-size: 22px;
	}

.enter-name .box
	{
	position: absolute;
	top: 30%;
	left: 10%;
	width: 80%;
	padding-bottom: 15px;
	background: rgba(0,0,0,.5);
	border: 2px solid #000;
	border-radius: 16px;
	background: -webkit-linear-gradient(top, rgba(54,54,54,1) 0%, rgba(102,102,102,1) 19%, rgba(156,156,156,1) 49%, rgba(102,102,102,1) 88%, rgba(54,54,54,1) 100%);
	background: linear-gradient(to bottom, rgba(54,54,54,1) 0%, rgba(102,102,102,1) 19%, rgba(156,156,156,1) 49%, rgba(102,102,102,1) 88%, rgba(54,54,54,1) 100%);
	box-shadow: inset 2px 2px 2px rgba(255,255,255,.85), 16px 16px 8px rgba(0,0,0,.75);
	text-shadow: 1px 1px rgba(0,0,0,1);
	font-weight: bold;
	text-align: center;
	overflow: hidden;
	}

.enter-name .title
	{
	position: relative;
	margin: 0px 0px 15px 0px;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	font-size: 175%;
	color: #fff;
	text-shadow: -1px 0px #333, -1px 1px #444, 0px 1px #444, 1px 1px #444, 1px 0px #444, 1px -1px #333, 0px -1px #333, -1px -1px #333,
				 -2px 0px #333, -2px 2px #444, 0px 2px #444, 2px 2px #444, 2px 0px #444, 2px -2px #333, 0px -2px #333, -2px -2px #333,
				 -3px 0px #333, -3px 3px #444, 0px 3px #444, 3px 3px #444, 3px 0px #444, 3px -3px #333, 0px -3px #333, -3px -3px #333;
	box-shadow:  inset 0px -4px 4px rgba(0,0,0,.5), inset 0px 4px 4px rgba(255,255,255,.5), 0px 2px 2px rgba(255,255,255,.75);
	background-image: -webkit-repeating-linear-gradient(135deg, rgba(0,0,0,1), rgba(0,0,0,1) 25px, rgba(150,100,0,1) 25px, rgba(255,200,50,1) 50px);
	background-image: repeating-linear-gradient(-45deg, rgba(0,0,0,1), rgba(0,0,0,1) 25px, rgba(150,100,0,1) 25px, rgba(255,200,50,1) 50px);
	}

.enter-name .close
	{
	display: block;
	position: absolute;
	top: 2px;
	right: -29%;
	width: 35px;
	height: 35px;
	border: 2px solid #333;
	border-radius: 50%;
	background-color: #d00000;
	outline: none;
	box-shadow: inset 2px 2px 2px rgba(255,255,255,.75), inset -2px -2px 2px rgba(0,0,0,.5);
	text-shadow: -1px 0px #333, -1px 1px #444, 0px 1px #444, 1px 1px #444, 1px 0px #444, 1px -1px #333, 0px -1px #333, -1px -1px #333, 2px 2px rgba(0,0,0,.5);
	background-image: url('img/icon-close.png'); background-size:55% 55%; background-repeat: no-repeat; background-position: center;
	}
.enter-name .close:active
	{
	border: 2px solid #fff;
	box-shadow: inset 2px 2px 2px rgba(0,0,0,.5), inset -2px -2px 2px rgba(255,255,255,.75);
	}

.enter-name .body
	{
	width: 90%;
	line-height: .95;
	padding: 5px 5% 5px 5%;
	text-transform: uppercase;
	margin-bottom: 10px;
	text-shadow: -1px 0px #333, -1px 1px #444, 0px 1px #444, 1px 1px #444, 1px 0px #444, 1px -1px #333, 0px -1px #333, -1px -1px #333,
				 -2px 0px #333, -2px 2px #444, 0px 2px #444, 2px 2px #444, 2px 0px #444, 2px -2px #333, 0px -2px #333, -2px -2px #333;
	overflow-y: auto;
	}

.enter-name input
	{
	display: block;
	text-indent: 8px;
	width: 37%;
	margin: 0px 30% 10px 30%;
	padding: 4px;
	border-radius: 6px;
	border: 2px solid #666;
	font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	box-shadow: inset 2px 2px 2px rgba(0,0,0,.5), 2px 2px 2px rgba(255,255,255,.85);
	font-size: inherit;
	}

.enter-name button
	{
	display: block;
	color: #000;
	width: 40%;
	margin: 0 30% 5px 30%;
	bottom: 16px;
	padding: 4px;
	border-radius: 12px;
	border: 2px solid #444;
	font-weight: bold;
	text-shadow: 1px 1px #fff;
	font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	box-shadow: inset -4px -4px 4px rgba(0,0,0,.5), inset 4px 4px 4px rgba(255,255,255,.85), 8px 8px 6px rgba(0,0,0,.5);
	font-size: inherit;
	}

.enter-name button:active
	{
	box-shadow: inset -4px -4px 4px rgba(0,0,0,.5), inset 4px 4px 4px rgba(255,255,255,.85), 2px 2px 2px rgba(0,0,0,.5);
	}

.enter-name .tooltip
	{
	display: none;
	position: absolute;
	width: 50%;
	left: 25%;
	padding: 5px;
	font-size: 85%;
	border: 2px solid rgba(0,0,0,1);
	border-radius: 8px;
	color: #000;
	text-align: left;
	text-shadow: 1px 1px #fff;
	background: rgba(215,215,215,1);
	box-shadow: inset -2px -2px 2px rgba(0,0,0,.5), 16px 16px 8px rgba(0,0,0,.75);
	}

.enter-name table
	{
	width: 100%;
	border-spacing: 0px 2px;
	border-collapse: separate;
	box-shadow: inset 8px 4px 8px rgba(0,0,0,.35), -2px -2px 2px rgba(0,0,0,.5), 2px 2px 2px rgba(255,255,255,.5);
	}

.enter-name td
	{
	padding: 4px;
	white-space: nowrap;
	}

.enter-name tr
	{
	cursor: pointer;
	background-color: rgba(255,255,255,.2);
	}
.enter-name tr:nth-child(odd)
	{
	background-color: rgba(0,0,0,.075);
	}
.enter-name tr:first-child
	{
	background-image: -webkit-linear-gradient(90deg, rgba(150,100,0,1) 0%, rgba(255,200,50,1) 100%);
	background-image: linear-gradient(0deg, rgba(150,100,0,1) 0%, rgba(255,200,50,1) 100%);
	}
tr.current-rank
	{
	background-color: rgba(255,175,0,.4) !important;
	}

.enter-name .ranksign
	{
	z-index: -1;	
	display: none;
	position: absolute;
	width: 20%;
	height: 20%;
	left: 40%;
	top: 15%;
	border-radius: 50%;
	font-size: 450%;
	color: #fff;
	text-align: center;
	font-weight: bold;
	background-image: -webkit-linear-gradient(90deg, rgba(150,100,0,1) 0%, rgba(255,200,50,1) 100%);
	background-image: linear-gradient(0deg, rgba(150,100,0,1) 0%, rgba(255,200,50,1) 100%);
	border: 2px solid #000;
	text-shadow: -1px 0px #333, -1px 1px #444, 0px 1px #444, 1px 1px #444, 1px 0px #444, 1px -1px #333, 0px -1px #333, -1px -1px #333,
				 -2px 0px #333, -2px 2px #444, 0px 2px #444, 2px 2px #444, 2px 0px #444, 2px -2px #333, 0px -2px #333, -2px -2px #333,
				 -3px 0px #333, -3px 3px #444, 0px 3px #444, 3px 3px #444, 3px 0px #444, 3px -3px #333, 0px -3px #333, -3px -3px #333;
	box-shadow:  inset 0px -8px 8px rgba(0,0,0,.5), inset 0px 8px 8px rgba(255,255,255,.5), 0px 0px 24px rgba(255,255,255,1), 0px 0px 16px rgba(255,255,255,1);
	}