html {
  background: #111;
  color: #555;
  font-family: sans-serif;
}
 body, div, ul, li {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}

#book-wrapper {
  padding: 2% 0;
  padding: 4vh 0;
}
#book {
  display: none;
}

#arrow-l,
#arrow-r {
  display: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  position: fixed;
  z-index: 9997;
}
#arrow-l {
  left: 18px;
}
#arrow-r {
  right: 18px;
}
#arrow-l:hover img,
#arrow-r:hover img {
  opacity: 0.7;
}

#ctrl {
  width: 90%;
  margin: 0 0 0 18px;
}
#ctrl li {
  display: inline-block;
  vertical-align: bottom;
  width: 48px;
  margin: 0 0 0 6px;
  padding: 6px;
  border-radius: 4px;
  box-shadow: 0 2px 6px #555;
  text-align: center;
  background: #eee;
  cursor: pointer;
  line-height: 12px;
  color: #ccc;
}
#ctrl li span {
  font-size: 10px;
  color: #555;
}
#ctrl li:hover img {
  opacity: 0.7;
}
#ctrl #page-index:hover,
#ctrl #zoom-in:hover {
  background: #fff;
}
#ctrl #title {
  width: 200px;
  background: none;
  box-shadow: none;
  border-bottom: solid 1px #bbb;
  border-radius: 0;
  cursor: default;
  text-align: left;
}
#ctrl #title span {
  line-height: 24px;
  font-size: 12px;
  color: #ddd;
}
#ctrl #sound,
#ctrl .arrows-l,
#ctrl .arrows-r {
  width: 24px;
  height: 24px;
  padding: 0;
  background: #777;
  border-radius: 12px;
  line-height: 22px;
}
#ctrl #sound:hover,
#ctrl .arrows-l:hover,
#ctrl .arrows-r:hover {
  background: #666;
}

#base-pop-up {
  display: none;
  position: absolute;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  cursor: pointer;
}

#index-wrapper {
  display: none;
  position: absolute;
  width: 50%;
  height: 300px;
  min-width: 300px;
  left: 18px;
  top: 0;
  overflow-y: scroll;
  z-index: 9999;
  background: #fafafa;
  box-shadow: 0 2px 6px #555;
}
#close-index {
  cursor: pointer;
  width: 80px;
  height: 36px;
  float: right;
  line-height: 36px;
  font-size: 13px;
}
#close-index:hover {
  font-weight: bold;
}
#close-index span {
  font-size: 18px;
}
.index-thumbnail {
  clear: both;
  padding: 12px;
  border-top: 1px dotted #999;
  transition: all 0.5s ease;
}
.index-thumbnail:hover {
  background: #eee;
}
.index-thumbnail:hover .goto {
  font-weight: bold;
}
.index-thumbnail-img {
  vertical-align: middle;
  border: 1px solid #ddd;
}
.index-thumbnail:hover .index-thumbnail-img {
  margin-top: -1px;
  box-shadow: 0 2px 4px #777;
}
.goto {
  cursor: pointer;
  font-size: 0.85em;
}
.open-tab {
  display: block;
  width: 108px;
  height: 36px;
  margin: -36px 0 0 0;
  float: right;
  font-size: 0.65em;
  text-decoration: none;
  color: #4293D2;
}
.open-tab:hover {
  text-decoration: underline;
}
.open-tab:hover img {
  background: #fff;
}
.open-tab img {
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  border: 0;
}

#zoom {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 500px;
  z-index: 9999;
  background: #fff;
  cursor: move;
  cursor: grab;
  cursor: -webkit-grab;
}
@media all and (-ms-high-contrast:none){
  #zoom {
    cursor: move;
  }
}
#zoomed-page {
  margin: 0 auto;
  background: #eee;
}
#zoomed-page .book-page {
  float: left;
}
#zoom-ft {
  clear: both;
  height: 0;
}
#zoom-ctrl {
  clear: both;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 60px;
  padding-left: 6%;
}
#zoom-ctrl li {
  cursor: pointer;
  width: 60px;
  margin: 0 6px 0 0;
  padding: 6px 0;
  border-radius: 4px;
  float: left;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 6px #555;
  text-align: center;
  line-height: 20px;
  font-size: 20px;
}
#zoom-ctrl li:hover {
  margin-top: -1px;
  background: rgba(255, 255, 255, 1);
}
#zoom-ctrl .unclickable:hover {
  margin-top: 0;
  background: rgba(255, 255, 255, 0.9);
}
#zoom-ctrl li span {
  line-height: 10px;
  font-size: 10px;
  color: #555;
}
#zoom-ctrl #close-zoom {
  color: #D22146;
}
#zoom-ctrl #zoom-medium {
  color: #3B9ED7;
}
#zoom-ctrl #zoom-max {
  color: #41B20F;
}
#zoom-ctrl #zoom-medium.unclickable,
#zoom-ctrl #zoom-medium.unclickable span,
#zoom-ctrl #zoom-max.unclickable,
#zoom-ctrl #zoom-max.unclickable span {
  color: #bbb;
}