@import url('https://fonts.googleapis.com/css2?family=Anton&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

* {
  box-sizing: border-box;
}

body{lang:en-US;margin:0px;background-color:#fff;font-family:"Open Sans","Arial","Helvetica",sans-serif}
.tabled { display:table;margin:auto;width:100% }
.tabled>div {display:table-row; }
.tabled>div>div {display:table-cell;padding:2px;vertical-align:top}
.tabled>div>div>img {max-width:100%}
code {display:inline;font-family: monospace,"Courier New";background-color:#444;font-size:90%;color:khaki;}
code>i{color:greenyellow;}
code>k-const {color:#75b8ff;}
.AppNameTitle{font-size:58px;font-weight:bolder;display:block;width:100%; margin:auto;text-align:left;background-color:#ff6633;color:black;}
.AppNameTitle img{margin-left:100px;margin-right:200px;width:80px;margin-top:20px;}
.AppNameTitle p{display:inline-block;padding-bottom:15px;margin-bottom:10px;}
/* h overrides */
h2 { background-color:transparent; color: #439ad9; }
h3 { color:  #5687aa; }
.large{ font-size:110%; font-family:sans-serif;letter-spacing:1px; }
keybd { font-family:sans-serif;font-variant:small-caps; font-size:90%; background-color:#555; border:1px solid #888; border-radius:3px; display:inline;}
section { font-family:"Open Sans","Arial","Helvetica",sans-serif;margin-top:50px }
#heading {font-family:'Anton','Arial Narrow Bold',sans-serif;font-size:110%;color:#555;margin-bottom:50px; }
#heading>p{font-family:"Open Sans","Arial","Helvetica",sans-serif; font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size:120%}
.yellow{ background-color: yellow; padding: 10px; }
thead{ background-color:#ff6633; color: black;}
table{width:90%;margin:auto}
tbody>tr>td{border-bottom: 1px solid #ccc}
.banner{width:100%;height:151px;background-image:url(../images/topbanner.jpg);background-repeat:no-repeat;background-color:#ff6633;margin:auto;top:0px;position:fixed}
footer{padding-bottom:25px;background-color:#717f8c;color:white;
      text-align:center; display:block;margin:auto;width:100%;margin-top:70px;}
main{width:80%; margin:auto;display:block;margin-top:180px}
a{ color: #326a93; }
a:hover{color: #0094ff;}
figure{text-align:center;}
figcaption{font-size:90%;font-style:oblique}

.bm_a_:after{ 
		/* display that these links lead to external sites */
		content:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2215%22%20width%3D%2213.09%22%20viewBox%3D%220%200%2013.09%2015%22%3E%3Cg%3E%3Cg%20fill-rule%3D%22evenodd%22%3E%3Cpath%20stroke-linejoin%3D%22round%22%20stroke%3D%22%2306f%22%20stroke-width%3D%221.33%22%20fill%3D%22%23fff%22%20d%3D%22M228.57%20499.15H241.07V511.65H228.57z%22%20transform%3D%22matrix(.75169%200%200%20.75164%20-171.31%20-372.07)%22%2F%3E%3Cpath%20d%3D%22m236.462%20497.508%202.44021%202.44021-6.15646%206.15646%201.28777%201.28777%206.15646-6.15646%202.64171%202.64171%202.48975-8.86023z%22%20fill%3D%22%2306f%22%20transform%3D%22matrix(.75169%200%200%20.75164%20-171.31%20-372.07)%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
		margin-left:2px;
		}


/* menu styles */

.nav {
  background: #333;
  width:800px;
  margin-left:auto;
  margin-top:120px;
  font-size:83%;
}
.bottomnav {margin:auto }
.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  background: #333;
}
.menu > li {
  position: relative;
}
.menu a,
.menu label {
  color: white;
  text-decoration: none;
  padding: 12px 7px;
  display: block;
  cursor: pointer;
}
.menu a:hover,
.menu label:hover {
  background: #555;
}
input[type="checkbox"] {
  display: none;
}

/* Submenu styles */
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #444;
  min-width: 160px;
  list-style: none;
  z-index: 999;
  padding:0;
  padding-left:5px;
}
/* Adjust for edge-aligned submenus */
.menu > li:last-child .submenu {
  left: auto;
  right: 0;             /* Force it to open leftward from the right edge */
}
.submenu li a {
  padding: 10px 15px;
  color: white;
  white-space: nowrap;
  /*overflow: hidden;
  text-overflow: ellipsis  */
}
.submenu li a:hover {
  background: #666;
}

/* Show submenu when toggled */
.has-submenu input:checked + label + .submenu {
  display: block;
}

/* Desktop hover support */
@media (hover: hover) and (pointer: fine) {
  .has-submenu:hover .submenu {
    display: block;
  }
}

/* Hamburger toggle (hidden by default) */
.hamburger {
  display: none;
  font-size: 20px;
  color: white;
  padding: 5px 7px;
  cursor: pointer;
}

/* Responsive styles */
@media (max-width: 768px) {
  .hamburger {
    display: block;
  }
  
  .nav {
	  margin-top:0px;
	  margin-left:0px;
	  width:100%;
  }

  .menu {
    display: none;
    flex-direction: column;
  }
  .alwaysvisible { display:block }

  #menu-toggle:checked + .hamburger + .menu {
    display: flex;
  }

  .menu > li {
    border-top: 1px solid #444;
  }

  .submenu {
    position: relative;
  }
}

.menu label::after {
  content: '▾';
  font-size: 0.8em;
  padding-left: 2px;
  color: #aaa;
}