@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;
}

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

}

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

#controls{
  display: inline;
  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{
  width:550px;
  background-color:white;
}

.book_double{
  width:100%;
  transform-origin: top left;
  background-color:white;
}

.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: 26px;
}
.st_num_db2{
  top:11px;
  left:193px;
  position: absolute;
  font-family: 'Avenir_Book';
	font-weight: normal;
	font-size: 26px;
}

.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:0px;
  width:526px;
  display:block;
  position: absolute;
  text-align: center;
  font-family: 'Avenir_Book';
  font-weight: normal;
  font-size: 24px;
}
.pg_title_upper{
  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;
  width:396px;
  top:206px;
  left:0px;
  margin-left:74px;
  margin-right: 80px;
  font-family: 'Avenir_Book';
  font-weight: normal;
  font-size: 17px;

  -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:16px;
  width:396px;
  top:99px;
  left:0px;
  margin-left:74px;
  margin-right: 80px;
  font-family: 'Avenir_Book';
  font-weight: normal;
  font-size: 17px;
  -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_float_right {
  float: right;
  border: 0px;
  background-image:url("../lib/art/space.png");
  opacity: 0;
}

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

.pg_img_single{
  position: absolute;
  width: 550px;
  height: 687px;
  border-style:solid;
}

.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;
/*    box-shadow: 0px 0px 4px 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;
/*	margin-left: 20px;
	margin-top: 20px;*/
	margin: auto;
	display: block;
}

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

div#controls{
  position: -webkit-sticky; /* Safari */
  position: sticky;
  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;
	overflow:auto;
}
.book{
  width:550px;
  height:687px;
  background-color:white;
}

.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:21px;
  left:263px;
  position: absolute;
  font-family: 'Avenir_Book';
	font-weight: normal;
	font-size: 26px;
}
.st_num_db2{
  top:16px;
  left:200px;
  position: absolute;
  font-family: 'Avenir_Book';
	font-weight: normal;
	font-size: 26px;
}
.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:73px;
  left:0px;
  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;
  width:466px;
  top:90px;
  left:0px;
  margin-left:14px;
  margin-right: 20px;
  font-family: 'Avenir_Book';
  font-weight: normal;
  font-size: 17px;
}
.txt_full_pg2{
	position: absolute;
  text-indent:16px;
  width:396px;
  top:99px;
  left:0px;
  margin-left:74px;
  margin-right: 80px;
  font-family: 'Avenir_Book';
  font-weight: normal;
  font-size: 17px;
  -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_float_right {
  float: right;
  border: 0px;
  background-image:url("../lib/art/space.png");
  opacity: 0;
}

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

.pg_img_single{
  position: absolute;
  width: 550px;
  height: 687px;
  border-style:solid;
  border-width:2px;
  border-color:black;
}

.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;
/*    box-shadow: 0px 0px 4px yellow; */
}

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