/* Atko.uk CSS */


html {
	height:98vh;
	max-width:750px;
	margin:0px auto;
	}
body {
	background-color:rgb(228,228,228);
	font-size:12.5px ;
	font-family:Verdana,Arial,Tahoma,"Trebuchet MS",sans-serif;
	width:98%;
	text-align:center;
	margin:10px auto;
	display:flex;
	flex-direction:column;
	height:100%;
	border:1px solid gray;
	}
#top {}
#scroll {
	border-top:1px solid gray;
	overflow-y:auto;
	border:1px solid gray;
	flex-grow:1;
	padding-top:3%;
}
		
#mainpic {
	width:900px;
	max-width:90%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	border:1px solid silver;
	box-shadow: 0px 20px 10px -10px #888;
	border-radius: 10px;
	}
img.subpic {
	max-width:90%;
	display: block;
	margin: 15px auto;
	border:1px solid silver;
	box-shadow: 0px 20px 10px -10px #888;
	border-radius: 10px;
	}
	
img.subpng {
	max-width:90%;
	display: block;
	margin: 15px auto 0px auto;
	}
	
#databasepic {
	width:1130px;
	max-width:90%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	border:1px solid silver;
	box-shadow: 0px 20px 10px -10px #888;
	}		
#mainheader {
	font-family: 'Avant Garde', Avantgarde, 'Century Gothic', CenturyGothic, 'AppleGothic', sans-serif;
	font-size: 40px;
	margin: 2% auto 2.5% auto;
	max-width:90%;
	text-rendering: optimizeLegibility;
	color: rgb(48,87,179);
	letter-spacing: 0.15em;
	text-shadow: 1px 1px 0 #767676;
	padding:0px;
	}
#mainbody {
	max-width:90%;
	margin:30px auto 60px auto;
	}
p.personnel {
	width:1100px;
	max-width: 70%;
	text-align:center;
	margin:10px auto;
	}
p.sectionhdr {
	width:200px;
	max-width:85%;
	height:30px;
	padding-top:12px;
	border-radius: 25px;
	font-weight:bold;
	color:rgb(48,87,179);
	border:1px solid rgb(48,87,179);
	margin:40px auto 20px auto;
	}
a.default {
	text-decoration:none;
	border-bottom:none;
	color:rgb(48,87,179);
	}
a.default:hover {
	border-bottom:1px solid rgb(48,87,179);
	}
div.category {
	width: 1100px;
	max-width: 85%;
	text-align: justify;
	margin: 2% auto;
	padding: 30px 3%;
	border: 1px solid rgb(48,87,179);
	border-radius: 30px;
	}
div.member {
	display:block;
	text-align:center;
	max-width:90%;
	margin: 15px auto 15px auto;
	}
	
span.anchor {
	color:rgb(48,87,179);
	}
span.category {
	display:block;
	text-align:center;
	max-width:90%;
	font-weight:bold;
	color:rgb(48,87,179);
	margin: 0px auto 5px auto;
	}
span.legend {
	display:block;
	max-width:90%;
	margin:0px auto;
	text-align:center;
	font-size:1.0em;
	color:rgb(48,87,179);
	}
ul.namelist {
	columns: 2; -webkit-columns: 2; 
	width:400px;
	margin:0px auto;
	text-align:left;
	}

/* Mobile site modifiers for screens narrower than 1190px (CSS) */
@media only screen and (max-device-width: 1189px) 
{
	#mainheader {
	font-size:30px;
	letter-spacing: 0.12em;
	}
}	
/* Mobile site modifiers for screens narrower than 900px (CSS) */
@media only screen and (max-device-width: 899px) 
{
	#mainheader {
	font-size:25px;
	letter-spacing: 0.10em;
	}
}
	
/* Mobile site modifiers for screens narrower than 440px (CSS) */
@media only screen and (max-device-width: 439px) 
{
	#mainheader {
	font-size:20px;
	text-rendering:auto;
	text-shadow: 0px 0px 0 #767676;
	}
	ul.namelist {
	columns: 1; -webkit-columns: 1; -moz-columns: 1;
	text-align:center;
	width:100%;
	padding-left:0px;
	}
}
/* Mobile site modifiers for screens narrower than 240px (CSS) */
@media only screen and (max-device-width: 239px) 
{
	#mainheader {font-size:15px;}
}