@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
@import url('https://fonts.googleapis.com/css?family=Assistant');
@font-face {font-family: David; unicode-range: U+0590-05FF;}

body {background-color: #E2EDF8; font-family: 'Source Sans Pro', David, sans-serif; font-size: 1em; line-height: 1.2em; margin: auto; max-width: 1024px; }
a {text-decoration: none; }
.header {background-color: #004494; border-bottom: 1px solid #1a237e; display: flex; align-items: center; }

.logo {display: inline-block; text-align: center; padding: 9px 0 4px 0; }
h1 {color: #eff3ff; font-family:Assistant; font-size: 1.2em; font-style: normal; }


nav input {display: none; visibility: hidden; }
nav label {background: #ffec99; display: inline; padding: 3px; }
nav label:hover {background: #ffd3d6; color: #333; border: 1px solid #ff9a9c; }
nav label::before {content: "+"; display: inline; }
.menudiv {height: 0; margin: 10px 0 0 5px; overflow: hidden; transition: height 0.1s; }
/*https://codepen.io/peternguyen/pen/hICga/*/
#toggle:checked ~ .menudiv {height: auto; }
#toggle:checked ~ label::before {content: "−"; }

/* nav {} */
.menutop {display: block; padding: 3px; text-align: center; width: 100%; }
.menu {background: #eff3ff; width: 180px; padding: 0; }
.menu a {background: #fff; color: #2f65ff; border-left: solid #eff3ff 5px; display: block; margin: 2px; padding: 3px 0 3px 12px; }
.menu a:hover	{background: #ffe000; color: #0000ff; border-left: solid #00cc00 5px; }
.menu ul {margin: 0; padding: 0; width: 180px; }
.menu li {list-style-type: none; font-size: 14px; margin: 0; line-height: 1.4em; text-align: left;}
.menu li:hover {background-color: #0099cc; }
.menu p {background: #bddfff; color: #004c80; margin: 0; text-align: center; }
.adslot_1 { display: block; }

.main {background-color: #fff; padding-bottom: 10px; border: 1px solid #c4dbe7; }
.content {margin: 5px 10px 30px 10px; }
h2 {background-color: #eff3ff; color: #044a84; font-size: 1.1em; margin: 0; padding: 15px 30px 15px 30px; }
h3	{color: #ff6500; border-top: 1px solid #0000cc; border-left: solid #000099 2px; font-size: 1.1em;  padding: 4px; }
h4	{color: #009933; }
h5	{color: #ff797b; font-size: 1.1em; margin-bottom: 0;}
li {line-height: 1.4em; }
table	{text-align: left; }
caption {color: #ff797b; font-size: 1.4em; padding-bottom: 10px;}
td	{vertical-align: top; padding: 3px; }
th	{color: #bd924a; border-bottom: 2px solid #3367D6; font-weight: bold; vertical-align: top; }

.date	{width: 100px; }
.footer {background-color: #004494; color: #fff; text-align: center; padding-bottom: 10px; border-top: 1px solid #999; border-bottom: 1px solid #999; }
.footer a:link {color: lightcyan;}
.footer a:visited {color: lightgreen;}
.footer a:hover {color: red;}
.menufooter {padding-top: 15px; width: 100%; margin:0;}
.menufooter a	{background-color: #004494; border: 1px solid #5ab6ff; display: inline-block; width: 60px; }
.menufooter a:hover	{background: #ffd3d6; color: #333; border: 1px solid #ff9a9c; }

img {max-width: 100%; height: auto; }
.sortable th {background-color:#eee; color:#666666; cursor: default; }
.block8	{margin: 10px 12px 0 25px; padding-bottom: 10px; border-bottom: solid #999999 1px; }
.bkggreen	{background: #ccffcc; }
.ctr	{text-align: center; }
.framed	{border: solid #999 1px; padding: 20px; }
.h2u	{color: #ff6500; border-top: 1px solid #0000cc; border-left: solid #000099 2px; font: bold 12pt Arial, sans-serif;  padding: 4px; }
.imglft	{float: left; margin:0; padding: 0 16px 0 0; }
.imgrt	{float: right; margin: 0; padding: 0 0 0 16px; }


/* For mobile phones: */
@media only screen and (max-width: 768px) {

.logo {width: 100px; }
.topmenu {display: inline; }
.adslot_1 { display: none; }
}


/* For desktop: */
@media only screen and (min-width: 769px) {
.header {grid-area: header; }
.menudiv {grid-area: navigation; }
.main {grid-area: main; }
.footer {grid-area: footer; }

.topmenu {display: none; } 
.toggle {display: none; }

.container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-areas: 
	"header header"
	"navigation main"
	". footer";
}

.logo {width: 200px; margin-right: 32px; }
.menudiv {height: auto; margin: 10px 0 0 5px; }
.content {margin: 15px 20px 30px 30px; }

}