* {
	box-sizing: border-box;
}

body {
	background-color: gainsboro;
	margin: 0;
}

body > div {
	margin-left: 10%;
	margin-top: 5em;
	width: 80%;
	background-color: floralwhite;
	padding: 3em;
}

.icon {
	height: 1.2em;
	vertical-align: bottom;
}

.right {
	text-align: right;
}

table {
	width: 100%;
}

.ranking-page th:nth-child(3), .records-page th:nth-child(2) {
	width: 100%;
	text-align: left;
	text-indent: 3em;
}

.ranking-page th:nth-child(2) {
	padding: 0 1em;
}

.ranking-page td:nth-child(2) {
	padding: 0 1em;
	text-align: right;
}

.records-page td:nth-child(2) {
	text-align: left;
}

.records-page th:nth-child(3), .records-page th:nth-child(4), .records-page th:nth-child(5) {
	text-align: center;
}

.records-page td:nth-child(5), .records-page td:nth-child(6) {
	padding: 0 1em;
	text-align: center;
}

.records-page td:nth-child(3) > span {
	margin-right: 1em;
}

.records-page td[rowspan="1"]:nth-child(3) > span {
	display: none !important;
}

th:first-child {
	min-width: 2em;
	text-align: right;
}

td:first-child {
	text-align: right;
}

th {
	background-color: lavenderblush;
	border-bottom: 1px solid gainsboro;
}

.ms, .us, .ns {
	display: none;
}

input:checked + input + input + table .ms {
	display: inline;
}

input:checked + input + table .us {
	display: inline;
}

input:checked + table .ns {
	display: inline;
}

#ta404 {
	color: grey;
	font-size: 150%;
	text-align: center;
	display: block;
}

#res_sel {
	width: 13.5rem;
	height: 3.5rem;
	margin-bottom: -2rem;
	background-color: lavenderblush;
	font-weight: bold;
	text-align: center;
	display: inline-block;
}

#res_sel ~ input {
	width: 3.5rem;
	height: 1.5rem;
	appearance: none;
	font-weight: bold;
	text-align: center;
	font-size: 110%;
	line-height: 1rem;
	background-color: lightgray;
	margin: 0 0.5rem 0 0;
}

#res_sel + br + input::before {
	content: "ms";
}

#res_sel + br + input + input::before {
	content: "\0003bcs";
}

#res_sel + br + input + input + input::before {
	content: "ns";
}

#res_sel + br + input + input + input {
	margin-right: 1rem;
}

#res_sel ~ input:checked {
	background-color: gray;
	color: white;
}

.records-page table {
	margin-top: 2em;
	line-height: 1.5rem;
}

.records-page td {
	padding: 0;
}

.dl {
	width: 100%;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1.5rem;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDMwIDMwIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1LDUpIj48cGF0aCBmaWxsPSIjNjY2IiBkPSJNMTcgMTJ2NUgzdi01SDF2NWEyIDIgMCAwIDAgMiAyaDE0YTIgMiAwIDAgMCAyLTJ2LTV6Ii8+PHBhdGggZmlsbD0iIzY2NiIgZD0iTTEwIDE1bDUtNmgtNFYxSDl2OEg1bDUgNnoiLz48L2c+PC9zdmc+Cg==);
}

.top_bar > td {
	border-top: 1px solid lightgrey;
}

.top_bar:nth-child(2) > td {
	border: none;
}

select {
	appearance: none;
	background-color: transparent; 
	border: none; 
	padding: 0; 
	margin: 0; 
	font-family: inherit; 
	font-size: inherit; 
	font-weight: inherit;
	text-decoration: underline;
	line-height: inherit; 
	background-repeat: no-repeat;
	background-position: 100% 0.25rem;
	background-size: contain;
	background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
	max-width: 40%;
}

select::before {
	content: "a";
}

option {
	font-size: 50%;
}

input[type="submit"] {
	background-color: transparent; 
	border: 1px solid black;
	padding: 0 1rem;
	margin: 0; 
	font-family: inherit; 
	font-size: inherit; 
	font-weight: inherit;
	line-height: inherit; 
	cursor: pointer;
}
