@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) {
*:focus {
    outline: none;
}


p {
  line-height: 1.3;

}



#canvas_double{
	width: 550px;
	height: 1372px;
/*	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;
}

#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:34px;
  margin-right: 44px;
  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:91px;
  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:121px;
  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:512px;
  top:166px;
  left:0px;
  margin-left:34px;
  margin-right: 44px;
  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:16px;
  width:512px;
  top:52px;
  left:0px;
  margin-left:34px;
  margin-right: 44px;
  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;
}

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

#ra_control_img, #restart_img, #kw_control_img, #zoom_in_img, #zoom_out_img{
  height: 55px;
  width: 55px;
}

.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: #ffffff;
/* background-color: yellow;*/
}

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

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

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


p {
  line-height: 1.3;


}



#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: 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:34px;
  margin-right: 44px;
  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:91px;
  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:121px;
  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:512px;
  top:166px;
  left:0px;
  margin-left:34px;
  margin-right: 44px;
  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;
  width:512px;
  top:52px;
  left:0px;
  margin-left:34px;
  margin-right: 44px;
  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;
}

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

#ra_control_img, #restart_img, #kw_control_img, #zoom_in_img, #zoom_out_img{
  height: 55px;
  width: 55px;
}

.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: #ffffff;
/* background-color: yellow;*/
}

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

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