html {
	font-family: sans-serif;
}
label input[type=radio] {
	display: none;
}
p {
	margin: 4px 0;
	padding: 0;
}
input[type="radio"] + span, button {
	display: inline-block;
	padding: 0.7em 1.5em;
	margin: 0.1em;
	text-align: center;
	
	border-radius: 3px;
	border: 1px solid #BCE8F1;
	
	color: #31708F;
	background-color: #D9EDF7;
}
#overlay button {
	font-size: 2em;
}
input[type="radio"]:checked + span, button:active {
	border-color: #428BCA;
	color: #FFF;
	background-color: #428BCA;
}

input[type='range'] {
	-webkit-appearance: none !important;
	background: #D9EDF7;
	height: 1em;
}
input[type='range']::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	background: #428BCA;
	height: 1.5em;
	width: 10px;
}

.range {
	border-collapse: collapse;
}
.range td {
	padding: 0.5em;
	min-width: 2em;
}
.range input[type="range"] {
	width: 100%;
}

.results {
	width: 100%;
	text-align: left;
	border-radius: 3px;
}

.results {
	border: 1px solid #428BCA;
	border-spacing: 0;
}
.results th {
	color: #FFF;
	background-color: #428BCA;
	
	padding: 2px 5px;
}
.results td {
	padding: 2px 5px;
	border-right: 1px solid #D9EDF7;
}
.results tr td:last-child {
	border-right: 0;
}

.results tbody tr:nth-child(2) {
	background-color: #D9EDF7;
}

div#overlay {
	display: none;
	overflow: scroll;
	
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	
	background: white;
}