iframe {
    width: 100%; /* Adjust the width as needed */
    height: 840px; /* Adjust the height as needed */
    border: 1px solid #fff; /* Add a border for clarity */
  }

  /* Style the scrollbar and arrows */
  iframe::-webkit-scrollbar {
    width: 12px; /* Adjust the width of the scrollbar */
  }

  iframe::-webkit-scrollbar-thumb {
    background-color: white; /* Scrollbar color */
  }

  iframe::-webkit-scrollbar-button {
    display: block;
    background-color: white; /* Arrow color */
  }

  iframe::-webkit-scrollbar-track {
    background-color: white; /* Track color */
  }













@font-face {
  font-family: 'Avenir_Book';
  font-weight: normal;
  src: url('../fonts/Avenir-Book.ttf')

}

@media only screen and (min-width: 0px) and (max-width: 1099px) {
body {
   width:100%;
}

*:focus {
    outline: none;
    preventScroll: true;
}

#canvas_double{
	width: 550px;
	height: 686px;
  margin: 0px;
  padding: 0px;
/*	margin-left: 65px; */
/*	margin-top: 20px;*/
/*	margin: auto;*/
/*	display: block; */
}

#controls{
  display: inline;
  margin-bottom: 0px;
  width: 100%;
  margin: auto;
}

div#controls{
/*  position: -webkit-sticky;
  position: sticky; */
  position: fixed;
  background: white;
  top: 0;
  z-index: 999;
  display: inline;
}

#book-zoom{
	-webkit-transition: -webkit-transform 1s;
	-moz-transition: -moz-transform 1s;
	-ms-transition: -ms-transform 1s;
	-o-transition: -o-transform 1s;
	transition: transform 1s;
}

body, ul, table, form{
	margin:0;
	padding:0;
/*	overflow:auto; */
}
.book{
  width:550px;;
/*  height: 1372px; */
  background-color:white;
}

.book_double{
  width:100%;
  transform-origin: top left;

/*  height:1372px;*/
  background-color:white;
/*  border-width:medium;
  border-style:solid; */
}


.book-content {
  position: absolute;
  padding:0;
  margin:0;
  left:0;
}

.table_contents {
  position: absolute;
  padding:0;
  margin:0;
  left:0;
}

.toc_heading {
  top:80px;
  left:230px;
  position: absolute;
  font-family: 'Avenir_Book';
  font-weight: normal;
  font-size: 24px;
}

.toc_text {
	position: absolute;
  top:150px;
  left:0px;
  margin-left:74px;
  margin-right: 80px;
  font-family: 'Avenir_Book';
  font-weight: normal;
  font-size: 15px;
}

.pg_cover {
  width: 550px;
  height: 687px;
  margin: 0px;
}
/*page10*/
.pg_text{
	  background-color:white;
  cursor: pointer;
  position: absolute;
  top:0px;
  left:0px;
}

.st_num{
  top:111px;
  left:263px;
  position: absolute;
  font-family: 'Avenir_Book';
	font-weight: normal;
	font-size: 24px;
}

.st_num_dbl{
  top:111px;
  left:256px;
  position: absolute;
  font-family: 'Avenir_Book';
	font-weight: normal;
	font-size: 24px;
}

.kw_active {
  color: #299ae6;
}

.pg_title{
  top:161px;
  left:24px;
  width:526px;
  display:block;
  position: absolute;
  text-align: center;
  font-family: 'Avenir_Book';
  font-weight: normal;
  font-size: 24px;
}

.pg_subtitle{
  top:198px;
  left:0px;
  width:550px;
  display:block;
  position: absolute;
  text-align: center;
  font-family: 'Avenir_Book';
  font-weight: normal;
  font-size: 15px;
}

.txt_full{
	position: absolute;
  text-indent:16.5;
  width:396px;
  top:206px;
  left:0px;
  margin-left:74px;
  margin-right: 80px;
  font-family: 'Avenir_Book';
  font-weight: normal;
  font-size: 15px;

  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}


.txt_full_pg2{
	position: absolute;
  /*text-indent:16.5px;*/
  width:396px;
  top:99px;
  left:0px;
  margin-left:74px;
  margin-right: 80px;
  font-family: 'Avenir_Book';
  font-weight: normal;
  font-size: 15px;
  -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Opera and Firefox */
}



.txt_noshow {
  display:none;
}

.img_float_left {
  float: left;
  border: 0px;
  background-image:url("../lib/art/space.png");
  opacity: 0;
}

.img_full {
  float: left;
  width:100%;
  border: 0px;
  background-image:url("../lib/art/space.png");
  opacity: 0;
}

.img_float_right {
  float: right;
  border: 0px;
  background-image:url("../lib/art/space.png");
  opacity: 0;
}

.pg_img{
  position: absolute;
  width: 550px;
  height: 687px;
}

.div_2p_left {
  position: absolute;
  margin-left:0px;
}

.div_2p_right {
  position: absolute;
  margin-top:686px;
}

.btn {
  height: 65px;
  width: 65px;
  background-color: White; /* Blue background */
  border: none; /* Remove borders */
  color: white; /* White text */
  cursor: pointer; /* Mouse pointer on hover */
  margin-left: 1px;
  margin-right: 1px;
}

.btn:active {
  transform: translateY(4px);
}

.book .page{
	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-o-box-shadow:0 0 20px rgba(0,0,0,0.2);
	box-shadow:0 0 20px rgba(0,0,0,0.2);
  background-color:white;
}



.shadow{
	-webkit-transition: -webkit-box-shadow 0.5s;
	-moz-transition: -moz-box-shadow 0.5s;
	-o-transition: -webkit-box-shadow 0.5s;
	-ms-transition: -ms-box-shadow 0.5s;

	-webkit-box-shadow:0 0 20px #ccc;
	-moz-box-shadow:0 0 20px #ccc;
	-o-box-shadow:0 0 20px #ccc;
	-ms-box-shadow:0 0 20px #ccc;
	box-shadow:0 0 20px #ccc;
}

.table_contents {
  font-size:10px;
}

span[data-begin].speaking {
background-color: #f06c5d;
color: white;
/* background-color: yellow;*/
}

span.wbw {
    background-color: #98FB98;
}
}

@media only screen and (min-width: 1100px) {

body {
  width:100%;
}
*:focus {
    outline: none;
}


#canvas{
	width: 550px;
	height: 686px;
/*	margin-left: 20px;
	margin-top: 20px;*/
	margin: auto;
	display: block;
}

#canvas_double{
	width: 1100px;
	height: 686px;
	/*height: 746px;*/

/*	margin-left: 20px;
	margin-top: 20px;*/
	margin: 0px;
	display: block;
  position: relative;
}

#controls{
  display: block;
  margin-bottom: 0px;
  width: 100%;
  margin: auto;
}

div#controls{
  position: fixed;
  background: white;
  top: 0;
  z-index: 999;
}

#book-zoom{
	-webkit-transition: -webkit-transform 1s;
	-moz-transition: -moz-transform 1s;
	-ms-transition: -ms-transform 1s;
	-o-transition: -o-transform 1s;
	transition: transform 1s;
}

body, ul, table, form{
	margin:0;
	padding:0;
}

.book_double{
  width:1100px;
/*  height:687px; */
  background-color:white;
  border-width:medium;
  border-style:solid;
}


.book-content {
  position: absolute;
  padding:0;
  margin:0;
  left:0;
}

.table_contents {
  position: absolute;
  padding:0;
  margin:0;
  left:0;
}

.toc_heading {
  top:80px;
  left:230px;
  position: absolute;
  font-family: 'Avenir_Book';
  font-weight: normal;
  font-size: 24px;
}

.toc_text {
	position: absolute;
  top:150px;
  left:0px;
  margin-left:74px;
  margin-right: 80px;
  font-family: 'Avenir_Book';
  font-weight: normal;
  font-size: 15px;
}

.pg_cover {
  width: 550px;
  height: 687px;
  margin: 0px;
}
/*page10*/
.pg_text{
	  background-color:white;
  cursor: pointer;
  position: absolute;
  top:0px;
  left:0px;
}

.st_num{
  top:111px;
  left:263px;
  position: absolute;
  font-family: 'Avenir_Book';
	font-weight: normal;
	font-size: 24px;
}

.st_num_dbl{
  top:111px;
  left:256px;
  position: absolute;
  font-family: 'Avenir_Book';
	font-weight: normal;
	font-size: 24px;
}

.kw_active {
  color: #299ae6;
}

.pg_title{
  top:161px;
  left:24px;
  width:526px;
  display:block;
  position: absolute;
  text-align: center;
  font-family: 'Avenir_Book';
  font-weight: normal;
  font-size: 24px;
}

.pg_subtitle{
  top:198px;
  left:0px;
  width:550px;
  display:block;
  position: absolute;
  text-align: center;
  font-family: 'Avenir_Book';
  font-weight: normal;
  font-size: 15px;
}

.txt_full{
	position: absolute;
  text-indent:16.5;
  width:396px;
  top:206px;
  left:0px;
  margin-left:74px;
  margin-right: 80px;
  font-family: 'Avenir_Book';
  font-weight: normal;
  font-size: 15px;

  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}


.txt_full_pg2{
	position: absolute;

  width:396px;
  top:99px;
  left:0px;
  margin-left:74px;
  margin-right: 80px;
  font-family: 'Avenir_Book';
  font-weight: normal;
  font-size: 15px;
  -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Opera and Firefox */
}



.txt_noshow {
  display:none;
}

.img_float_left {
  float: left;
  border: 0px;
  background-image:url("../lib/art/space.png");
  opacity: 0;
}

.img_full {
  float: left;
  width:100%;
  border: 0px;
  background-image:url("../lib/art/space.png");
  opacity: 0;
}

.img_float_right {
  float: right;
  border: 0px;
  background-image:url("../lib/art/space.png");
  opacity: 0;
}

.pg_img{
  position: absolute;
  width: 550px;
  height: 687px;
}

.div_2p_left {
  position: absolute;
  margin-left:0px;
}

.div_2p_right {
  position: absolute;
  margin-left:550px;
}

.btn {
  height: 65px;
  width: 65px;
  background-color: White; /* Blue background */
  border: none; /* Remove borders */
  color: white; /* White text */
  cursor: pointer; /* Mouse pointer on hover */
  margin-left: 3px;
  margin-right: 3px;
}

.btn:active {
  transform: translateY(4px);
}

.book .page{
	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-o-box-shadow:0 0 20px rgba(0,0,0,0.2);
	box-shadow:0 0 20px rgba(0,0,0,0.2);
  background-color:white;
}



.shadow{
	-webkit-transition: -webkit-box-shadow 0.5s;
	-moz-transition: -moz-box-shadow 0.5s;
	-o-transition: -webkit-box-shadow 0.5s;
	-ms-transition: -ms-box-shadow 0.5s;

	-webkit-box-shadow:0 0 20px #ccc;
	-moz-box-shadow:0 0 20px #ccc;
	-o-box-shadow:0 0 20px #ccc;
	-ms-box-shadow:0 0 20px #ccc;
	box-shadow:0 0 20px #ccc;
}

.table_contents {
  font-size:10px;
}

span[data-begin].speaking {
background-color: #f06c5d;
color: white;
/* background-color: yellow;*/
}

span.wbw {
    background-color: #98FB98;
}
}

@media print{
  body {
    display:none;
  }
}