html {
	text-align: center;
	background-color: #1c1c1c;
	color: #f6f6f6;
	font-family: Helvetica;
}

input, select {
	border: 0px;
	background-color: #767676;
	color: #f6f6f6;
	padding-left: 4px;
	width: 100%;
	margin-bottom: 1px;
}

.winPrecentage {
	font-size: .7em;
	margin-top: 8px;
}

h1 {
	font-size:.8em;
}

.mapName {
	color:gray;text-decoration:none;
}

.mapName:hover {
	color: white;
}

#voidUserID {
	display: inline-block;
	width: auto;
}

.teamServer {
	position: absolute;
	bottom: 2px;
	right: 0px;
	left: 0px;
	text-align: center;
	font-size: .3em;
	color: rgba(255,255,255,.8);
}

#chat {
	width: 400px;
	display: inline-block;
	background-color: white;
	border: 1px solid black;
	height: 300px;
	position: relative;
	color: black;
	text-align: left;
	padding-left: 5px;
}

#chatInput {
	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 0px;
}

#progressBar {
	background-color: #77ee9f;
	height: 20px;
	width: 0px;
	position: absolute;
}

#progressDIV {
	width: 200px;
	border: 1px solid #535353;
	margin: auto;
	margin-top: 3px;
	overflow: visible;
	position: relative;
	height: 20px;
}

.nameplate {
	position: absolute;
	right: 3px;
	bottom: 0px;
	opacity: .8;
}

.selectedMap {
	background-color: rgba(44, 178, 71, 0.59) !important;
	color: white !important;
}

disabled {
	background-color: red;
}

.map {
	display: inline-block;
	margin: 10px;
	background-color: rgba(128, 128, 128, 0.09);
	padding: 10px;
	text-align: center;
	color: gray;
	font-size: .6em;
}

.map h1 {
	font-size: 1.4em;
	color: rgb(221, 221, 221);
}

.map img {
	height: 100px;
}

#selectMap {
	margin: auto;
	margin-bottom: 10px;
}

#mapID {
	font-size: 1.2em;
	vertical-align: middle;
	width: auto;
}

.nameplateProfile {
	border: 1px solid black;
	display: inline-block;
	margin-right:10px;
	vertical-align:middle;
}

.nameplateProfile:hover {
	background-color: #739a8a;
}

.nameplateSelected {
	background-color: #739a8a;
	border: 2px solid green;
}

#sendMessage {
	background-color: #242424;
	padding: 4px;
	cursor: pointer;
	display: inline-block;
	border: 1px solid gray;
	font-size: .6em;
	vertical-align: middle;
}

#sendMessage:hover {
	background-color: #1f6e48;
}

#loginDIV, #registrationDIV {
	display: inline-block;
	vertical-align: top;
	margin: 10px;
	background-color: #242424;
	padding: 10px;
	box-shadow: 0px 0px 15px #131313;
	border-radius: 10px;
}

#matchmakingStats {
	margin-top: 4px;
	font-size: .7em;
	color: gray;
	
}

#profileOptionsUpdates {
	margin-top: 5px;
	color: #92ff92;
	font-size: .7em;
	display: none;
}

#profileOptionsUpdates2 {
	margin-top: 5px;
	color: #92ff92;
	font-size: .7em;
	display: none;
}

#orDIV {
	display: inline-block;
	margin: 40px 10px 0px 10px;
	font-size:.6em;
	color: #767676;
}

.button {
	display: block;
	width: 100%;
	background-color: #242424;
	padding: 4px;
	box-shadow: 0px 0px 15px #131313;
	border-radius: 10px;
	margin-top:10px;
	cursor: pointer;
}

.button:hover {
	background-color: #1f6e48;
}

.error {
	border: 1px solid red;
	display: block;
}

label  {
	border: none !important;
	color: #f35151;
	font-size:.7em;

}
	
.loading {
	display: none;
	margin: auto;
	width: 15px;
}

#loginError {
	font-size:.7em;
	color: #f35151;
}

#logoutButton {
	margin-left: 50px;
	background-color: #242424;
	padding: 4px;
	width: 100px;
	cursor: pointer;
	display: inline-block;
	border: 1px solid gray;
}

#logoutButton:hover {
	background-color: #1f6e48;
}

#logo img {
	max-width: 100%;
}

#time {
	position: fixed;
	bottom: 4px;
	right: 4px;
	font-size: .7em;
	color: #f6f6f6;
}
	
#menu {
	background-color: #242424;
	padding: 4px;
	box-shadow: 0px 0px 15px #131313;
	font-size: 1.5em;
	margin-bottom: 20px;
}

#myInfo {
	background-color: #353535;
	display: inline-block;
	padding:4px 15px 4px 15px;
	margin-left: 20px;
	
}

#startMatchmakingButton {
	width: 500px;
	height: 55px;
	max-width: 100%;
	background-color: #257414;
	color: white;
	padding: 15px;
	font-size: 3em;
	margin: auto;
	margin-top: 2px;
	border-radius: 10px;
	cursor: pointer;
	text-shadow: 0px 0px 5px black;
	box-shadow: 0px 0px 30px black;
}

#startMatchmakingButton:hover {
	background-color: #43a82d;
}

#startOFMButton {
	width: 500px;
	height: 55px;
	max-width: 100%;
	background-color: #C7B825;
	color: white;
	padding: 15px;
	font-size: 3em;
	margin: auto;
	margin-top: 2px;
	border-radius: 10px;
	cursor: pointer;
	text-shadow: 0px 0px 5px black;
	box-shadow: 0px 0px 30px black;
}

#startOFMButton:hover {
	background-color: #F2E02B;
}
	
#success {
	z-index: 2;
	background-color: #5aba40;
	text-align: center;
	padding: 5px;
	color: white;
	font-weight: bold;
}

#error {
	z-index: 2;
	background-color: #8b1313;
	text-align: center;
	padding: 5px;
	color: white;
	font-weight: bold;
}

#startMatchmakingDIV {
	background-image: url(../images/bg.gif);
	background-repeat: no-repeat;
	background-position: center center;
	height:600px;
	padding-top:50px;
}

#joinedPlayersDIV {
	display: inline-block;
	vertical-align: top;
	margin-top: 7px;

}

.joinedPlayerDIV {
	background-color: green;
	padding: 6px;
	margin-bottom: 2px;
}

.openSpotDIV {
	background-color: #2d2d2d;
	padding: 6px;
	margin-bottom: 2px;
	font-size: .8em;
	color: #a5a5a5;
}

.playerNumber {
	font-size: .7em;
	float: left;
	display: inline-block;
	color: #595959;
}

#leaveMatchmakingButton {
	width: 300px;
	max-width: 100%;
	background-color: #b92727;
	color: white;
	padding: 4px;
	font-size: .8em;
	margin: auto;
	margin-top: 10px;
	border-radius: 3px;
	cursor: pointer;
	text-shadow: 0px 0px 5px black;
	box-shadow: 0px 0px 5px black;
}

#leaveMatchmakingButton:hover {
	background-color: #f15757;
}

#gameDetails {
	display: inline-block;
	vertical-align: top;
	margin-left: 50px;
	margin-right: 50px;
}

#gameDetails img {
	width: 370px;
	max-width: 100%;
}

#serverName {
	font-size: .5em;
	display: inline-block;
	color: #17e96b;
}

.team {
	display: inline-block;
	vertical-align: top;
	margin-top:50px;
	padding: 10px;
	width: 350px;
}

#blueTeam {
	background-color: #4220d4;
}

#redTeam {
	background-color: #c41a1a;
}

#neutralTeam {
	background-color: #4E4E4E;
}

.teamPlayer {
	background-color: rgba(0, 0, 0, 0.1);
	padding: 6px;
	margin-bottom: 2px;
	font-size: 1.6em;
	color: white;
	text-shadow: 0px 0px 5px black;
	position: relative;
	height: 35px;
	padding-top: 10px;
}

.teamPlayer .rank {
	position: absolute;
	left: 2px;
	margin-top: -10px;
}

#groupInfo {
	margin-top: 20px;
}

#joinGroupButton {
	background-color: #2c8b1a;
	color: white;
	padding: 4px;
	padding-left: 20px;
	padding-right: 20px;
	font-size: 2em;
	border-radius: 3px;
	cursor: pointer;
	text-shadow: 0px 0px 5px black;
	box-shadow: 0px 0px 5px black;
	margin: auto;
	text-decoration: none;
}
#joinGroupButton:hover {
	background-color: #40b22a;
}

#profileOptionsDIV {
	background-color: rgba(0,0,0,.1);
	margin-top: 20px;
	padding: 10px;
}

#profilePosition {
	width: 200px;
	font-size: 1.5em;
	margin-right: 75px;
}

#profileServer {
	width: 200px;
	font-size: 1.5em;
	
}

#groupLink {
	font-size: 3em;
	margin: auto;
	margin-top: 20px;
	text-align: center;
	background: none;
	color: rgb(44, 44, 44);
}

#reportWinnerDIV {
	margin-top: 20px;
	padding: 10px;
	background-color: rgba(0,0,0,.1);
}

#reportBlueTeamWonButton {
	padding: 5px;
	background-color: #4220d4;
	display: inline-block;
	margin: 5px;
	cursor: pointer;
}

#reportRedTeamWonButton {
	padding: 5px;
	background-color: #c41a1a;
	display: inline-block;
	margin: 5px;
	cursor: pointer;
}

#reportVoidButton {
	padding: 5px;
	background-color: gray;
	display: inline-block;
	margin: 5px;
	cursor: pointer;
}

#reportVoidButton:hover {
	background-color: #8b8b8b;
}

#reportBlueTeamWonButton:hover {
	background-color: #5d3bec;
}

#reportRedTeamWonButton:hover {
	background-color: #ec3b3b;
}

#reportWinnerUpdates {
	font-size: .7em;
	color: #79f28a;
}

.selectedTeam {
	border: 2px solid #38f741;
}

.profileLink {
	text-decoration: none;
	color: white;
	font-weight: bold;
}

.profileLink:hover{
	color: gray;
}

.inGameprofileLink {
	text-decoration: none;
	color: white;
}

.inGameprofileLink:hover{
	color: gray;
}

#gameDescription {
	font-size: .8em;
	color: gray;
	margin-bottom: 5px;
}

.menuItem {
	text-decoration: none;
	color: gray;
	cursor: pointer;
	margin-left: 25px;
}

.menuItem:hover {
	color: #f15252;
}

.selected {
	color: #d63939;
}

.leaderboardTable {
	margin: auto;
	display: inline-block;
	margin-right: 20px;
	background-color: rgba(0,0,0,0.1);
	padding: 10px;
}

.gameSample {
	background-color: rgba(0,0,0,0.5);
	text-align: center;
	margin: auto;
	cursor: pointer;
	width: 50%;
	border-bottom: 2px solid #1c1c1c;
}

#recentGames {
	background-color: rgba(0,0,0,0.1);
	width: 500px;
	text-align: center;
	margin: auto;
	border-collapse: collapse;
}

#matchmakingOpens {
	font-size: 5em;
	color: #818d85;
	text-shadow: 0px 0px 25px black;
}

#search {
	width: 250px;
	height: 50px;
	font-size: 1.4em;
	vertical-align: middle;
	background-color: #313131;
	cursor: text;
}

input::-webkit-input-placeholder {
	color: #464646;
}

#extendButton {
	padding: 5px;
	background-color: #505050;
	display: inline-block;
	cursor: pointer;
	font-size: 1.2em;
	color: white;
}
#extendButton:hover {
	background-color: #1f6e48;
}

#autoKickDIV {
	color: gray;
	font-size: .9em;
}

#autoKickSpan {
	font-weight: bold;
	font-size: 1.1em;
}

#matchmakingCloses {
	font-size: .7em;
	color: gray;
	margin-top: 4px;
}

#gameCountdown {
	margin-top: 5px;
	font-size: 1.5em;
}

.gameSample:hover {
	background-color: #1f6e48;
}

.gameSampleDate {
	font-size: .7em;
	color: gray;
}

.circleDot {
	height: 8px;
	width: 8px;
	margin-right: 3px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	display: inline-block;
}

.circleDot.online {
	background-color: green;
}
.circleDot.away {
	background-color: #edda3b;
}
.circleDot.gone {
	background-color: #edac3b;
}
.circleDot.offline {
	background-color: red;
}

.gameSampleWon {
	margin-left: 20px;
	color: green;
	font-size: .6em;
}

.gameSampleLoss {
	margin-left: 20px;
	color: red;
	font-size: .6em;
}

.leaderboardRank {
	color: gray
}

.leaderboardRankTop10 {
	color: #dcd179;
}

.leaderboardName {
	text-decoration: none;
	color: rgb(224, 224, 224);
}

.leaderboardName:hover {
	color: gray;
}