@font-face {
	font-family: 'Headers';
	src: 	url('assets/fonts/Cornerstone.woff') format('woff'),
		url('assets/fonts/Cornerstone.ttf')  format('truetype');
}
@font-face {
	font-family: 'Main';
	src: 	url('assets/fonts/Simplifica.woff') format('woff'),
		url('assets/fonts/Simplifica.ttf')  format('truetype');
}

html {
	padding:0px;
	margin:0px;
}
body {
	padding:0px;
	margin:0px;
	background-color:#499474;
	font-family:Main,Verdana,Tahoma,Arial;
	font-size:30px;
}
h1 {
	padding:0px;
	margin:0px;
	font-family:Headers,Verdana,Tahoma,Arial;
	font-size:75px;
	text-align:center;
	color:#FFFFFF;
}
h2 {
	padding:0px;
	margin:0px;
	font-size:40px;
	text-align:center;
}
#subtitle {
	margin-top:-18px;
	text-align:center;
	margin-bottom:10px;
	font-size:28px;
	color:#FFFFFF;
	padding-right:10px;
}
p {
	margin:0px;
	padding:0px;
}
a {
	color:#0055AA;
}
input[type=text] {
	width:100%;
	border-radius:4px;
	border: solid 1px #AAAAAA;
	padding: 6px;
	font-size:30px;
	font-family:Main,Verdana,Tahoma,Arial;
}
input[type=text]:focus {
	border: solid 1px #0055AA;
	box-shadow: 0px 2px 9px -5px #000000;
}
.button {
	display:inline-block;
	cursor:pointer;
	-webkit-user-select:none;
	-moz-user-select:none;
	user-select:none;
	border:none;
	width:100%;
	border-radius:4px;
	box-sizing:border-box;
	color:#FFFFFF;
	background-color:#009944;
	padding: 6px;
	font-size:30px;
	text-align:center;
	font-family:Main,Verdana,Tahoma,Arial;
	box-shadow: 0px 3px 8px -6px #000000;
}
.button:hover {
	background-color:#007729;
	font-family:Main,Verdana,Tahoma,Arial;
	box-shadow: 0px 1px 6px -3px #000000;
}

#mainMenu {
	position:fixed;
	width:100%;
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
}
#game {
	position:fixed;
	top:0%;
	width:100%;
	height:100%;
}
.strip {
	position:relative;
	display:inline-block;
	top:0%;
	width:300px;
}
.invisipanel {
	position:relative;
	display:inline-block;
	top:0%;
	width:300px;
}
.panel {
	position:relative;
	display:block;
	margin-bottom:10px;
	margin-right:10px;
	padding:10px;
	background-color:#FFFFFF;
	border-radius:5px;
	overflow:auto;
	box-shadow: 0px 2px 5px -3px #000000;
}
.seep {
	z-index:3000;
	position:absolute;
	width:100%;
	height:100%;
	text-align:center;
	display:none;
}
.ui {
	opacity:0;
}

#plates {
	z-index:2;
	position:absolute;
	width:100%;
	height:100%;
	text-align:center;
	pointer-events:none;
}
.plate {
	position:absolute;
	background-color:#000000;
	color:#FFFFFF;
	border-radius:4px;
	padding:0px 3px;
	font-size:20px;
	max-width:200px;
	overflow:hidden;
	text-overflow: ellipsis;
}
#levelBubble {
	position:absolute;
	margin-top:10px;
	left:10px;
	width:100px;
	height:100px;
}
#levelText {
	display:inline-block;
	color:#E6EC42;
	height:70px;
	margin:-85px 0px;
	font-size:64px;
	font-weight:bold;
	padding:0px 9px;
}
#health {
	position:absolute;
	margin-top:30px;
	left:97px;
	width:30%;
	height:30px;
	background-color:#EAE0C6;
	border-radius:3px;
	box-shadow:0px 2px 5px -3px #000000;
	text-align:right;
}
#healthInner {
	 height:26px;
	 margin-top:-30px;
	 width:100%;
	 left:0%;
	 background-color:#D31915;
	 border-bottom:solid 4px #9C0D18;
	 border-radius:2px;
	 box-shadow:0px 0px 5px -2px #FF0000;
}
#healthText {
	display:inline-block;
	color:#FFFFFF;
	height:22px;
	margin:4px 0px;
	background-color:rgba(0,0,0,.5);
	font-size:22px;
	border-radius:25px;
	padding:0px 9px;
	margin-right:4px;
}

#experience {
	position:absolute;
	margin-top:73px;
	left:97px;
	width:30%;
	height:16px;
	background-color:#493830;
	border-radius:3px;
	box-shadow: 0px 2px 5px -3px #000000;
	text-align:right;
}
#experienceInner {
	height:12px;
	margin-top:-16px;
	width:0%;
	background-color:#E6EC42;
	border-bottom:solid 4px #A4E32B;
	border-radius:2px;
	box-shadow:0px 0px 3px 1px #A4E32B;
}
#experienceText {
	display:inline-block;
	color:#FFFFFF;
	height:16px;
	margin:0px 0px;
	background-color:rgba(0,0,0,.5);
	border-radius:10px;
	padding:0px 9px;
	line-height:16px;
	font-size:18px;
	margin-right:4px;
}
#leaderboard {
	position:fixed;
	right:2px;
	top:2px;
	background-color:#282224;
	border-radius:5px;
	width:220px;
	font-size:20px;
	color:#FFFFFF;
	text-align:left;
	padding-top:5px;
}
.leaderboardRow {
	display:inline-block;
	width:100%;
	margin-bottom:5px;
}
.leaderboardRow:nth-child(even) {
	background-color:#1D1A1C;
}
.leaderboardNumber {
	margin-left:5px;
	display:inline-block;
	height:1em;
	max-height:1em;
	width:20px;
	overflow:hidden;
}
.leaderboardName {
	display:inline-block;
	max-width:185px;
	height:1em;
	max-height:1em;
	overflow:hidden;
	text-overflow: ellipsis;
}