* {box-sizing: border-box;}

body {
  width: 100vw;
  margin: auto;
  font-family: Roboto, Arial, Helvetica, sans-serif;
  color: black;
  background-color: transparent;
  font-size: 15px;
  line-height: 1.3;
  overflow: hidden;
}

.iframe-wrapper {
  border-radius: 10px 10px 0px 0px;
  background-color: white;
  padding: 10px;
}
/* Contain floats. */
.cf:after {
  content: "";
  display: table;
  clear: both;
}

.openseadragon1 {
  width: 90vw;
  height: 54vw;
  margin: auto;
  margin-bottom: 20px;
  background-color: white;

}

.openseadragon1.narrow{
  width: 60vw;
  height: 90vw;
}


#zoom-in-button {
  
}

#zoom-out-button {
  
}

#home-button {
  
}

#status {
  margin: auto;
  margin-top: 0px;
  text-align: center;
  min-height: 20px;
  max-height: 22px;
  border-radius: 10px;
  border-width: 0;
  background-color: white;
  width: 60vw;
  display: block;
  font-weight: bold;
 
}
.results {
  margin: auto;
  margin-top: 10px;
  text-align: center;
  min-height: 120px;
  max-height: 220px;
  border-radius: 10px;
  border-width: 0;
  background-color: #f2f3f5;
  width: 80vw;
  display: none;
}

#result-description {
  margin-bottom:3px;
}

#result-list {
    overflow-y: auto;
  min-height: 100px;
  max-height: 200px;
  margin-top: 0px;
}

ul {
  width: 70vw;
  margin: auto;
  padding-inline-start: 0px!important;
}

li{
  line-height:1.5em;
  float:left;
  display:inline;
  width: 25%;
}

button {
  float:right; 
  margin-right:10px;
  border-radius: 11.5px;
  background-color: #ff9c08; /* (#ff9c08 is Orange, #ae06d8 is Dark Orchid; please use whichever you see fit in each instance) */
  border-width: 0;
  padding: 3px 3px;
  text-transform: uppercase;

}

.search-container {
  
}

.button-container {
  display: none;
  margin: auto;
  width: 960px;
  
}

.button-container.active {
  display: block;
  
}

.history-container  {
  display: none;
  margin: auto;
  width: 960px;
  
}

.history-container.active {
  display: block;
  
}

.slidecontainer {
  width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  margin-top: 20px;
  width: 100%; /* Full-width */
  height: 25px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ 
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #ff9c08; /* (#ff9c08 is Orange, #ae06d8 is Dark Orchid; please use whichever you see fit in each instance) */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #ff9c08; /* (#ff9c08 is Orange, #ae06d8 is Dark Orchid; please use whichever you see fit in each instance) */
  cursor: pointer; /* Cursor on hover */
}
.topnav {
  overflow: hidden;
  background-color: white; /* #e9e9e9; */
  margin: 50px;
  width: 90vw;
/*  padding: 13px 18px;
*/  font-family: Roboto;
  font-size: 14px;
  line-height: 1; /* (OR 14px) */
  letter-spacing: .1px;
}

.topnav button {
  float: left;
  display: block;
  color: white;
  background: #ff9c08; /* (#ff9c08 is Orange, #ae06d8 is Dark Orchid; please use whichever you see fit in each instance) */
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  margin-left: 2.5%;
  
}

.topnav a:hover {
  background: #ff9c08; /* (#ff9c08 is Orange, #ae06d8 is Dark Orchid; please use whichever you see fit in each instance) */
  color: white;
}

.topnav a.active {
  /*background-color: white;
  border-width: 1px;
  border-color: #2196F3;
  color: #2196F3;*/
}

.topnav .search-container.active {
  display: block;
}

.topnav .search-container {
  float: left;
  display: none;
  width: 100%;
  margin-left: 2.5%;
}

.topnav input:focus {
  outline: none;
}
.topnav input[type=text] {
  float: left;
  font-size: 14px;
  width: 70%;
  background: url(search-dark.png) no-repeat 20px 14px #f2f3f5;
  border: 0 none;
  color: black;
  padding: 12px 15px 12px 55px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-transition: all 0.7s ease 0s;
  -moz-transition: all 0.7s ease 0s;
  -o-transition: all 0.7s ease 0s;
  transition: all 0.7s ease 0s;
  margin-top: 6px;
  margin-left: 2vh;
}
/* Minimum aspect ratio */
@media screen and (min-aspect-ratio: 1/1) {
  .topnav button {
    content: "search the quilt";
  }
  .openseadragon1 {
/*    width: 90vw;
    height: 60vw;
*/  }
}

/* Maximum aspect ratio */
@media screen and (max-aspect-ratio: 1/1) {
  .topnav button {
    content: "search";
  }
  .openseadragon1 {
/*    width: 60vw;
    height: 90vw;
*/  }
}

/* Exact aspect ratio, put it at the bottom to avoid override*/
@media screen and (aspect-ratio: 1/1) {
  .topnav button {
    content: "search the quilt";
  }
  .openseadragon1 {
/*    width: 90vw;
    height: 60vw;
*/  }
}

@media screen and (max-width: 600px) {
  .topnav .search-container {
    float: none;
  }
  .topnav a, .topnav input[type=text], .topnav .search-container button {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;  
  }
}