@charset "utf-8";
/* CSS Document */

* {
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size:22px;
}

body {
	background-color: #eee;
	height:100vh;width:100vw;
	overflow:hidden;
	margin:0;padding:0;
}

p { margin:0; padding:0; }
.red { color:#AF0002; }
.amber { color:#D57200; }
.green { color:#2A9600; }
.blue { color:#0077d6; }

p.button { 
	display:inline-block;
	padding:3px 20px;
	border:1px solid black;
	background-color:#a9a9a9;
	font-size:20px;
}
p.button:hover { 
	cursor: pointer;
	color:white;
	background-color:#444;
}

div#controltag { position:absolute;top:0px;width:50px;height:50px;background-color:#ffffff80;z-index:99;display:none; cursor:pointer; }
div#controltag img { width:32px; padding:10px; }

div#controls { 
	position:absolute; z-index: 1;
	padding:0;margin:0; height:100%; width:100%;
}
div#controls.overlaymode { 
	width:400px; height:600px;
	border:2px solid black;
	background-color:#0000003d;
}
div#controls div { padding:20px; }
div#controls div p { margin:10px 0; }

span.connectiondelay { display:none; }

div#waitingroom { padding:0 20px; }
div#waitingroom span.name { display:block; }
div#waitingroom span.time { color:#666; font-size:20px; }
div#waitingroom span.link img { width:24px; vertical-align:bottom; padding-left:5px; cursor:pointer; }

div.chatcontainer {
	padding:5px;
	border: 1px solid black;
	height:150px;
}
div.chatcontainer input { width:calc(100% - 180px); padding:2px 10px; }
div.chatcontainer span.chatbutton { 
	display: inline-block;
	width:100px;
	border:1px solid black;
	text-align: center;
	margin-left:top;
	cursor:pointer;
	padding:2px 20px; margin-left:10px;
}
div.chatcontainer span.chatbutton:hover { background-color:#444; color:white; }

div.chatcontainer div#chatcontents, div.chatcontainer span.chatcontents {
	padding:0; margin-top:10px;
	overflow-y: scroll;
	height:calc(100% - 30px);
}