* {
	max-width: 100%;
}
html, body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100%;
	background-image: linear-gradient(180deg, #ffffff, #aaaaaa);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2vmin;
}

.TXT_C { text-align: center; }
.TXT_R { text-align: right; }


.BOX_PlayerWell {
	position: absolute;
	margin: 0;
	padding: 0;
	background-color: rgba(64, 200, 64, .5);
}
	#BOX_PlayerWell_0, #BOX_PlayerWell_2 {
		left: 25vw;
		width: 50vw;
		height: 25%;
	}
	#BOX_PlayerWell_0 {
		top: 75%;
	}
	#BOX_PlayerWell_2 {
		top: 0;
	}
	#BOX_PlayerWell_1, #BOX_PlayerWell_3 {
		top: 25%;
		width: 25vw;
		height: 50%;
	}
	#BOX_PlayerWell_3 {
		left: 0;
	}
	#BOX_PlayerWell_1 {
		left: 75vw;
	}

	
.BOX_CardWell {
	position: absolute;
	margin: 0;
	padding: 0;
}
	#BOX_PlayerWell_0 .BOX_CardWell.Tall, #BOX_PlayerWell_2 .BOX_CardWell.Tall {
		width: 24%;
		height: 34%;		
	}
	#BOX_PlayerWell_0 .BOX_CardWell.Wide, #BOX_PlayerWell_2 .BOX_CardWell.Wide {
		width: 48%;
		height: 29%;		
	}
	#BOX_PlayerWell_1 .BOX_CardWell.Tall, #BOX_PlayerWell_3 .BOX_CardWell.Tall {
		width: 34%;
		height: 24%;
	}
	#BOX_PlayerWell_1 .BOX_CardWell.Wide, #BOX_PlayerWell_3 .BOX_CardWell.Wide {
		width: 29%;
		height: 48%;		
	}
	#BOX_CenterCourt .BOX_CardWell.Tall {
		width: 18%;
		height: 18%;
	}

	
.BOX_Card {
	display: block;
	border: .25vw solid #000000;
	border-radius: 1vmin;
	width: calc(100% - .5vw);
	height: calc(100% - .5vw);
	background-color: #ffffff;
	text-align: center;
	font-size: 5vmin;
	font-weight: bold;
	text-decoration: none;
	transition: border-color 1s, color 1s;
}
	a.BOX_Card {
		border-color: rgba(64, 64, 128, 1) !important;
		background-color: rgba(128, 170, 255, .8) !important;
	}
		a.BOX_Card:hover {
			background-color: rgba(128, 170, 255, 1) !important;
		}
	.BOX_Card.Black {
		border-color: #00000;
		color: #000000;
	}
	.BOX_Card.Red {
		border-color: #ff0000;
		color: #ff0000;
	}
	.BOX_Card.Blue {
		border-color: #0000ff;
		color: #0000ff;
	}
	.BOX_Card.Active {
		background-color: #ffff00;
	}
	.BOX_Card.Win {
		background-color: #aaffaa;
	}
	.BOX_Card.Lose {
		background-color: #ffaaaa;
	}
	
.LAB_CardName {
	padding: 1vmin;
	border-radius: 1vmin;
	text-align: center;
	background-color: #eeeeee;
	color: #666666;
	font-size: 1.5vmin;
	font-weight: bold;
}
	
	
#BOX_CenterCourt {
	position: absolute;
	margin: 0;
	padding: 0;
	left: 25vw;
	top: 25%;
	width: 50vw;
	height: 50%;
	background-color: #ffffff;
}
#BOX_Feedback {
	position: absolute;
	left: 0;
	bottom: 0;
	margin: 0;
	padding: 1vw;
	width: calc(100% - 2vw);
	background-color: #669999;
	color: #ffffff;
	font-weight: bold;
	font-size: 4vmin;
	text-align: center;
}


#BOX_Logo {
	position: absolute;
	margin: 0;
	padding: 5vmin;
	left: 0;
	top: 0;
	width: calc(25vw - 10vmin);
	height: calc(25% - 10vmin);
	background-color: rgba(200, 255, 200, .5);
	text-align: center;
}
	#BOX_Logo img {
		max-width: 100%;
		max-height: 100%;
	}
#BOX_Scoreboard {
	position: absolute;
	margin: 0;
	padding: 0;
	left: 75vw;
	top: 0;
	width: 25vw;
	height: 25%;
	background-color: rgba(200, 255, 200, .5);
	color: #000000;
}
#BOX_Leaderboard {
	padding: 1vmin;
	font-size: 3.5vh;
}
#BOX_Actions {
	position: absolute;
	margin: 0;
	padding: 5vmin;
	left: 75vw;
	top: 75%;
	width: calc(25vw - 10vmin);
	height: calc(25% - 10vmin);
	background-color: rgba(200, 255, 200, .5);
	text-align: center;	
}
	#BOX_Actions .BTN_Action {
		margin-top: 5px;
		padding: 2vmin;
		border: 5px solid #0000ff;
		border-radius: 2vmin;
		background-color: #ffffff;
		color: #0000ff;
		font-weight: bold;
		font-size: 5vmin;
		text-decoration: none;
		white-space: nowrap;
	}
		#BOX_Actions .BTN_Action:hover {
			background-color: #cccccc;
		}