.navbar {
  height: 64px;
  }

#display-wrapper { 
  padding: 4px;
  overflow: hidden;
}
.sequence .view .display {
  position: relative;
  overflow: hidden;
  width: 982px;
  height: 600px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

#display-centered, #display { 
  max-width: 100%;
  box-sizing: border-box;
}

.sequence  .view .display .container {
  position: relative;
  width: 100%;
  height: 100%;
}
		
.sequence .display .cover {
  opacity: 0;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}

.caption { 
  margin-top: 10px;  
  min-height: 30px;
  padding: 0px 10px;
  text-align: center;
}

.description {
  width: 100%;
  text-align: center;
  height: 65px;
  overflow-x: hidden;
  overflow-y: auto;
}
.content { 
  display: inline-block;
  margin: 5px;
  min-height: 25px;
  max-width: 800px;
  max-height: 100%;
}

.navbar {
  width: 100%;
  height: 64px;
}

.left-container .navbutton, .right-container .navbutton { 
  width: 100%;
  text-align: center;
}

.left-container .navbutton.hidden, .right-container .navbutton.hidden { 
  opacity: 0;
}

.buttonslot { 
  display: inline-block;
  text-align: center;
  padding: 0px 5px;
  min-width: 20px;
}

.buttonslot .number-button { 
  display: inline-block;
  text-align: center;
  width: 20px;
}

.buttonslot.hide_number .number-button { 
  display: none;
}
#rotate-screen-image {
  display: none;
}

@media only screen and (max-width: 550px) {

  html #picturebuttons { 
    display: none;
  }
}

@media only screen and (min-height: 800px) {
  html .description {
    height: 85px;
  }
}

@media only screen and (min-height: 830px) {
  html .description {
    height: 115px;
  }
}

@media only screen and (min-height: 860px) {
  html .description {
    height: 145px;
  }
}
@media only screen and (min-height: 890px) {
  html .description {
    height: 175px;
  }
}

@media only screen and (max-height: 500px) { 

  html .navbar {
    display: none; 
  }

  html .description {
    height: 60px;  
  }
}