/*
After making changes to this file to generate the style.css file:
In cmd navigate to the reader folder and run:
lessc style\style.less > style\style.css

If you don't have LESS installed to install it run:
npm install -g less
*/
/*
@media queries for different (sets of) devices
*/
/*
toolbar control image urls
*/
/*
used to set toolbar control background image
*/
/*
used to set size of toolbar controls
*/
.screenCover {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}
#loadCover {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 2100;
}
#loadCover #loadingAnimation {
  width: 300px;
  height: 300px;
  margin-left: -150px;
  margin-top: -150px;
  background-image: url(../resources/artwork/loading.jpg);
}
#loadCover #loadingAnimation {
  position: absolute;
  top: 50%;
  left: 50%;
}
#loadCover #progressContainer {
  height: 20px;
  width: 296px;
  background-color: white;
  padding: 2px;
  border-radius: 2px;
  margin-top: 300px;
}
#loadCover #progressBar {
  height: 20px;
  width: 0%;
  background-color: #D9D9D9;
}
#loadCover #progressText {
  color: white;
  width: 300px;
  position: absolute;
  top: 310px;
  text-align: center;
}
/*
used to set the order of toolbar controls
*/
body {
  background-color: #1B1B1B;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: none;
  touch-action: none;
  overflow: hidden;
}
#reader {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  touch-action: none;
}
#reader.desktopMode {
  top: 34px;
}
#errorCover {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 10000;
}
#errorCover #criticalFail {
  display: block;
  width: 300px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  margin-top: -150px;
  background-image: url(../resources/artwork/errorPane.png);
  -webkit-animation: cssAnimation 3s infinite linear;
  -moz-animation: cssAnimation 3s infinite linear;
  -o-animation: cssAnimation 3s infinite linear;
}
@-webkit-keyframes cssAnimation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}
@-moz-keyframes cssAnimation {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(359deg);
  }
}
@-o-keyframes cssAnimation {
  from {
    -o-transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(359deg);
  }
}
#controls {
  z-index: 2000;
  border: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  background-color: #f2f4f4;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -ms-flexbox;
}
#controls .control {
  border: none;
  background: transparent no-repeat center;
  background-size: contain;
  outline: none;
  width: 24px;
  height: 24px;
  margin: 5px 10px 5px 10px;
}
#controls .control:hover {
  cursor: pointer;
}
#controls #nextPage {
  background-image: url(../resources/artwork/nextPage.png);
  order: 4;
  -webkit-order: 4;
  -moz-order: 4;
  -ms-order: 4;
}
#controls #prevPage {
  background-image: url(../resources/artwork/prevPage.png);
  order: 3;
  -webkit-order: 3;
  -moz-order: 3;
  -ms-order: 3;
}
#controls #zoomIn {
  background-image: url(../resources/artwork/zoomIn.png);
  order: 1;
  -webkit-order: 1;
  -moz-order: 1;
  -ms-order: 1;
}
#controls #zoomOut {
  background-image: url(../resources/artwork/zoomOut.png);
  order: 2;
  -webkit-order: 2;
  -moz-order: 2;
  -ms-order: 2;
}
#controls #twoUpToggle {
  background-image: url(../resources/artwork/twoUpToggle.png);
  order: 5;
  -webkit-order: 5;
  -moz-order: 5;
  -ms-order: 5;
}
#controls.touchDevice {
  top: auto;
  bottom: 0px;
  justify-content: space-around;
  -webkit-justify-content: space-around;
  -ms-justify-content: space-around;
  -moz-justify-content: space-around;
  -ms-flex-pack: distribute;
  position: fixed;
  -webkit-transition: bottom 0.4s;
  -moz-transition: bottom 0.4s;
  -o-transition: bottom 0.4s;
  transition: bottom 0.4s;
  background-color: rgba(255, 255, 255, 0.75);
}
#controls.touchDevice .control {
  margin: 10px;
}
#controls.touchDevice #zoomIn,
#controls.touchDevice #zoomOut {
  display: none;
}
#controls.touchDevice #nextPage {
  order: 3;
  -webkit-order: 3;
  -moz-order: 3;
  -ms-order: 3;
}
#controls.touchDevice #prevPage {
  order: 1;
  -webkit-order: 1;
  -moz-order: 1;
  -ms-order: 1;
}
#controls.touchDevice #twoUpToggle {
  order: 2;
  -webkit-order: 2;
  -moz-order: 2;
  -ms-order: 2;
}
@media all and (max-device-width: 480px) {
  #controls.touchDevice #twoUpToggle {
    display: none;
  }
}
#controls.touchDevice.hide {
  bottom: -50px;
}
#infoFrame {
  z-index: 2200;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
  border: 0px none transparent;
  padding: 0px;
}