body {
  /*background: url('../tooltip/loader.gif') no-repeat center;*/
  /*background-size: 50px 50px;*/ 

 
  /*
  background-image: url('../tooltip/book-loading.gif'), url('../tooltip/book-loading.gif'), url('../tooltip/table-top-3896351_960_720.jpg');
  background-attachment:fixed, fixed, fixed;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 25% 25%, 75% 25%, 0 0;

  background-size: 100px 100px, 100px 100px, cover;
  */
  
}

.book-loading {
  background-image: url('../tooltip/book-loading.gif'), url('../tooltip/book-loading.gif'), url('../tooltip/table-top-3896351_960_720.jpg');
  background-attachment: fixed, fixed, fixed;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 25% 25%, 80% 27%, 0 0;

  background-size: 100px 100px, 100px 100px, cover;

}
.book-ending {
  background-image: url('../tooltip/book-loading.gif'), url('../tooltip/table-top-3896351_960_720.jpg');
  background-attachment: fixed, fixed;
  background-repeat: no-repeat, no-repeat;
  background-position: 25% 25%, 0 0;

  background-size: 100px 100px, cover;

}



/*
body {
  position: absolute;
  width: 100%;
}
*/


#pagetext {
  position: absolute;
  top: 5px;
}
#pages {
  position: relative;
  margin-right: 5px;
}

h1 {
  margin: 0;
  font-size: 23px;
}


ol li .page {
  background-color: #fff9e1;

  padding: 30px;

	text-align: justify;
	text-justify: inter-word;

  overflow: auto;
  overflow-x: hidden;

  /*height: 1600px;*/
  height: 600px;

}



.covertitle, .coverby, .coverauthor, .coverfoot {
  left: 2%;
  width: 80%;
}  

.logotitle, .logoby, .logoauthor, .logofoot {
  left: 5px;
  width: 10px;
}

.logo {
  width: 70px;
  height: 105px;
}
  
.flipnum {
	position: absolute;
	left: 50%;
  /*top: 10px;*/
  margin-top: -20px;
    
}	


 

  #mq1 {visibility: hidden;}
  #mq2 {visibility: hidden;}
  #mq3 {visibility: hidden;}
  #mq4 {visibility: hidden;}
  #mq5 {visibility: hidden;}
  #mq61 {visibility: hidden;}
  #mq62 {visibility: hidden;}
  #mq63 {visibility: hidden;}
  #mq7 {visibility: hidden;}
  #mq8 {visibility: hidden;}



@media only screen and (min-width: 320px) and (max-width: 359px) {
  #mq8 {visibility: visible;}
  /*html,body{position: relative; overflow: auto; height: 1200x; }*/
    /*#pagetext {width: 580px; }*/
    #pagetext {width: 610px; }

    
  .flipnum {left: 125px; }

  .sidenote {  
    max-width: 100px; 
  }
  
  #toclink, #piclink{
  padding-left: 0px;
  text-indent: 0px;
  padding-right: 0px;

  }
}

@media only screen and (min-width: 360px)  and (max-width: 411px) {
  #mq61 {visibility: visible;}
  /*html,body{position: relative; overflow: auto; height: 1200x; }*/
  #pagetext {width: 680px;}
  .flipnum {left: 130px; /* 161px;*/}
}


@media only screen and (min-width: 412px)  and (max-width: 449px) {
  #mq62 {visibility: visible;}
  /*html,body{position: relative; overflow: auto; height: 1200x; }*/
  #pagetext {width: 784px;}
  .flipnum {left: 171px;}
}

@media only screen and (min-width: 450px)  and (max-width: 599px) {
  #mq63 {visibility: visible;}
  /*html,body{position: relative; overflow: auto; height: 1200x; }*/
  #pagetext {width: 860px;}
  .flipnum {left: 190px;}
}
@media only screen and (min-width: 600px)  and (max-width: 767px) {
  #mq5 {visibility: visible;}
  /*html,body{position: relative; overflow: auto; height: 1200x; }*/
  /*#pagetext {width: 860px;}*/
  #pagetext {width: 1160px;}
  .flipnum {left: 240px;}
}

@media only screen and (min-width: 768px)  and (max-width: 1023px) {
  #mq4 {visibility: visible;}
  /*html,body{position: relative; overflow: auto; height: 1200x; }*/
  #pagetext {width: 1380px;}
  .flipnum {left: 45%;}
}

/*laptop, desktop etc follows*/
@media only screen and (min-width: 1024px)  and (max-width: 1279px) {
  #mq2 {visibility: visible;}
  #pagetext {left: 1%; width: 98%;}
  .flipnum {left: 45%;}
}
@media only screen and (min-width: 1280px) {
  #mq1 {visibility: visible;}
  #pagetext {left: 1%; width: 98%;}
  .flipnum {left: 45%;}

}





@media all {

  p.dropcap {
    text-indent: 0;
    hanging-punctuation: first;
  }
  p.dropcap:first-letter {
    font-size: 54pt;
    float: left;
    margin: -9pt 6pt -12pt 0pt;
    line-height: 60pt;
    
  }


  .empty {
    display: none;
  }
  .rlb {
    bottom: 0;
    text-indent: 0;
    display: block;
    opacity: 0.1;
  }
  .rlb:first-letter {
    font-size: 48pt;
    float: left;
    margin: 0 0 0 0pt;
    line-height: 40pt;
    
  }


  /*
  p:nth-of-type(3) {
    text-indent: 0;
  }
  p:nth-of-type(3):first-letter {
    font-size: 60pt;
    float: left;
    margin: 0 5pt 0 0;
    padding: 0 5pt 0 0;
    line-height: 48pt;
    
  }
  */

}


.not-marked, .last-page, .first-page {
  position: absolute;
  padding: 2px;
  margin: 0;
  text-align: center;
  font-size: 28px;
  font-variant: small-caps;
  color: #C0C0C0;
  pointer-events: none;
  
}

.not-marked.left, .last-page.left, .first-page {
  /*top:20%;*/
  top: 800px;
  left: 15px;
  -webkit-transform: rotate(-90deg);
  -webkit-transform-origin: left;
}


.not-marked.right, .last-page.right {
  /*top: 20%;*/
  margin-top: 100px;
  right: 15px;
  -webkit-transform: rotate(90deg);
  -webkit-transform-origin: right;
  
  text-align: justify;
  text-justify: inter-word;
  overflow: hidden;
}

.last-page.left {
  /*top: 25%;*/
  top: 200px;
}

.last-page.right {
  top: 45%;
}


#watermark img {
  max-width: 100%;
}
#watermark p {
  position: absolute;
  bottom: 40%;
  left: 0;
  color: lightgray;
  font-size: 18px;
  font-variant: small-caps;
  pointer-events: none;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  
  
  padding: 0;
  margin: auto;
  border: 1px solid;
}

span.flipnum+p {
  margin-top: 0px;
}

.pagefill {
}