body, html { height: 100%; }
body { padding: 1em; }

div#questAlphabet {
	font-size: 4em;
}

div#questAlphabet span {
	font-family: monospace;
}

div#questAlphabet span.questCharacter {
	display: block;
	float: left;
	width: 1.5em;
	height: 1.5em;
	font-weight: 700;
	border: solid 0.1ex;
	text-align: center;
	margin-right: 1ex;
}

/*div#questAlphabet span {*/

div#keyboardMap {
	font-size: 2.5em;
	text-align: center;
	width: 70%;
	float: left;
}

#keyboardMap div {
	margin: 0.5ex;
}

#keyboardMap span {
	background-color: grey;
	display: inline-block;
	border: black outset 0.2ex;
        width: 1em;
}

div#keyboardMap span.leftHand.foreFinger { background-color: #FF0; }
div#keyboardMap span.leftHand { background-color: #FF8; }

div#keyboardMap span.rightHand.foreFinger { background-color: #F55; }
div#keyboardMap span.rightHand { background-color: #FAA; }

div#keyboardMap span.hint, div#keyboardMap span.hint.foreFinger {
	background-color: white;
}

div#keyboardMap span.press, div#keyboardMap span.press.foreFinger {
	color: white;
	background-color: #444;
}

div#chat {
	background-color: #DDD;
	float: left;
	height: 100%;
	overflow-y: scroll;
}

span.right{
	border-bottom: green solid 0.4ex;
}

span.wrong{
	border-bottom: red solid 0.4ex;
}

span.cursor{
	border-bottom: grey solid 0.2ex;
}

#character {
	display: none;
}

#inputBar {
	position: fixed;
	bottom: 0;
	right: 0;
}

hr {
	margin-top: 2em;
	border: 0.2ex solid;
}

#menu {
	text-align: right;
	padding-right: 1em;
}