body {
  font-family: 'Lato', sans-serif;
  color: #334a4f;
  background-color: #eee;
}

#header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: "100%";
  margin-bottom: 20px;
  margin-top: 20px;
  padding-bottom: 10px;
  padding-top: 10px;
  background-color: #5558;
}

#header a {
  text-decoration: none;
  color: #eee;
}

#header h1 {
  font-size: 26px;
  margin: 0px;
  color: #eee;
}

#stage {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: #333;
  display: flex;
}

#backdrop {
  display: flex;
  flex-direction: column;
  flex: 1;
  
  background-size: cover;
  background-attachment: fixed;
}

#overture, #hunt, #finale {
  flex: 1;
  overflow: scroll;
}

@media (min-width: 500px) {
  #stage {
    width: 500px;
    margin-right: auto;
    margin-left: auto;
  }
}

h1 { text-align: center; font-weight: bold; }
h2 { text-align: center; }

.seeking {
  color: #375E78;
}

.found {
  color: #F56700;
}

#header { padding-bottom: 1em; }
#vCode { font-size: 125%; }
input#signin { font-size: 125%; }

#listing {
  border-bottom: 1px solid #334a4f;
}
.locationEntry {  
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  border-top: 1px solid #334a4f;
  padding: 15px;
  background-color: white;
  opacity: 0.85;
  margin-bottom: 5px;
}

.content {
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  padding-top: 40px; padding-bottom: 40px; padding-left: 10px; padding-right: 10px;
  margin-left: auto; margin-right: auto;
  background-color:#fefefe;
  opacity: 0.9;
}

body {
    text-align: center;
}

#main {
  clear: both;
  padding-top: 5px;
  text-align: center;
  border-bottom: 1px solid #334a4f;
 }

@keyframes throb {
  from {
    opacity: 1.0;
  }
  to {
    opacity: 0.5;
  }
}

.throbcontent {
  animation-name: throb;
  animation-duration: 2s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
 }

.stackitem {  
  font-size: 18px;
  text-align: center;
  background-color: #334a4f;  
  opacity: 0.85;
  margin-bottom: 15px;
}

.stackitemcover {
  text-align: center;
  color:white;
  font-weight: bold;
  font-size: 110%;
  padding-bottom: 8px;
}

.clueitemcover {
  background-color: #666;
}

.captionitemcover {
  background-color: #F56700;
}

.caption {
  padding: 10px;
  margin: 15px;
  font-size: 125%;
  font-weight: bold;
  background-color: #eee;
  opacity: 0.9;
}

.captionbox {
  border: 2px solid #777;
  padding: 10px;
}

.bigButton {
  font-size: 150%;
  font-weight: bold;
  background: #234623;
  color: white;
  text-align: center;
  width: 100%;
  padding-top: 40px;
  padding-bottom: 40px;
  margin-left: auto; margin-right: auto;
  margin-bottom: 15px;
}

#nextLocationButton {
  background: #234623;
  color: white;
  padding: 30px;
  width: 100%;
  text-align: center;
  font-size: 26px;
  font-weight: bold;
  margin-left: auto; margin-right: auto;
  margin-bottom: 20px;
}

#finishCaptionsButton {
  background: #234623;
  color: white;
  padding: 30px;
  width: 100%;
  text-align: center;
  font-size: 26px;
  font-weight: bold;
  margin-left: auto; margin-right: auto;
}


.infoButton {
  border: 1px solid #445079;
  background: #445079;
  color: white;
  padding: 8px;
  margin: 10px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

.restartButton {
  border: 1px solid #d3a652;
  background: #d3a652;
  color: white;
  padding: 8px;
  margin: 10px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

.doneButton {
  border: 1px solid #234623;
  background: #234623;
  color: white;
  padding: 8px;
  margin: 10px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

.transcriptButton {
  border: 1px solid #445079;
  background: #445079;
  color: white;
  padding: 5px;
  margin: 5px;
  text-align: center;
  width: 75%;  
  margin-left: auto; margin-right: auto;
  margin-top: 1.5em;
  font-size: 16px;
}

#wayfinding {
  text-align: center;
  font-size: 38px;
  color: #334a4f;
}

#wayfinding.searching {
  color: #334a4f;
}

#wayfinding.found {
  color: #F56700;
}

#wayfinding.eek {
  color: red;  
}

footer {
  position: fixed;
  bottom: 0;
  text-align: center;
  width: 100%;
  padding: 5px;
  padding-right: 20px;
  background-color: #aaaa;
  font-size: 150%;
  font-weight: bold;
  color: white;
}

.pop-over {
  width: 100%;
  height: 100%;
  position: absolute;
  
  text-align: center;
  background-color: #ccc;
  color: black;
}

#info-main {
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#info-main > div {
  flex: 1;
}

#info-credits {
  display: flex;
  flex-direction: column;
}

#creditstext {
  flex: 1;
  overflow: scroll;
  text-align: center;
  background-color: #ccc;
  padding: 10px;
}

.transcript {
  height: 275px;
  border: 1px solid #777;
  background-color: #fff;
  padding: 5px;
  font-size: 80%;
  overflow: scroll;
}

.talltranscript {
  height: 400px;
}