
/*  Copyright (c) 2014-2018 Mark Brautigam. All rights reserved. */

body, html { height: 100%; }
body { background-color: #fff0e0; margin: 0; padding: 0; 
  font-family: Verdana, Helvetica, Arial, sans-serif;
}
div#content { padding-bottom: 72px; width: 100%;  }
div.mapentry { clear: both; 
  margin: 0 1em; 
  height: 84px;
  border-bottom: 1px solid #853;
  cursor: pointer;
}
figure { margin: 0; margin-top: 4px; }
figure img { height: 80px; width: 80px; float: left; margin: 0; margin-right: 1em; }
figure span { display: block; }
figcaption { padding-top: 1em; }
figcaption span:nth-child(1) { font-size: 1.4em; }
figcaption span:nth-child(2) { font-style: italic; color: #4040c0; margin-top: 0.25em; }
div.rightarrow { float: right; margin-top: -50px; 
  margin-right: 1em;
  padding-top: 0.75em; 
  width: 3em;
  height: 2.25em;
  border-radius: 1.5em;
  text-align: center;
  background-color: #853;
  color: white;
  opacity: 0.5;
}
#mapdisplay { padding-top: 2em; display: none; }
img#mapimage { 
  height: 800px; 
  text-align: center; 
  display: block; 
  margin: 16px auto; 
  box-shadow: 3px 3px 6px #876;
}
img#spinner {
  height: 178px;
  width: 178px;
  text-align: center;
  display: block;
  margin: 327px auto;
  display: none;
}
div#maptitle { 
  font-weight: bold; 
  font-size: 1.5em; 
  color: #333; 
  text-align: center; 
  margin-bottom: 0.5em; 
}
div#mapcaption { 
  font-size: 1.2em; 
  color: #333; 
  text-align: center; 
  margin-bottom: 0.5em; 
  color: #804020;
}
div#previous, div#next {
  top: 45%; 
  position: absolute;
  margin-right: 1em;
  padding-top: 0.75em; 
  padding: 1em 0.2em 0.3em;
  width: 3em;
  height: 2.25em;
  /*border-radius: 1.5em;*/
  text-align: center;
  background-color: #853;
  color: black;
  background-color: #ccc;
  box-shadow: 1px 1px 2px gray;
  cursor: pointer;
  opacity: 0.5;
}
div#previous { left: 24px; }
div#next { right: 12px; }

div#header, div#footer, div#header2 { height: 48px; 
  background-color: silver;
  background-color: #853;
  color: #fff0e0;
  /*
  background: -webkit-linear-gradient(#a75, #853);
  background: -moz-linear-gradient(#a75, #853);
  background: -o-linear-gradient(#a75, #853);
  background: linear-gradient(#a75, #853);
  */
}
div#title { width: 90%;
  margin: 0 auto;
  text-align: center;
  font-size: 1.5em;
  padding-top: 0.35em;
  font-weight: bold;
}
div#footer { clear: both; 
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
}
div#footer p { margin: 0; padding: 1.3em 0 0; font-size: 0.8em; }
div#header2 { text-align: center; display: none; }
div#back2, div#more2 {
  display: inline-block;
  width: 30%;
  background-color: #fff0e0;
  color: #853;
  top: 0.68em;
  padding: 0.25em 1em;
  cursor: pointer;
  border-radius: 0.2em;
  margin: 0 2px;
  font-size: 0.8em;
}
div#back, div#more {
  position: absolute;
  background-color: #fff0e0;
  color: #853;
  top: 0.68em;
  padding: 0.25em 1em;
  /*
  display: none;
  background: -webkit-linear-gradient(#fed,#dcb);
  background: -moz-linear-gradient(#fed,#dcb);
  background: -o-linear-gradient(#fed,#dcb);
  background: linear-gradient(#fed,#dcb);
  border: 1px solid #fff;
  */
  cursor: pointer;
  border-radius: 0.2em;
}
div#back { left: 2em; 
  /* border-radius: 2em 0.3em 0.3em 2em / 1em 0.3em 0.3em 1em;  */
  /* padding-left: 2em;  */
}
div#more { right: 2em; 
  /* border-radius: 0.3em 2em 2em 0.3em / 0.3em 1em 1em 0.3em ;  */
  /* padding-right: 2em;  */
  display: none;
}
div#been, div#want {
  width: 16em;
  margin: 1em auto;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}
div#been { margin-top: 3em; }
div#been img, div#want img {
  margin-top: 0.5em;
  margin-bottom: -0.5em;
}
div#moredata { display: none; }
div#moredata table { border-collapse: collapse; width: 90%; margin: 2em; }
div#moredata table td { border: 1px solid #853; padding: 0.5em 1em; }
div#moredata table tr td:nth-child(1) { color: #4040c0; width: 25%; }
#perm, #perm a { text-decoration: none; text-align: center; margin: 1.5em 0; }

/* search form added 6-25-20 */
div#searchbox { text-align: center; padding: 0.5em; border-bottom: 1px solid #842; }
input#query { padding: 0.5em; width: 33%; min-width: 180px; }

@media screen and (max-height: 800px) {
  img#mapimage { height: 600px; }
}
@media screen and (max-width: 500px) {
  img#mapimage { height: 400px; }
  figure img { height: 48px; width: 48px; margin-right: 1em; }
  figcaption span:nth-child(1) { font-size: 1em; }
  figcaption span:nth-child(2) { font-size: 0.9em; white-space: nowrap; overflow: hidden; }
  div.rightarrow { margin-right: 0; height: 2.1em; width: 2.75em; padding-top: 0.65em; margin-top: -42px; }
  figcaption { padding-top: 0.5em; }
  div.mapentry { height: 60px; margin: 0 0.25em; }
  div#header2 { display: block; }
  div#nav { display: none; }
  div#title { font-size: 1em; }
  div#moredata table { width: 85%; font-size: 0.9em; }
}

@media screen and (max-width: 400px) {
  figure img { height: 48px; width: 48px; margin-right: 0.25em; }
  figcaption span:nth-child(1) { font-size: 0.9em; }
  figcaption span:nth-child(2) { font-size: 0.75em; white-space: nowrap; overflow: hidden; }
  div.rightarrow { margin-right: 0; height: 1.9em; width: 2.35em; padding-top: 0.45em; margin-top: -36px; }
}
