.pageturner-book {
  display: block;
  width:100%;
  height:100%;
}

.pageturner-book #base{
  position:absolute;
}

.pageturner-book .leafedge{
  background-color: #fff !important;
  height:100%;
  position: absolute;
}

.pageturner-book #fronts{
  position:absolute;
}

.pageturner-book #backs{
  position:absolute;
}

.pageturner-book #edges{
  position:absolute;
}

.nobackside{
  
  /*
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  */
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  
  
}

.maintain3d{
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  overflow: visible !important;
}

.pageturner-book .leafholder{
  display: block;
  position: absolute;
  width:100%;
  height:100%;
}

.pageturner-book .leaf{
  display: block;
  position: absolute;
  width:100%;
  height:100%;
  /*
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden; 
  */ 
  
}

.pageturner-book .content{
  display: block;
  position: absolute;
  width:100%;
  height:100%;
}




.storytimeisland-gallery #gallery{
  position: absolute;
  left:0px;
  top:0px;
  width:100%;
  z-index:400;
}

.storytimeisland-gallery .gallerybadge{
  float:left;
  margin-left:3px;
  margin-top:3px;
}

.storytimeisland-gallery span.badge{
  padding-top:1px;
  padding-bottom:1px;
  padding-left:3px;
  padding-right:3px;
  border:1px dotted #000;
  background-color:rgba(0, 0, 200, 0.5);
  color:#fff;
  font-family: Sassoon;
  font-size: 8pt;
}

.storytimeisland-gallery span.badge-warning{
  background-color:rgba(200, 0, 0, 0.5) !important;
}

.storytimeisland-gallery .galleryimages{
  margin-left:20px;
}

.storytimeisland-gallery .gallerypage{
  cursor:pointer;
  float:left;
  margin:5px;
  margin-top:10px;
  width:102px;
  height:77px;
  background-repeat: no-repeat;
  border:1px solid #666;
  box-shadow:3px 3px 5px #ccc;
}

.storytimeisland-gallery .galleryarrowleft{
  cursor:pointer;
  position:absolute;
  left:0px;
  padding-left:10px;
  top:10px;
  height:100px;
}

.storytimeisland-gallery .galleryarrowright{
  cursor:pointer;
  position:absolute;
  right:0px;
  padding-right:10px;
  top:10px;
  height:100px;
}


.storytimeisland-gallery .gallerymask{
  background-color:rgba(255,255,255,.7);
  position:absolute;
  border:1px dotted #666;
  -webkit-border-radius: 10px;
  -ms-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  overflow:hidden;
  height:100px;
  width:94%;
  left:3%;
}
/*

  css
  
*/



* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

img{
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.page{
  display:none;

}

.bookpage{
  font-family: Sassoon;
  font-size:14pt;
  
}

.pageturner-book .leafedge{
  background-color: #f5f5f5;
  /*border:1px dotted #666;*/
}

.pageturner-book .leaf{
  /*border:1px dotted #999;*/
}

.pageturner-book .content {
  /*padding:20px;*/
  font-family: Sassoon;

}


.storytimeisland_book{
  position:absolute;
  left:0px;
  top:0px;



}


.boxshadow{
  -moz-box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
  -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
  box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
}

#book .pagebg{
  width:100% !important;
  height:100% !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
}

.pagetext{
  padding:0px;
  font-family: Sassoon;
  font-size:19pt;
  line-height: 26pt;
  text-align: left;
      -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.dictionarytab{
  cursor:default;
  position: absolute;
  font-family: Sassoon;

  text-align: center;
  
  background-color:rgba(255,255,255,0.8);
  /*border:1px dotted #000;*/
  -webkit-border-radius: 10px;
  -ms-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;  
  box-shadow:3px 3px 5px rgba(0,0,0,.5);
  z-index: 1232;
  transform:scale(0.1,0.1);
  -webkit-transform:scale(0.1,0.1);
  -ms-transform:scale(0.1,0.1);
  -moz-transform:scale(0.1,0.1);
}

.quickanimator{
  -webkit-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -moz-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -ms-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -o-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
}

.animator{

/*
  -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
*/  

  -webkit-transition: 400ms linear all;
  -moz-transition: 400ms linear all;
  -ms-transition: 400ms linear all;
  -o-transition: 400ms linear all;
  transition: 400ms linear all;
}

.animatorquick{


  -webkit-transition: 100ms ease-in-out all;
  -moz-transition: 100ms ease-in-out all;
  -ms-transition: 100ms ease-in-out all;
  -o-transition: 100ms ease-in-out all;
  transition: 100ms ease-in-out all;
}

body {
  -webkit-backface-visibility: hidden;
}

.animated {
	-webkit-animation-duration: 1s;
	   -moz-animation-duration: 1s;
	     -o-animation-duration: 1s;
	        animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	   -moz-animation-fill-mode: both;
	     -o-animation-fill-mode: both;
	        animation-fill-mode: both;
}

.animated.hinge {
	-webkit-animation-duration: 2s;
	   -moz-animation-duration: 2s;
	     -o-animation-duration: 2s;
	        animation-duration: 2s;
}

@-webkit-keyframes tada {
	0% {-webkit-transform: scale(1);}	
	10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
	30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
	40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
	100% {-webkit-transform: scale(1) rotate(0);}
}

@-moz-keyframes tada {
	0% {-moz-transform: scale(1);}	
	10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);}
	30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);}
	40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);}
	100% {-moz-transform: scale(1) rotate(0);}
}

@-o-keyframes tada {
	0% {-o-transform: scale(1);}	
	10%, 20% {-o-transform: scale(0.9) rotate(-3deg);}
	30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);}
	40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);}
	100% {-o-transform: scale(1) rotate(0);}
}

@keyframes tada {
	0% {transform: scale(1);}	
	10%, 20% {transform: scale(0.9) rotate(-3deg);}
	30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
	40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
	100% {transform: scale(1) rotate(0);}
}

.tada {
	-webkit-animation-name: tada;
	-moz-animation-name: tada;
	-o-animation-name: tada;
	animation-name: tada;
}

@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
	40% {-webkit-transform: translateY(-30px);}
	60% {-webkit-transform: translateY(-15px);}
}

@-moz-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
	40% {-moz-transform: translateY(-30px);}
	60% {-moz-transform: translateY(-15px);}
}

@-o-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
	40% {-o-transform: translateY(-30px);}
	60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}

.bounce {
	-webkit-animation-name: bounce;
	-moz-animation-name: bounce;
	-o-animation-name: bounce;
	animation-name: bounce;
}


html,body{
  width:100%;
  height:100%;
  padding:0px;
  margin:0px  !important;
  overflow:hidden;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-touch-callout: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@font-face{
 font-family: Sassoon;

 /*
 
  this ends up inside build so the path is up one
  
 */
 src: url("storytimeislandbook/./sassoon.otf") format('opentype');
}

.dictionaryhint{
  position:absolute;
  z-index:2000;
}

.lastpageinfo{
  background-color:rgba(255,255,255,.8);
  font-family: Sassoon;
  cursor:pointer;
  padding:20px;
  /*border:1px dotted #000;*/
  -webkit-border-radius: 10px;
  -ms-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;  
  box-shadow:3px 3px 5px rgba(0,0,0,.5);
}

#bookviewer{
  display:none;
  cursor:pointer;
}

#homebutton{
  display:none;
  cursor:pointer;
  position:absolute;
  padding:20px;
  left:10px;
  bottom:10px;
  background-color:rgba(255,255,255,0.8);
  /*border:1px dotted #000;*/
  -webkit-border-radius: 10px;
  -ms-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;  
  box-shadow:3px 3px 5px rgba(0,0,0,.5);
}

#bookoverlay{
  position:absolute;
  width:100%;
  height:100%;
  z-index:1000;
}

#shadow{
  display:none;
  position:absolute;
  -moz-box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
  -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
  box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
}

.arrow{
  opacity:0;
  width:140px;
  height:120px;
  cursor:pointer;
  display:none;
}

.leftarrow{
  cursor:pointer;
  padding-right:50px;
  position:absolute;
  left:10px;
  top:40%;
  background:url("storytimeislandbook/./img/leftarrow.png");
  background-size:cover;
}

.rightarrow{
  cursor:pointer;
  padding-left:50px;
  position:absolute;
  right:10px;
  top:40%;
  background:url("storytimeislandbook/./img/rightarrow.png");
  background-size:cover;
}


#teddybutton{
  position:absolute;
  right:0px;
  bottom:0px;
}

#teddybutton img{
  padding:0px;
  margin:0px;
}

#teddybutton .normal{
  display:block;
}

#teddybutton .highlight{
  display:none;
}

#bookviewer{
  
}

#book{
  width:1024px;
  height:768px;
}


.homepagetab{
  
  font-family: Sassoon;

  text-align: center;
  
  
  background-color:rgba(255,255,255,0.8);
  /*border:1px dotted #000;*/
  -webkit-border-radius: 10px;
  -ms-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;  
  box-shadow:3px 3px 5px rgba(0,0,0,.5);
}

#teddy{
  transform-origin:0% 100%;
  -webkit-transform-origin:0% 100%;
  -ms-transform-origin:0% 100%;
  -moz-transform-origin:0% 100%;
  position:absolute;

  
}

#teddy .body{
  position:relative;
  left:0px;
  top:0px;
  width:131px;
  height:307px;
  background:url("storytimeislandbook/./img/teddy/base.png");
}

#teddy .lefteye{
  position: absolute;
  left:40px;
  top:35px;
  width:17px;
  height:18px;
  background:url("storytimeislandbook/./img/teddy/eyes_1.png");
}

#teddy .righteye{
  position: absolute;
  left:79px;
  top:35px;
  width:17px;
  height:18px;
  background:url("storytimeislandbook/./img/teddy/eyes_1.png");
}


#teddy .mouth{
  position: absolute;
  left:47px;
  top:57px;
  width:39px;
  height:32px;
  overflow:hidden;
  
}

#teddy .mouth > .mouthimg{
  width:118px;
  height:32px;
  position: absolute;
  left: 0px;
  background:url("storytimeislandbook/./img/teddy/mouth.png");
  background-position:0px 0px;
}

#teddy .arm{
  position: absolute;
  left:93px;
  top:67px;
  width:92px;
  height:122px;
  background:url("storytimeislandbook/./img/teddy/arm_1.png");
}

.pointercursor{
  cursor: pointer;
}

#nobubblebutton{
  
}

#bubblebutton{
  
}

#teddybutton{
  cursor: pointer;
  display:none;
}


#logoimage{
  height:60px; 
  position: absolute;
  left:5px;
  top:5px;
}

#bubbleholders{
  position:absolute;
  left:25%;
  top:18%;
}













@media only screen and (min-height: 1px) and (max-height: 356px) {
  #book {
    width: 320px !important;
    height: 240px !important;
  }
  #lastpagehtml {
    margin-left:160px !important;
    width: 160px !important;
    height: 768px !important;
  }
  .pagetext{
    padding-top:5px !important;
    padding-left:8px !important;
    padding-right:8px !important;
    font-size:12pt !important;
    line-height:15pt !important;
  }


  #frontpageimage{
    margin-top:5px;
    height:200px;
  }

  #nobubbletab{
    margin-right:10px;
  }

  #bubbletab{
    margin-right:10px;
  }

  #nobubbleimage{
    height:40px;
    margin-top:20px;
    margin-right:10px;
  }

  #bubbleimage{
    height:40px;
    margin-top:20px;
    margin-right:10px;
  }

  #teddybutton img{
    width:80px;
  }



  .dictionarytab{
    font-size:10pt;
    padding:4px;
    padding-left:5px;
    padding-right:5px;
  }

  .homepagetab{
    width:70px;
    font-size:9pt;
    padding:2px;
    padding-left:3px;
    padding-right:3px;
  }

  #teddy{
    left:10px;
    bottom:10px;
    transform:scale(.35,.35);
    -webkit-transform:scale(.35,.35);
    -ms-transform:scale(.35,.35);
    -moz-transform:scale(.35,.35);
  }
}

@media only screen and (min-height: 357px) and (max-height: 509px) {
  #book {
    width: 476px !important;
    height: 357px !important;
  }
  #lastpagehtml {
    margin-left:238px !important;
    width: 238px !important;
    height: 768px !important;
  }
  .pagetext{
    padding-top:8px !important;
    padding-left:12px !important;
    padding-right:12px !important;
    font-size:17pt !important;
    line-height:22pt !important;
  }

  #frontpageimage{
    margin-top:10px;
    height:250px;
  }

  #nobubbletab{
    margin-right:20px;
  }

  #bubbletab{
    margin-right:20px;
  }

  #nobubbleimage{
    height:40px;
    margin-top:30px;
    margin-right:20px;
  }

  #bubbleimage{
    height:40px;
    margin-top:30px;
    margin-right:20px;
  }

  #teddybutton img{
    width:100px;
  }  

  #logoimage{
    height:90px; 
  }

  .dictionarytab{
    font-size:12pt;
    padding:7px;
    padding-left:10px;
    padding-right:10px;
  }

  .homepagetab{
    width:120px;
    font-size:11pt;
    padding:5px;
    padding-left:10px;
    padding-right:10px;
  }

  #teddy{
    left:12px;
    bottom:12px;
    transform:scale(.50,.50);
    -webkit-transform:scale(.50,.50);
    -ms-transform:scale(.50,.50);
    -moz-transform:scale(.50,.50);
  }  
}

@media only screen and (min-height: 510px) and (max-height: 599px) {
  #book {
    width: 680px !important;
    height: 510px !important;
  }
  #lastpagehtml {
    margin-left:340px !important;
    width: 340px !important;
    height: 768px !important;
  }
  .pagetext{
    padding-top:10px !important;
    padding-left:15px !important;
    padding-right:15px !important;
    font-size:24pt !important;
    line-height:29pt !important;
  }

  #frontpageimage{
    margin-top:15px;
    height:300px;
  }

  #nobubbletab{
    margin-right:30px;
  }

  #bubbletab{
    margin-right:30px;
  }

  #nobubbleimage{
    height:60px;
    margin-top:40px;
    margin-right:30px;
  }

  #bubbleimage{
    height:60px;
    margin-top:40px;
    margin-right:30px;
  }

  #teddybutton img{
    width:120px;
  }    

  #logoimage{
    height:110px; 
  }


  .dictionarytab{
    font-size:15pt;
    padding:8px;
    padding-left:12px;
    padding-right:12px;
  }


  .homepagetab{
    width:140px;
    font-size:12pt;
    padding:5px;
    padding-left:12px;
    padding-right:12px;
  }

  #teddy{
    left:15px;
    bottom:15px;
    transform:scale(.75,.75);
    -webkit-transform:scale(.75,.75);
    -ms-transform:scale(.75,.75);
    -moz-transform:scale(.75,.75);
  }  
}

@media only screen and (min-height: 600px) and (max-height: 767px) {
  #book {
    width: 800px !important;
    height: 600px !important;
  }
  #lastpagehtml {
    margin-left:400px !important;
    width: 400px !important;
    height: 768px !important;
  }
  .pagetext{
    padding-top:15px !important;
    padding-left:20px !important;
    padding-right:20px !important;
    font-size:28pt !important;
    line-height:36pt !important;
  }
  #frontpageimage{
    margin-top:20px;
    height:380px;
  }

  #nobubbletab{
    margin-right:40px;
  }

  #bubbletab{
    margin-right:40px;
  }

  #nobubbleimage{
    height:100px;
    margin-top:50px;
    margin-right:40px;
  }

  #bubbleimage{
    height:100px;
    margin-top:50px;
    margin-right:40px;
  }

  #teddybutton img{
    width:140px;
  } 

  #logoimage{
    height:130px; 
  }

  .dictionarytab{
    font-size:16pt;
    padding:9px;
    padding-left:14px;
    padding-right:14px;
  }

  .homepagetab{
    width:170px;
    font-size:14pt;
    padding:5px;
    padding-left:15px;
    padding-right:15px;
  }

  #teddy{
    left:17px;
    bottom:17px;
    transform:scale(.85,.85);
    -webkit-transform:scale(.85,.85);
    -ms-transform:scale(.85,.85);
    -moz-transform:scale(.85,.85);
  }
}

@media only screen and (min-height: 768px) {
  
  #book {
    width: 1024px !important;
    height: 768px !important;
  }
  #lastpagehtml {
    margin-left:512px !important;
    width: 512px !important;
    height: 768px !important;
  }
  .pagetext{
    padding-top:20px !important;
    padding-left:30px !important;
    padding-right:30px !important;
    font-size:37pt !important;
    line-height: 42pt !important;
  }

  #frontpageimage{
    margin-top:30px;
    height:500px;
  }

  #nobubbletab{
    margin-right:50px;
  }

  #bubbletab{
    margin-right:50px;
  }


  #nobubbleimage{
    height:120px;
    margin-top:60px;
    margin-right:50px;
  }

  #bubbleimage{
    height:120px;
    margin-top:60px;
    margin-right:50px;
  }

  #teddybutton img{
    width:160px;
  }  

  #logoimage{
    height:140px; 
  }

  .dictionarytab{
    font-size:19pt;
    padding:10px;
    padding-left:15px;
    padding-right:15px;
  }

  .homepagetab{
    width:200px;
    font-size:18pt;
    padding:5px;
    padding-left:20px;
    padding-right:20px;
  }

  #teddy{
    left:20px;
    bottom:20px;
    transform:scale(1,1);
    -webkit-transform:scale(1,1);
    -ms-transform:scale(1,1);
    -moz-transform:scale(1,1);
  }
}

@media only screen and (max-height: 600px) {
  body{
    background:url("storytimeislandbook/./img/wood_1062x600.jpg");
  }
}

@media only screen and (min-height: 601px) and (max-height: 768px) {
  body{
    background:url("storytimeislandbook/./img/wood_1024x768.jpg");
  }
}

@media only screen and (min-height: 769px) {
  body{
    background:url("storytimeislandbook/./img/wood_1920x1080.jpg");
  }
}




#bookviewer{

  transform-origin:50% 50%;
  -webkit-transform-origin:50% 50%;
  -ms-transform-origin:50% 50%;
  -moz-transform-origin:50% 50%;
}


.storytimeisland_book{

  transform-origin:50% 50%;
  -webkit-transform-origin:50% 50%;
  -ms-transform-origin:50% 50%;
  -moz-transform-origin:50% 50%;
  
  transition-timing-function:cubic-bezier(0.680, -0.550, 0.265, 1.550);
  -webkit-transition-timing-function:cubic-bezier(0.680, -0.550, 0.265, 1.550);
  -ms-transition-timing-function:cubic-bezier(0.680, -0.550, 0.265, 1.550);
  -moz-transition-timing-function:cubic-bezier(0.680, -0.550, 0.265, 1.550);

  transition:transform 400ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  -webkit-transition:-webkit-transform 400ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  -ms-transition:-ms-transform 400ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  -moz-transition:-moz-transform 400ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

.halfsize{
  
  transform:scale(.7,.7);
  -webkit-transform:scale(.7,.7);
  -ms-transform:scale(.7,.7);
  -moz-transform:scale(.7,.7);

}