html { background-color: #999; }

body {	
	overflow-x: hidden;  
	margin: 0;
	font-family: Helvetica, Arial, sans-serif;}

h1, h2, h3, h4, h5, h6 {color:#0B0B61;}
	
#site-div {
	background-color:#CCC;
	box-sizing: border-box;
	margin: 0 auto;}

#page-div {	
	max-width: 1100px;
	margin: 0 auto;	
	background-color:#f1fbfc;
	display: block;
	padding: 1px 0;
	overflow:hidden;}

/* Main Page Headlines */
#title-div {		
	background-color:#0B0B61;
	width: 100%;
	padding-top: 1.2em;
	padding-bottom: 1.1em;}

#title-div h1 {
	text-align:center;
	margin: 0 auto;
	font-family: Helvetica, Arial, sans-serif;
	font-size:4.5em;
	font-style:italic;
	font-weight:bold;
	color:#fff;
	text-shadow: 	0 0 10px #fff,
			0 0 20px #00d2ff,
			0 0 30px #00d2ff,
			0 0 40px #00d2ff,
			0 0 50px #00d2ff,
			0 0 60px #00d2ff,
			0 0 70px #00d2ff;}

#title-div h2 {
	text-align:center;
	margin: 0 auto;
	font-family: Helvetica, Arial, sans-serif;
	font-size:3.5em;
	font-style:italic;
	font-weight:bold;
	color:#fff;
	text-shadow: 	0 0 10px #fff,
			0 0 20px #00d2ff,
			0 0 30px #00d2ff,
			0 0 40px #00d2ff,
			0 0 50px #00d2ff,
			0 0 60px #00d2ff,
			0 0 70px #00d2ff;}
/* End of Main Page Headline CSS */

/* All the navigation menus */
#mainnav-div {
	background-color: #006;
	width:100%;
	color: #FFF;
	font-size: 1.2em;
	padding: 1px 0;}

.menu-item:hover, #mainnav-div a:hover, #menu-div a:hover {color: #06F;}

.menu-item {
	float:left;
	padding: 0.4em 1em;}

#mainnav-div a, #menu-div a {
	text-decoration: none;
	color: #FFF;}

#menu-div {display:none;}

#menu-div ul { 
	column-count: 5;
	margin: 0;
	padding:0 2em 1em 2em;}

#menu-div li {
	list-style-type: none;
	display:block;}

#section-menu {cursor:pointer;}
#hamburger{padding-left:1em;}

/* Process the "section menu" elements*/
#menu-up, #hamburger, #show-menu {display:none;}
#show-menu:checked ~ #menu-div {display:block;}
#show-menu:checked ~ #section-menu #menu-down {display: none;}
#show-menu:checked ~ #section-menu #menu-up {display: inline-block;}

#google-search {
	float:right; 
	max-width:33%;
	padding: 0 20px 0 0;
	margin: 0;}

/* Restyle the Google search box */
.cse .gsc-control-cse, .gsc-control-cse {
    padding:0 !important;
	border-width:0 !important;
	margin: 0 !important;
	background-color:transparent !important;;}
/* End of navigation CSS */

#content-div {margin: 0px 4em;}
#content-div ul {padding-left:2em;}

/* Center large images and text where needed */
.lrg-img-ctr {display:block; text-align:center; max-width:100%; margin:auto; height:auto;}
.ctr {text-align:center;}
/* End of centering */

/* Process tables, alternate colors, highlight on hover etc. from https://css-tricks.com/accessible-simple-responsive-tables/ */ 
.genericTable {
	margin:0 auto;
	border-collapse:collapse;
	max-width: 100%;
	overflow: auto;
	display: block;
}

.genericTable thead{
	background-color: #006;
	color: #fff;
	text-align:center;
	font-weight:bold;
}

.genericTable th {padding: 0.4em 0;}

.genericTable td {padding: 0.2em 1em;}

.genericTable tbody tr:nth-child(odd) {background-color: #fff;}

.genericTable tbody tr:hover {background-color: #d6e9f8;}
/* End of tables CSS */

/* Process single videos - https://overlockdesign.co/better-responsive-video-embeds/ - for multiple videos use Fancybox 3 - https://fancyapps.com/fancybox/3/ */
.videowrapper { 
    position: relative; 
    margin: 0 auto 10px;;
    max-width: 600px;
} 

/* This calculates the height of the video wrapper. If not found in the HTML as in <div class="videowrapper" style="--aspect-ratio: 3 / 4;"> for old squarish video will defuly back to 16:9 (widescreen) */
.videowrapper:before {
    content: '';
    display: block;
    position: relative;
	padding-bottom: calc(var(--aspect-ratio, .5625) * 100%);
}

/* Style the YouTube iframe */
.videowrapper iframe, 
.videowrapper object, 
.videowrapper embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}
/* End of single video div CSS */

/* Media queries tp resize content */
@media screen and (max-width : 1110px) {#menu-div ul {column-count: 4;}}

@media screen and (max-width : 1100px) {
#page-div {width:100%}
#content-div {margin: 0px 3em;}}

@media screen and (max-width : 910px) {#google-search {width:340px;}}

@media screen and (max-width : 890px) {#menu-div ul {column-count: 3;}}

@media screen and (max-width : 860px) {
#title-div h1 {font-size:3.5em;}
#title-div h2 {font-size:2.5em;}
.menu-item {padding: 0.4em 0.6em;}}

@media screen and (max-width : 760px) {
#title-div h1 {font-size:3em;}
#title-div h2 {font-size:2em;}
#content-div {margin: 0px 2em;}
#content-div ul {padding-left:1em;}}

@media screen and (max-width : 740px) {
#site-home, #section-home{display:none;}
.menu-item {padding: 0.4em 0.6em;}
#google-search {max-width:50%;}}

@media screen and (max-width : 680px) {#menu-div ul {column-count: 2;}}

@media screen and (max-width : 600px) {
#title-div h1 {font-size:2.5em;}
#title-div h2 {font-size:1.5em;}
#section-menu {display:block;} 
#content-div {margin: 0px 1em;}}

@media screen and (max-width : 410px) { 
#menu-div ul {column-count: 1;}
#menu-up, #menu-down{display:none;}
#show-menu:checked ~ #section-menu #menu-up {display: none;}
#hamburger {display:inline-block;}
#google-search {max-width:70%;}
.menu-item {padding: 0.4em 0.2em;}}