* {
	font-family: inherit;
	font-weight: inherit;
	font-style: inherit;
	text-align: left;
	font-size: inherit;
	color: inherit;
	background-color: transparent;
}
body {
	font-size: 16px;
}
@media all and (max-width: 40em) { body { font-size: 15px; } }
@media all and (max-width: 36em) { body { font-size: 14px; } }
@media all and (max-width: 33em) { body { font-size: 13px; } }
@media all and (max-width: 30em) { body { font-size: 12px; } }
@media all and (max-width: 27em) { body { font-size: 11px; } }
@media all and (max-width: 24em) { body { font-size: 10px; } }

html {
	min-height: 100%;
	overflow-y: scroll;
	background: #eef;
	font-family: "DejaVu Serif", "Nimbus Serif", "Bitstream Vera Serif", "Verdana", sans-serif;
	color: #000;
	display: flex;
	justify-content: center;
}
body {
	margin: 0;
	padding: 1em 1em 3em;
	width: 100%;
	max-width: 50rem;
	outline: 0.3em dotted #ccf;
}
code, kbd, pre, textarea {
	font-family: monospace;
	font-size: 80%;
}
.nowrap {
	white-space: nowrap;
}
ul.valit > li {
	margin-bottom: 1em;
}
#logo, h1, h2, h3 {
	color: #336;
	border-bottom: 0.1em dotted #ccf;
	text-shadow: #99c 1px 1px 0;
	font-weight: bold;
	padding: 0;
	margin: 1em 0;
}
#logo {
	margin-top: 0.2em;
	font-size: 200%;
}
h1 {
	font-size: 160%;
}
h2 {
	font-size: 125%;
}
h3 {
	font-size: 100%;
}
p, ul.nav {
	padding: 0;
	margin: 1em 0;
}
ul.nav li {
	list-style-type: none;
	display: inline;
}
ul.nav li:before {
	content: ' | ';
}
ul.nav li:first-child:before {
	content: '';
}
a {
	text-decoration: underline;
	font-weight: bold;
	color: #339;
}
a:link:hover {
	text-decoration: none;
	color: #669;
	text-shadow: #99c 1px 1px 0;
}
input, button:active, textarea {
	border-color: #99c #aae #aae #99c;
	background-color: #dde;
}
button {
	border-color: #aae #99c #99c #aae;
	background-color: #dde;
	padding-top: 2px;
	padding-bottom: 2px;
}
fieldset.submit {
	border: 0;
	padding: 0;
	margin: 1em 0;
}
table {
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid #669;
	border-color: #88b #447 #447 #88b;
	width: 35em;
	max-width: 100%;
}
@media (max-width: 36em) {
	table {
		width: auto;
		min-width: 90vw;
	}
}
td, th {
	border: 1px solid #669;
	border-color: #447 #88b #88b #447;
	text-align: left;
	padding: 1px 3px;
}
th {
	font-weight: bold;
}
td.tunnus {
	width: 3em;
}
td.tunnus2 {
	text-align: center;
}
td.tulos {
	width: 2.5em;
	text-align: right;
}
td.nimi a {
	text-decoration: none;
}
td.tehty, td.paras {
	text-align: center;
	width: 2em;
}
td.tehty span {
	text-shadow: #090 0.15em 0.15em 0.15em;
}
td.paras span {
	color: #eb1;
	text-shadow: #000 0 0 0.15em;
}
#ei-kaytossa td.paras span.jaettu {
	color: #ddb; /* hopea; liian vaalea, jos varjo puuttuu */
	color: #c73; /* pronssi; liian kultamainen */
	color: #bb9; /* tummempi hopea */
	text-shadow: #336 0 0 0.15em;
}
td.merkinta {
	width: 4em;
}
td.merkitys {
	width: 16em;
}
.luku, .sija {
	text-align: right;
}
.sija {
	width: 2.5em;
	padding: 0 0.5em;
}
td.nimimerkki {
	padding-right: 2em;
	text-decoration: none;
}
td.nimimerkki a {
	text-decoration: none;
}
.pituus {
}
.pituus.virhe {
	color: #c00;
}
img.automaatti {
	float: right;
	border: 1em solid #eef;
	background: #eef;
	border-width: 0 0 1em 1em;
	max-width: 50%;
}
#kuvat li {
	margin-bottom: 1em;
}
#kuvat li span {
	display: inline-block;
	min-width: 30%;
}