:root {
	--background-1:#ffffff;
	--background-2:#f8f8f8;
	--background-3:#ebebeb;

	--background-highlight-1:#ffffdd;
	--background-highlight-2:#f8f8d8;

	--border-1:#b3b3b3;
	--border-2: #333333;
	--border-3: #ebebeb;
}

body {
	color:#fff;
	background: rgb(60,202,220);
	background: linear-gradient(133deg, rgba(60,202,220,1) 0%, rgba(20,37,76,1) 100%);
	background-size:cover;
	font-family: "Baloo 2", serif;
	font-optical-sizing: auto;
	font-size:16px;
	margin:0 .5em;
	min-height:100vh;
}
body>details#mainmenuholder {
	position:fixed;
	z-index:999;
	top:1em;
	left:1em;
	background:white;
	color:black;
	border-radius:.3em;
	box-shadow:1px 1px 4px 0 rgba(0,0,0,.5);
}
	body>details summary {
		padding:.5em;
		cursor:pointer;
	}
	body>details[open] {
		box-shadow:1px 1px 4px 0 rgba(0,0,0,.7);
		padding-bottom:.5em;
	}
	body>details a {
		padding:.5em;
		display:block;
		min-width:200px;
	}

h1 {
	font-weight:800;
	font-size:40px;
	text-align:center;
	margin:0;
	padding:.4em 0;
}
h2 {
	font-weight:800;
	font-size:30px;
	margin:.4em 0;
}
h3 {
	font-weight:800;
	font-size:26px;
	margin:.4em 0;
}
h4 {
	font-weight:700;
	font-size:24px;
	margin:.4em 0;
}

ul, ol {
	list-style-position: inside;
	padding:0;
}
	li {
		margin:.2em 0;
		padding:0;
	}

p {
	line-height:1.3;
	margin:.1em; 0
}

a {
	color:#0e3692;
	text-decoration:none;
}
	a[href]:hover {
		text-decoration:underline;
	}

b {
	font-weight:800;
}
	b.lower,
	b.worse {
		color:pink;
	}
		td>b.lower,
		th>b.lower {
			color:red;
		}
	b.middle,
	b.same {
		color:orange;
	}
	b.higher,
	b.better {
		color:lightgreen;
	}
		b.higher::before {
			content: '+';
		}
		td>b.higher,
		th>b.higher {
			color:green;
		}
			td>b.higher::before,
			th>b.higher::before {
				content:'';
			}
	b[title] {
		cursor:help;
	}
		b[title]:hover {
			text-decoration:underline;
		}


main {
	display:grid;
	gap:10px;
	grid-template-columns: 1fr;
}

menu {
	list-style-type:none;
}

menu#mainmenu {
	width:90vw;
	max-width:300px;
	margin:5px;
}
	menu#mainmenu a {
		text-decoration:none;
	}
	menu#mainmenu a:hover, menu#mainmenu a.on {
		background:#287794;
		color:white;
	}

menu#service_menu {
	display:flex;
}
	menu#service_menu li a {
		display:block;
		padding:.5em 1.5em;
		margin:0 .2em;
		background:#eee;
		color:#000;
		text-align:center;
		border:3px solid #ddd;
		text-decoration:none;
	}
		menu#service_menu li a:hover {
			border:3px solid rgb(60,202,220);
		}
		menu#service_menu li.on a {
			border:3px solid red;
		}		

.section_head {
	grid-column: span 1;
	background:rgb(60,202,220);
	border:3px solid white;
	position:relative;
}
	.section_head h2 {
		color:#0e3692;
		font-size:25px;
		font-weight:600;
		margin:1em;
	}
	.section_head h2 a {
		color:inherit;
		text-decoration:none;
	}
	.section_head h2 a:hover {
		color:red;
	}

.section_clear {}

	.section_clear h2 {
		font-weight:800;
		font-size:30px;
	}
	.section_clear h3 {
		font-weight:800;
		font-size:70px;
		line-height:0.8em;
		text-transform:uppercase;
		margin-top:.2em;
		margin-bottom:.1em;
	}
	.section_clear p,
	.section_clear li {
		font-size:22px;
	}

.section_card {
	background:white;
	color:black;
	text-align:center;
	border:3px solid rgb(60,202,220);
	padding:.7em;
}
	.section_card h2 {
		color:#0e3692;
		font-size:25px;
		font-weight:600;
		margin:.5em 0;
	}

section>ul {
	margin-left:1em;
}
	section>ul>li>a {
		color:yellow;
	}
		section>ul>li>i {
			padding-left:1em;
			opacity:.7;
		}

section.stickymenu {
	position: sticky;
	top: .5em;
	background: #1C4E68;
	padding-left: 80px;
	z-index: 100;
}

aside {
	display:grid;
	gap:1em;
	grid-template-columns: 1fr;
}
	aside a {
			color:black;
			text-decoration:none;
	}
		aside a h3 {
			font-size:17px;
			font-weight:600;
		}
		aside a[href]:hover h3 {
			color:blue;
			text-decoration:underline;
		}
		aside a ul li {
			font-size:14px;
		}

div.tableholder {
	overflow-x:auto;
	max-width:calc(100vw - 1em);
	position:relative;
	max-height:100vh;
}

div.tabs {
	text-align:right;
}
	div.tabs>* {
		background:var(--background-3);
		padding:3px 10px 0 10px;
		border-radius:10px 10px 0 0;
		margin-left:5px;
	}

table {
	width:100%;
	border: 1px solid var(--border-1);
	border-collapse:collapse;
	margin-top:.5em;
	color:black;
}
	table caption {
		font-weight: bold;
		text-align: left;
		background: white;
		color: black;
		padding: .3em;
	}
	
	div.tabs + table {
		margin-top:0;
	}
	table.floatingmenu {
		float:right;
		width:auto;
		font-size:.9em;
		box-shadow:1px 1px 3px 0 rgba(0,0,0,.2);
	}

	table + table {
		margin-top:.5em;
	}
	table caption {
		font-weight:bold;
		text-align:left;
	}
	table thead tr {
		border-bottom: 1px solid var(--border-1);
	}
	table th {
		background:var(--background-3);
		text-align:left;
  		position: sticky;
  		top: 0;
	}
	table tbody tr {
		background:var(--background-1);
		border-bottom:1px solid var(--border-3);
	}
		table tbody tr:last-child {
			border:0;
		}
		table tbody tr:hover {
			background:var(--background-highlight-1);
		}
	table tfoot tr {
		background:var(--background-3);
		border-bottom:1px solid var(--border-3);
	}
	table tbody tr:nth-child(even) {
		background:var(--background-2);
	}
		table tbody tr:nth-child(even):hover {
			background:var(--background-highlight-2);
		}
	table tr>* {
		padding: .5rem 1rem .4375rem .5rem;
		vertical-align:top;
	}
		table.compact tr>* {
			padding: .25rem 1rem .25rem .5rem;
			font-size:15px;
		}
	table td.mugshot {
		border: 1px solid var(--border-1);
	}

	table a.on,
	table a:hover {
		box-shadow:0 0 0 2px #ccc;
	}

	table tr.subheader th {
		font-style:italic;
	}
.tal {
	text-align:left;
}
.tac {
	text-align:center;
}
.tar {
	text-align:right;
}
.bl {
	border-left-width:1px;
	border-left-style:solid;
}

.border_red {
	border-color:red;
}
.border_green {
	border-color:green;
}
.border_yellow {
	border-color:yellow;
}
.border_purple {
	border-color:purple;
}
.border_navy {
	border-color:#000088;
}

.rag_over {
	position:absolute;
	top:50px;
	right:20px;
	width:30px;
	height:30px;
	background:silver;
	border:8px solid white;
	box-shadow:2px 2px 3px 0 #0009;
	border-radius:50%;
	z-index:9;
}
	.rag_over.red {
		background:red;
	}
	.rag_over.amber,
	.rag_over.orange {
		background:orange;
	}
	.rag_over.green {
		background:green;
	}

.highlife {
	font-weight:bold;
}
	.highlife i {
		font-style:italic;
	}

.question {
	color:blue;
	font-style:italic;
	font-family:monospace;
}


@media only screen and (min-width: 800px) {

	body {
		background: url(https://www.hlhinfo.com/userfiles_public/design/logoG.png?r=1) no-repeat top 10px right 10px, linear-gradient(133deg, rgba(60,202,220,1) 0%, rgba(20,37,76,1) 100%);
		background-size: 120px, cover;
		margin:0 1em;
	}

	main {grid-template-columns: repeat(16, 1fr);}

	div.tableholder {
		max-width:calc(100vw - 2em);
	}

	.section_head h2 {
		position:absolute;
		top: 50%;
		left: 50%;
		transform:  translateX(-50%) translateY(-50%) rotate(-90deg);
		margin:0;
	}

	.section_clear {grid-column: span 4;}
	.section_card {grid-column: span 3;}

	aside {grid-template-columns: repeat(4, 1fr);}

	.span2 {
		grid-column: span 2;
	}
	.span3 {
		grid-column: span 3;
	}
	.span4 {
		grid-column: span 4;
	}
	.span5 {
		grid-column: span 5;
	}
	.span6 {
		grid-column: span 6;
	}
	.span8 {
		grid-column: span 8;
	}
	.span10 {
		grid-column: span 10;
	}
	.span11 {
		grid-column: span 11;
	}
	.span12 {
		grid-column: span 12;
	}
	.span13 {
		grid-column: span 13;
	}
	.span14 {
		grid-column: span 14;
	}
	.span16 {
		grid-column: span 16;
	}

	.gap25 main {
		gap:25px;
	}
		.gap25 main>* {
			border:5px solid transparent;
			background:rgba(0,0,0,.2);
			border-radius:3px;
		}

}