index.css

/*
.class {
	key: value;
}
#id {
	key: value;
}
*/

html {
height: 100%;
}

body {
	width: calc(100% - 0.3em);
	margin: 0 auto;
	/*border: solid #2F4F7A 0.15em;*/
	font-family: helvetica;
	font-weight: 600;
	font-size: small;
	background-color: white;
	color: black;
	height: calc(100% - 0.25em);	/* weird. works on Nexus 5. */
	-moz-box-sizing: border-box;
}

.logo {
	width: 50%;
	margin: 0 auto;
}

.form-group {
	width: 100%;
	height: 4em;
	margin: 0 auto;
	overflow: auto;
	font-size: x-large;
}

.button-container {
	width: 50%;
	/*margin: 0 auto;*/
	height: 100%;
}

.button {
	background-color: #2F4F7A;
	color: white;
	border: solid gray 0.15em;
	height: calc(100% - 0.3em);	/* ugly, but such is the way of css. */
	vertical-align: middle;
	text-align: center;

	overflow: hidden;
	position: static;
}

.left {
	float: left;
}

.right {
	float: right;
}

.bottom-left {
	display: table-cell;
	vertical-align: bottom;
	float: left;
}

.top-left {
	display: table-cell;
	vertical-align: top;
	float: left;
}

.top-right {
	display: table-cell;
	vertical-align: top;
	float: right;
}

.bottom-right {
	display: table-cell;
	vertical-align: bottom;
	float: right;
}

.invisible {
	display: none;
}
/*
.controller-container {
	border: solid black 1px;
}
*/

canvas {
	border: solid black 1px;
}

td {
	/*border: solid black 1px;*/
}

#data-container {
	margin: 1%;
}

.red {
	color: red;
}

.green {
	color: green;
}

.yellow {
	color: yellow;
}