body {
  font-family: sans, sans-serif;
}

dt {
  font-weight: bold;
}

img {
  max-width: 100%;
}

@media (min-width: 500px) {
  .inline-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem;
  }
  .inline-dl > dt:after {
    content: " : ";
  }

  .inline-dl > dt {
    text-align: right;
  }

  .inline-dl > dd {
    margin-left: 0;
  }

  .inline-dl > .inline-dl {
    margin-top: 1.5em;
  }
}
@media (max-width: 720px) {
  .inline-dl .inline-dl {
    display: block;
    margin-top: 1.5em;
  }
  .inline-dl .inline-dl > dt {
    text-align: left;
  }
}

.main-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
}
.logo {
}
.main-nav {
  text-wrap: balance;
}
.nav-item {
  display: inline-block;
  font-weight: bold;
  padding: 0.5rem 1rem;
  margin-bottom: 0.2rem;
}
a.nav-item {
  color: #fff;
  background: #001f4d;
  text-decoration: none;
}
a.nav-item:hover,
a.nav-item:active {
  color: black;
  background: #8cdeb3;
  text-decoration: underline;
  outline-color: #8cdeb3;
}

.occurrences img {
  max-width: 100%;
}

.occurrences {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1rem;
}

.occurrence {
  /* display: grid; */
  border: 5px solid #b3ff5c;
  padding-bottom: 0.5rem;
  /* gap: 0.3rem; */
  /* grid-template: */
  /*   "n t" */
  /*   "v t" */
  /*   "l t" */
  /*   "o o"; */
  /* grid-template-columns: 1fr auto; */
  /* grid-template-rows: auto auto auto 1fr; */
}

.thumbnail {
  grid-area: t;
  /* display: flex; */
  align-items: center;
}

.legend {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.names {
  grid-area: n;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin-top: 0.5rem;
}

.vernacular {
  grid-area: v;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin-bottom: 0.5rem;
}

.links {
  grid-area: l;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.occurences {
  grid-area: o;
  display: flex;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.found {
  display: flex;
}

.original {
  font-size: 1.2em;
}

.menu {
  padding: 0;
}

.menu li {
  display: inline;
}

.menu a {
  display: inline-block;
  border: 1px solid #001f4d;
  padding: 2px 5px;
  text-decoration: none;
  margin: 2px;
}

.index-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  grid-gap: 1.5rem 2rem;
}

.index-link {
  font-weight: bold;
  font-size: 2em;
  color: white;
  background: #001f4d;
  padding: 1rem;
  text-align: center;
  text-decoration: none;
}
.index-link:hover,
.index-link:active {
  color: black;
  text-decoration: underline;
  background: #8cdeb3;
  outline-color: #8cdeb3;
}

.year {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  grid-gap: 1rem;
}

/* map styles */
.map {
  height: 75vh;
  border-width: 1rem;
  border-style: solid;
  border-color: lightgray;
}
.map-with-legend {
  border-bottom-width: 0;
}
.map.lower {
  height: 33vh;
  min-height: 350px;
}
.iconValue0,
.iconValue1,
.iconValue2 {
  border-radius: 100%;
}

.iconValue0 {
  outline: 3px solid #ff9d3a;
  z-index: 400 !important;;
}
.iconValue1 {
  outline: 4px solid #d83034;
  z-index: 350 !important;;
}
.iconValue2 {
  outline: 5px solid #9d2c00;
  z-index: 300 !important;;
}

.iconValue0:hover,
.iconValue1:hover,
.iconValue2:hover {
  outline-color: #2196f3;
}

.map-legend {
  padding: 1rem 1rem 0;
  border-width: 0 1rem 1rem;
  border-style: solid;
  border-color: lightgray;
}

.map-legend .inline-dl {
  margin: 1rem;
}

.legend-icon {
  display: inline-block;
  width: calc(1em - 3px);
  height: calc(1em - 3px);
  margin-right: 3px;
  margin-left: 3px;
}
.iconValue0.legend-icon:hover {
  outline-color: #ff9a00;
}
.iconValue1.legend-icon:hover {
  outline-color: #e63946;
}
.iconValue2.legend-icon:hover {
  outline-color: #8b1e2d;
}

.summary-definitions {
  margin-top: 0;
}

@media (min-width: 1000px) {
  .summary {
    display: grid;
    grid-template-columns: auto minmax(auto, 500px);
    gap: 0.5rem;
  }

  .taxon-picture {
    display: inline-block;
    vertical-align: top;
  }
}
.summary dt {
  font-weight: bold;
}

.taxon-picture .legend {
  max-width: 500px;
}

.text-block {
  max-width: 80ch;
}

td.dt-type-numeric {
  font-family: monospace;
  font-size: 1rem !important:
}