.letter {
    width: 3ex;
    display: inline-block;
    text-align: center;
}

.letter:hover {
    background-color: lightgray;
}

.keytab, .keyentry {
    width: 2.8ex;
    height: 2.5ex;
    display: inline-block;
    text-align: center;
    vertical-align: bottom;
    border: 0.2ex solid lightgray;
}

.keyentry:hover, .cipher:hover {
    background-color: lightgray;
}


span.cipher {
	font-family: monospace;
	display: inline-block;
	width: 26px;
	text-align: center;
	border-bottom: 1px solid black;
	margin: 2px;
	overflow: hidden;
}

span.morse {
	font-family: monospace;
	display: inline-block;
	width: 10px;
	height: 1.0em;
	overflow: hidden;
}

.morse2 {
	font-family: monospace;
	display: inline-block;
	height: 1.5em;
	letter-spacing: 0em;
	width: 3.1em;
	text-align: center;
}

span.plain {
	font-family: monospace;
	display: inline-block;
	width: 10px;
	height: 1.5em;
	vertical-align: top;
}

span.mark {
	font-family: monospace;
	display: inline-block;
	width: 1.4ex;
}

div.bgroup {
	float:left;
	margin-right: 5px;
}

div.bgroup2 {
	margin: 0 auto;
	width: 20px;
}

.button {
    margin-left: 2em;
}

.state {
    margin-left: 1em;
    font-size: 0.7em;
    font-weight: normal;
}