:root { 
      background: var(--color-base);
      color: var(--color-text);
      font: 14px Sans-Serif;
      --color-base: white;
      --color-alt: whitesmoke;
      --color-brand: #333;
      --color-text: black;
      --color-text-invert: white;
      --color-text-link: royalblue;
      --color-border: lightgray;
      --color-hover: lightgray;
      --color-base-translucent: rgba(255,255,255,0.85);
   }
   @media (prefers-color-scheme: dark) {
      :root {
         --color-base: black;
         --color-alt: #171717;
         --color-brand: #333;
         --color-text: #bababa;
         --color-text-invert: white;
         --color-text-link: cornflowerblue;
         --color-border: #444;
         --color-hover: #444;
         --color-base-translucent: rgba(0,0,0,0.85);
      }
   }
   #key { color:var(--color-text-link); }
   #main { width:fit-content; min-width:375px; }
   #home { font-size:16px; float:right; }
   #topright { float:right; padding-right:15px; }
   #toprightbold { float:right; padding-right:15px; font-weight:bold; }
   #tableheaderright { verticle-align:middle; float:right; padding-left:5px; padding-right:15px; padding-top:32px; padding-bottom:0px; }
   #menu_title { font-size:16px; }
   #arrow { color:var(--color-text-invert); }
   #th_one { border: 0px solid #333; border-radius: 5px 5px 0px 0px; position:-webkit-sticky /*Safari*/; position:sticky; top:0; font-weight:400; font-size:16px; background:var(--color-brand); color:var(--color-text-invert); text-align:left; vertical-align:bottom; }   dl { width:fit-content; min-width:375px; background:var(--color-alt); display: grid; grid-gap: 0px 0px; grid-template-columns: max-content; font: 14px Sans-Serif; border-width:1px 0px; border-style:solid; border-color:var(--color-border); border-radius: 5px; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; }
   dt {  }
   dd { margin: 0; grid-column-start: 2;} 
   table, td, th { border-collapse:collapse; margin:0; padding:10px; }
   th { position:-webkit-sticky /*Safari*/; position:sticky; top:0; font-weight:400; font-size:16px; background:var(--color-brand); color:var(--color-text-invert); text-align:left; vertical-align:bottom; }
   th:first-child{ border: 0px solid #333; border-radius: 5px 0px 0px 0px; }
   th:last-child{ border: 0px solid #333; border-radius: 0px 5px 0px 0px; }
   .arrows { width:16px; height:16px; }
   tbody>tr { border-width:1px 0px; border-style:solid; border-color:var(--color-border); background:var(--color-alt); }
   .earth { display:flex; font-size:14px; }
   .globe { font-size:1.000em; float:right; padding-right:5px; }
   .tar { text-align:right; }
   .clipart { width:18px; height:18px; text-align:center; vertical-align:middle; z-index: 9999; border: 1px solid forestgreen; padding: 15px; border-radius: 50px; }
   .exp_icon { height:34px; width:34px; border-radius:50%; }
   .npcicon { width:20px; height:20px; text-align:center; vertical-align:middle; z-index: 9999;  border: 1px solid cornflowerblue; padding: 5px; border-radius: 50px; }
   .icon { height:48px; width:48px; border-radius:50%; }
   .smallicon { height:24px; width:24px; border-radius:50%; top:10px; left:20px;}
   .mini_icon { height:38px; width:38px; border-radius:50%; }
   .npcicon { display:flex; align-items:center; font-size:24px; text-align:center; vertical-align:middle; z-index: 9999; }
   .photo { height:64px; width:64px; border-radius: 5px 5px 5px 5px; }
   .mini_photo { height:38px; width:38px; border-radius: 5px 5px 5px 5px; }
   .nav_photo { height:30px; width:30px; border-radius: 5px 5px 5px 5px; }
   /* img { margin:0; padding:0; border:0; } */
   p { width:fit-content; min-width:375px; }
   a { text-decoration:none; color:var(--color-text-link); }
   a:hover { background:var(--color-hover); }
   #nav { margin-left:-8px; position:-webkit-sticky /*Safari*/; position:sticky; left:0; bottom:0; background:var(--color-base-translucent); width:188px; height:52px; border-radius:14px; }
   @media print { #nav { display:none; } } 
   .button, .button_inactive { display:inline-block; margin-left:10px; margin-top:10px; height:32px; width:32px; border:1px solid var(--color-border); border-radius:35%; font-size:24px; vertical-align:middle; text-align:center; }
   .button { background:var(--color-alt); }
   .button_inactive { background:none; color:var(--color-border); }
   .bin_true { text-decoration: underline wavy rgba(34,139,34,0.35); }
   .bin_false { text-decoration: underline wavy rgba(178,34,34,0.35); }

   /* for observations_grid.js */
   img { margin:0px; padding:0px; border:0px; display:block; object-fit:cover; object-position:center; }
   #grid { position:relative; /*padding-top:50px;*/ width:375px; padding:0px; border:0px; }
   .gridcell { position:absolute; background:#cccccc; text-align:center; display:flex; justify-content:center; align-items:center; }

.navbar {
  overflow: hidden;
  background-color: var(--color-brand);
  border-radius: 5px 5px 5px 5px;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  /*padding: 15px 14px 12px 14px;*/
  padding: 12px 14px;
  text-decoration: none;
}

.dd_title {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 12px 14px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown {
  cursor: pointer;
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropbtn {
  cursor: pointer;
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 12px 14px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
  background-color: black;
}

.dropdown-content {
  display: none;
  position: absolute;
  font-size: 16px;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 10px 14px 10px 14px;
  /*padding: 10px 14px;*/
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}
 
.dropdown-content a:first-child {
  border-radius: 5px 5px 0 0;
}

.dropdown-content a:last-child {
  border-radius: 0 0 5px 5px;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.show {
  display: block;
}