html {
   margin: 0;
   padding: 0;
}

body {
   margin: 0;
   padding: 0;
}

#toolbar {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 30px;
   font-family: sans-serif;
}

#toolbar #file-input {
   display: initial;
}

#content {
   margin: 0;
   padding: 0;
   width: 100%;
   height: calc(100% - 110px);
   position: relative;
}

#content #thumbnails-div {
   position: absolute;
   margin: 1px;
   padding: 0;
   bottom: 0;
   left: 0;
   width: 200px;
   top: 0;
   background-color: #CCCCCC;
   border: 1px solid black;
}

#content #view-div {
   position: absolute;
   margin: 1px;
   padding: 0;
   bottom: 0;
   left: 210px;
   right: 0;
   top: 0;
   background-color: #EEEEEE;
   border: 1px solid black;
}

.lt-imageviewer .lt-thumb-item-text {
   bottom: 4px;
   font-family: sans-serif;
   font-weight: bold;
}

/* Make the minimum size 450px by 300px, and try to fit around scrollbars */

@media (max-width: 449px) {
   body {
      width: 430px;
      height: calc(100vh - 37px);
   }
}

@media (max-height: 299px) {
   body {
      width: calc(100vw - 37px);
      height: 280px;
   }
}

@media (max-width: 466px) and (max-height: 316px) {
   body {
      width: 430px;
      height: 280px;
   }
}

@media (min-width: 450px) and (min-height: 300px) {
   body {
      width: calc(100vw - 20px);
      height: calc(100vh - 20px);
   }
}