@charset "utf-8";
/* CSS Document */
body {
	background-color: #000;
	color: #FFF;
}
div, button {
	display:block;
}
#intro, .instructions {
	width:50%;
}
@font-face {
	font-family: scaryFont;
	src: url("Future TimeSplitters.otf");
}
normal {
	font-family: 'Sans';
	font-size:24px;
	font-weight:bold;
}
scary, .scary, button {
	font-family: scaryFont;
	font-size:24px;
}
#playerList {
	display:block;
	position:fixed;
	right:0px;
	top: 5px;
	width:50%;
}
select {
	width: 100%;
//	min-width: 80px;
}
.popup {
	position:absolute;
	background: #333;
	border: #666 1px solid;
	border-radius: 10px;
	left:50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 150px;
	height: 70px;
	padding: 10px;
}
.popup button {
	display: inline-block;
}
.popup input {
	width:90%;
}

.player {
	background-color: #666;
	transition: background-color 0.25s ease-out;
	border: #000 1px solid;
	color: #FFF;
	font-family: scaryFont;
	font-size:24px;
	padding:0px 10px;
}
.player:hover {
	background-color: #444;
}
.player span {
	padding:0px 10px;
}
.player #statusAlien {
	background-image: url(icons/alien_EstebanSandoval.svg);
	background-size: 22px 26px;
}
.player #statusPatrolled {
	background-image: url(icons/patrolled_MikeWirth.svg);
	background-size: 30px 30px;
}
.player #statusDead {
	background-image: url(icons/dead_JuanPabloBravo.svg);
	background-size: 30px 25px;
}
.player #statusCured {
	background-image: url(icons/cured_icon54.svg);
	background-size: 20px 26px;
}
.player #statusShot {
	background-image: url(icons/shot_AmrFakhri.svg);
	background-size: 20px 26px;
}
.player #statusInfected {
	background-image: url(icons/infected_MarizioFusillo.svg);
	background-size: 20px 26px;
}
.player #role {
	color: #000;
	position: absolute;
	right:10px;
//	padding:0px 10px;
}
.player .status {
	visibility:hidden;
}
#artBy {
	position: fixed;
	bottom: 0px;
	font-size: 9px;
}