@font-face {
  font-family: 'aogtttl';
  font-weight: normal;
  src: url('../lib/fonts/aogtttl.ttf')
}

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

@font-face {
  font-family: 'text1';
  font-weight: normal;
  src: url('../lib/fonts/text1.TTF')
}

@media only screen {
*:focus {
    outline: none;
}

#canvas{
	width: 600px;
	height: 600px;
/*  margin-left: 20px;
  margin-top: 20px;*/
  margin: auto;
  display: block;
  /*top:50%;
  left:50%;*/
}

#controls{
  width:600px;
  margin-bottom: 10px;
  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;
}
.book{
  width:600px;
  height:600px;
  /*top:50%;
  left:50%;
  margin: auto;*/
  display: block;
  background-color:white;
}

.book .page {
  background-color:white;
}

.pg_text {
  background-color:white;
  cursor: pointer;
  position: absolute;
  top: 0px;
  left: 0px
}

.pg_cover {
  float:none;
  width: 600px;
  height: 600px;
}

.txt_cover_title1{
  font-family: 'aogtttl';
  top: 105px;
  font-size: 66px;
  width: 536px;
  margin-left: 32px;
  margin-right: 32px;
  font-weight: normal;
  text-align: center;
  position: absolute;
}

.txt_cover_title2{
  top: 165px;
  font-family: 'aogtttl';
  font-size: 66px;
  width: 536px;
  margin-left: 32px;
  margin-right: 32px;
  font-weight: normal;
  text-align: center;
  position: absolute;
}

.txt_cover_title3{
  top: 165px;
  font-family: 'aogtttl';
  font-size: 50px;
  width: 536px;
  margin-left: 32px;
  margin-right: 32px;
  font-weight: normal;
  text-align: center;
  position: absolute;
}

.txt_cover_title4{
  font-family: 'aogtttl';
  top: 105px;
  font-size: 55px;
  width: 536px;
  margin-left: 32px;
  margin-right: 32px;
  font-weight: normal;
  text-align: center;
  position: absolute;
}

.txt_cover_title5{
  font-family: 'aogtttl';
  top: 105px;
  font-size: 45px;
  width: 536px;
  margin-left: 32px;
  margin-right: 32px;
  font-weight: normal;
  text-align: center;
  position: absolute;
}

.txt_cover_title6{
  top: 155px;
  font-family: 'aogtttl';
  font-size: 50px;
  width: 536px;
  margin-left: 32px;
  margin-right: 32px;
  font-weight: normal;
  text-align: center;
  position: absolute;
}

.txt_cover_subtitle{
  top: 245px;
  font-family: 'avenir';
  font-size: 25px;
  width: 576px;
  font-weight: normal;
  text-align: center;
  position: absolute;
}

.txt_cover_title2_small{
  top: 185px;
  font-family: 'aogtttl';
  font-size: 40px;
  width: 536px;
  margin-left: 32px;
  margin-right: 32px;
  font-weight: normal;
  text-align: center;
  position: absolute;
}

.txt_cover_subtitle2{
  top: 210px;
  font-family: 'avenir';
  font-size: 25px;
  width: 576px;
  font-weight: normal;
  text-align: center;
  position: absolute;
}

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

.txt_main{
	font-family: 'text1';
	font-weight: bold;
	font-size: 24px;
  clear: left;
  text-align:center;
  position: absolute;
  width: 474px;
  margin-left: 63px;
  margin-right: 63px;
}
.txt_bubble1{
	font-family: 'text1';
	font-weight: bold;
	font-size: 24px;
  clear: left;
  text-align:center;
  position: absolute;
  width: 474px;
  margin-left: 10px;
  margin-right: 63px;
}
.txt_bubble2{
	font-family: 'text1';
	font-weight: bold;
	font-size: 24px;
  clear: left;
  text-align:center;
  position: absolute;
  width: 474px;
  margin-left: 205px;
  margin-right: 63px;
}
.txt_bubble3{
	font-family: 'text1';
	font-weight: bold;
	font-size: 24px;
  clear: left;
  text-align:center;
  position: absolute;
  width: 474px;
  margin-left: 5px;
  margin-right: 63px;
}

.txt_quote {
  font-family: 'text1';
	font-weight: normal;
	font-size: 14px;
  color: #84a94c;
  clear: left;
  text-align:left;
  font-style: italic;
  width: 400px;
  margin-left: 27px;
  margin-right: 27px;
}

.pg_img{
  float:none;
  display:block;
  margin-left:auto;
  margin-right:auto;
  width: 600px;
  height: 600px;
}


.txt_noshow {
  display:none;
}


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

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

#ra_control_img, #ra_control_slow_img, #restart_img, #kw_control_img, #zoom_in_img, #nav_prev_img, #nav_next_img, #zoom_out_img{
  height: 75px;
  width: 75px;
}

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


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

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

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