body {
	font-family: arial;
	margin: 0;
}

.header {
    font-size: 125%;
    font-weight: bold;
}

.buttonrow {
	padding-left: 0.5em;
	padding-bottom: 2em;
}

.buttonrow label {
	padding: 0.5em;
	font-size: 115%;
	margin-right: 0.5em;
}

.placesbuttonrow {
	max-width: 86%;
	overflow-wrap: break-word;
	line-height: 3em;
}

.linklist {
	line-height: 200%;
}

.linklist span {
	padding-right: 2em;
}

.buttonarea {
	padding-bottom: 0.5em;
	background: linear-gradient(to bottom, #d0d0d0, #ffffff 100%);
}

.grapharea {
	width: 100%;
}

.transparentWhileLoading {
	transition-duration: 0.5s;
	transition-property: opacity;
	opacity: 0;
}

.easein {
	transition-duration: 1s;
	transition-property: opacity;
	opacity: 1;
}

a {
	padding: 0.5em;
	border: 1px;
	text-decoration-color: #aaf;
	-webkit-text-decoration-color: #aaf;
}

a:hover {
	background-color: #ffff00;
	border-radius: 5px;
}

:root {
	--unselgradient1: #e0e0e0;
	--selgradient1: #0050d0;
	--highgradient1: #0060e0;

	--unselgradient2: #b0b0b0;
	--selgradient2: #0080ff;
	--highgradient2: #00a0ff;
}

input[type="radio"] {
	display: none;
}

input[type="radio"] + label {
	border: 1px solid #666;
	border-radius: 4px;
	color: #000;
	background: linear-gradient(to bottom, var(--unselgradient1), var(--unselgradient2) 100%);
	/*background: var(--unselgradient1);*/
	box-shadow: 1px 1px 1px 1px #c0c0c0;
	transition: background 1s, color 0.5s;
}

input[type="radio"]:checked + label {
	color: #fff;
	/*background: linear-gradient(to bottom, var(--selgradient1), var(--selgradient2) 100%);*/
	background: var(--selgradient1);
}

input[type="radio"]:hover + label:hover {
	color: #fff;
	/*background: linear-gradient(to bottom, var(--highgradient1), var(--highgradient2) 100%);*/
	background: var(--highgradient1);
}

#webcam img {
	max-width: 828px;
}