#map { position: absolute; top: 92px; left: 0px; height: 500px; width: 500px;
  border: solid black 1px;}
@media (min-aspect-ratio: 4/3) {#map { left: calc(50vw - 450px);}
}
#keybox { position: absolute; top:680px; left: 0px; width: 500px;
  background-color: #e0e0e0; border: solid black 1px; overflow-y: auto; visibility: visible;
}
@media (min-aspect-ratio: 4/3) {#keybox { top: 60px; height: 532px; left: calc(50vw + 54px);
  width: 400px;}
}
.visible1 {visibility: visible;
}
#keyhead, #title, #title1, #linkbox { position: absolute; height: 30px; color: white; font-weight: bold;
 font-size: 20px; padding: 2px; font-family: Verdana, Arial, Helvetica, sans-serif; width: 100%;
}
#title, #title1 { width: 498px; left: 0px; top: 0px; background-color: grey; z-index: 9999
}
@media (min-aspect-ratio: 4/3) {#title, #title1 { left: calc(50vw - 450px);}
}
#title1 { left: calc(99vw - 504px);
}
@media (min-aspect-ratio: 4/3) {#title1 { left: calc(99vw - 804px); }
}
#keyhead { width: 498px; left: 0px; top: 650px; background-color: #606060;
}
@media (min-aspect-ratio: 4/3) {#keyhead { left: calc(50vw + 54px); top: 30px; width: 398px;}
}
#linkbox { width: 498px; left: 0px; top: 620px; background-color: #606060;
}
@media (min-aspect-ratio: 4/3) {#linkbox { left: calc(50vw + 54px); top: 0px; width: 398px;}
}
#info, #info1 { display: block; position: absolute; margin: 0px; top: 34px; left: 0px; width: 498px;
  padding: 2px; border: none; border-radius: 0 0 3px 3px; text-align: center;
  color: #fff; background: #333; font-size: 16px; z-index: 998;}
@media (min-aspect-ratio: 4/3) {#info, #info1 { left: calc(50vw - 450px);}
}
#infotext { display: block; position: absolute; margin: 0px; top: 34px; left: 0px; width: 498px;
  height: 54px; border: 0; padding: 2px; text-align: center; color: #fff; background: #888; font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; z-index: 997;
}
@media (min-aspect-ratio: 4/3) {#infotext { left: calc(50vw - 450px);}
}
.keylge { font-weight: bold; font-size: 18px; font-family: Verdana, Arial, Helvetica, sans-serif;
  margin: 0px; color: #f0f0f0;
}
.keysml { font-weight: normal; font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif;
}
.maphd { font-weight: bold; font-size: 20px; font-family: Verdana, Arial, Helvetica, sans-serif;
  margin: 0px; color: #f0f0f0;
}
.linkbtn, .linkbtn1 { cursor: pointer; font-family: inherit; font-size: 14px; font-weight: bold; margin-top: 0px; padding: 4px; height: 32px; 
}
@media (min-aspect-ratio: 4/3)  {.linkbtn, .linkbtn1, { font-size: 14px; padding: 4px;}
}
.linkbtn { background-color: white;
}
.linkbtn:hover  { background-color: #c0c0c0;
}
.linkbtn1 { background-color: grey;
}
.mapbtn, .mapbtn1 { cursor: pointer; font-family: inherit; font-size: 20px; font-weight: bold; margin-top: 0%;
  padding: 4px; border: 2px solid white; color: white; background-color: green; position: absolute; left:2px; top: 2px;
  z-index: 9999; 
}
.mapbtn1 { left: calc(99vw - 142px); top: 95px; width: 140;
}
.mapbtn:hover, .mapbtn1:hover {background-color: #808080;
}
@media (min-aspect-ratio: 4/3) {.mapbtn1 { top: 60px;}
}
td {font-size: 16px; font-family: Verdana, Arial, Helvetica, sans-serif;
}