/* show the StoryJumper book */

#showpage .tile {
    padding: 0px;
}

.zerosize {
   width: 0;
   height: 0;
   display: inline;
}

#pagemain {
/*    width: 1100px; */
    margin: 0;
    /*overflow-x: hidden;*/
    /*overflow-y: hidden;*/
}

#showpage{
    position:relative;
    margin-top: 10px;
    min-height: 600px;
}
#reader-container { 
    position: relative;
    width: 1030px;
}
#book-wrapper{
    position:relative;
    /*top:20px;*/
    /*z-index:1;*/
}
#book-wrapper.frontcover,  #book-wrapper.backcover {
    left: -20px;
}
#book-wrapper.backcover #book-obj {
    height: 440px;
    overflow: hidden; /* to avoid scroll bars */
    margin-bottom: -53px; /* move everything below back up: 440 - 387 */
}

#book-wrapper #book-obj {
    max-width: 1030px;
}

#book-wrapper .bookshadow {
    position: absolute;
    left: 235px;
    width: 525px;
    height: 435px;
    background: url(/images/index_book_bg_shadow.png) no-repeat;
    background-size: 525px 435px;
    top: 0;
}
/*#book-wrapper .bkPicBack .bookshadow {
    left: 471px;
}*/

#book-wrapper .backCover {
    border-radius: 5px;
}
#book-wrapper.frontcover .frontcover,
#book-wrapper.frontcover .page-wrapper>div,
#book-wrapper.frontcover .frontcoverstyle {
    border-radius: 5px 5px 5px 0;
}
#book-wrapper.backcover .backcover,
#book-wrapper.backcover .sj-book>div,
#book-wrapper.backcover .page-wrapper>div,
#book-wrapper.backcover .frontcoverstyle {
    border-radius: 5px 5px 0 5px;
}
#book-wrapper.backcover .frontcoverstyle.flip-it {
    border-radius: 5px 5px 5px 0;
}

#book-wrapper .p2 .frontcover,
#book-wrapper .page-wrapper[page="2"]>div,
#book-wrapper .frontcover-inside {
    border-radius: 5px 0 0 5px;
}
#book-wrapper .backcover-inside {
    border-radius: 0 5px 5px 0;
}


#book-wrapper .frontcoverstyle {
    position: absolute;
    top: 0;
    left: 0;
    width: 515px;
    height: 387px;
    background: url(/images/index_book_bg_overlay.png) no-repeat;
    background-size: 515px 387px;
}
.flip-it {
    -webkit-transform:scaleX(-1);
    -moz-transform:scaleX(-1);
    -ms-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
}

#book-wrapper .pagedepth {
    position: absolute;
    left:257.5px;
    top: 387px;
    width: 510px;
    height: 20px;
}
#book-wrapper.backcover .pagedepth {
    left:257px;
}
#book-wrapper .pagedepth div {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 0 0 5px 5px;
}

#book-wrapper .pagedepth .pagestack {
    background: url(/images/index_book_bg_pagestack.png) no-repeat;
    background-size: 510px 20px;
}

#book-wrapper .bkPicBack {
  display:none;  
/*  position:absolute;
  left:229px;
  width: 543px;
  height: 417px;*/
}

#book-wrapper .backcover-inside, #book-wrapper .frontcover-inside {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#book-wrapper .backcover-inside {
    background: url(/images/index_book_bg_inside_backcover_overlay.png) no-repeat;
}

#book-wrapper .frontcover-inside {
    background: url(/images/index_book_bg_inside_cover_overlay.png) no-repeat;
}

.sj-book .page-wrapper :hover {
    cursor: pointer;
}

#navigation li { cursor: pointer; }
#backpage-nav :hover { cursor: pointer; }

#book-wrapper #backpage-nav {
    display:none;
    position: relative;
    margin-top: 10px;
    margin-left: 258px;
    width: 48px;
    height: 48px;
}

#book-wrapper #backpage-nav img {
    width: 48px;
    height: 48px;
}

#book-wrapper #audionav .prompt-container .hand.fa-hand-o-right {
    -webkit-animation: MoveLeftRight 1s ease-in-out infinite;
    -moz-animation: MoveLeftRight 1s ease-in-out infinite;
    animation: MoveLeftRight 1s ease-in-out infinite;
}
@-webkit-keyframes MoveLeftRight {
    0%   { margin-left: 0; }
    50%  { margin-left: 8px; }
    100% { margin-left: 0; }
}
@-moz-keyframes MoveLeftRight {
    0%   { margin-left: 0; }
    50%  { margin-left: 8px; }
    100% { margin-left: 0; }
}
@keyframes MoveLeftRight {
    0%   { margin-left: 0; }
    50%  { margin-left: 8px; }
    100% { margin-left: 0; }
}
#book-wrapper #audionav .prompt-container .prompt-message {
    float: left;
    text-align: right;
    width: 150px;
    margin-right: 4px;
    margin-top: 2px;
}
#book-wrapper #audionav .prompt-container .hand {
    float: left;
}
#book-wrapper #audionav .prompt-container {
    position: absolute;
    color: rgb(107, 36, 178);
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 22px;
    width: 200px;
    font-weight: bold;
    top: 7px;
    left: -165px;
}

#book-wrapper.frontcover #audionav {
    width: 21%;
    left: 40%;
    margin-top: 23px;
}
#book-wrapper.backcover #audionav {
    width: 30%;
    margin-top: 19px;
}

#book-wrapper #audionav {
    position: absolute;
    width: 21%;
    left: 40%;
    margin: 5px 0;
    text-align: center;
    font-size: 16px;
}
#book-wrapper #audionav #audioplaypause {
    color: #0071bc;
    font-size: 2.0em;
}
#book-wrapper #audionav #audioplaypause:hover {
    cursor: pointer;
}
#book-wrapper #audionav.playing .audioplay, #book-wrapper #audionav.paused .audiopause {
    display: none;
}
#book-wrapper #audionav.loading #audioloading {
    display: inline-block;
    vertical-align: super;
}
#book-wrapper #audionav #audioloading {
    vertical-align: super;
    display: none;
}

#book-wrapper #audionav.loading .rangeslider {
    visibility: hidden;
}

#book-wrapper #audionav .rangeslider {
    display: inline-block;
    width: 130px;
    margin-bottom: 3px;
}

#book-wrapper #navigation {
    visibility: hidden;
    margin-top: 10px;
}

#book-wrapper #navigation ul li {
    float:right;
}

#book-wrapper #navigation ul li:first-child {
    float:left;
}

#book-wrapper #navigation ul li img{
    width:48px;
    height:48px;
}
/*******************************/
/* For rendering books from the new editor */
/*******************************/
.sjpagethumbnail {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}

.sjpagethumbnail .pagebackground {
    width: 100%;
    height: 100%;
}

.sjpagethumbnail .sjimgwrapper, .sjpagethumbnail .sjbigtext, .sjpagethumbnail .sjgroupwrapper {
    position: absolute;
}
/* 2021-01-05 - PW - Needed to fix some weirdness with some small images falling below the div even when width and height of the image is set to 100% */
.sjpagethumbnail .sjimgwrapper>img {
    position: absolute;
    top: 0;
    left: 0;
}
.sjpagethumbnail .sjbigtext {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.sjpagethumbnail .sjgroupwrapper .fixedaspect {
    position: absolute;
}
#book-wrapper .sjembeddedpage {
    position: absolute;
    display: inline-block;
}

.scaledtext {
  -ms-transform-origin: 0 0;
  /* IE 9 */
  -webkit-transform-origin: 0 0;
  /* Chrome, Safari, Opera */
  transform-origin: 0 0;
}
.savedtexthtml, .savedtexthtml .convertedflashtext .marker {
    white-space: pre-wrap;
}
.savedtexthtml .ql-direction-rtl {
    direction: rtl;
    text-align: inherit;
}
.savedtexthtml .ql-align-center {
    text-align: center;
}
.savedtexthtml .ql-align-justify {
    text-align: justify;
}
.savedtexthtml .ql-align-right {
    text-align: right;
}

.pagenumber {
  position: absolute;
  top: 96%;
  left: 48%;
}

.spinecolor {
  position: absolute;
  top: 0;
  left: 0;
  width: 4%;
  height: 100%;
  border: none;
  cursor: pointer;
}

.ql-font-Anton            { font-family: "Anton"; }
.ql-font-BerkshireSwash   { font-family: "Berkshire Swash"; }
.ql-font-BlackOpsOne      { font-family: "Black Ops One"; }
.ql-font-Chewy            { font-family: "Chewy"; }
.ql-font-Cinzel           { font-family: "Cinzel"; }
.ql-font-Courgette        { font-family: "Courgette"; }
.ql-font-Creepster        { font-family: "Creepster"; }
.ql-font-Graduate         { font-family: "Graduate"; }
.ql-font-Kalam            { font-family: "Kalam"; }
.ql-font-Lora             { font-family: "Lora"; }
.ql-font-PermanentMarker  { font-family: "Permanent Marker"; }
.ql-font-RobotoMono       { font-family: "Roboto Mono"; }
.ql-font-RobotoCondensed  { font-family: "Roboto Condensed"; }
.ql-font-Oregano          { font-family: "Oregano"; }
.ql-font-Pacifico         { font-family: "Pacifico"; }
.ql-font-RacingSansOne    { font-family: "Racing Sans One"; }
.ql-font-Roboto           { font-family: "Roboto"; }
.ql-font-NotoSans         { font-family: "Noto Sans"; }
.ql-font-NotoSerif        { font-family: "Noto Serif"; }
.ql-font-RobotoSlab       { font-family: "Roboto Slab"; }
.ql-font-Ultra            { font-family: "Ultra"; }
.ql-font-BungeeShade          { font-family: "Bungee Shade"; }
.ql-font-Fruktur              { font-family: "Fruktur"; }
.ql-font-LibreFranklin        { font-family: "Libre Franklin"; }
.ql-font-IndieFlower          { font-family: "Indie Flower"; }
.ql-font-RumRaisin            { font-family: "Rum Raisin"; }
.ql-font-Caudex               { font-family: "Caudex"; }
.ql-font-ShortStack           { font-family: "Short Stack"; }
.ql-font-Montserrat           { font-family: "Montserrat"; }
.ql-font-Philosopher          { font-family: "Philosopher"; }
.ql-font-HennyPenny           { font-family: "Henny Penny"; }
.ql-font-GreatVibes           { font-family: "Great Vibes"; }
.ql-font-JustMeAgainDownHere  { font-family: "Just Me Again Down Here"; }
.ql-font-PressStart2P         { font-family: "Press Start 2P"; }


/* Back Cover */
.backCover .SJlogo {
    /* Native size: 250 x 83 */
    /* Page size: 748 x 544 */
    /* Need to keep width and height ratio the same: (.3*748)/(.13695*544) = 250/83 */
    width: 30%;
    height: 13.695%;
    position: absolute;
    top: 83%;
    left: 38%;
    z-index: 200;
}
.backCover .SJlogo img {
    width: 80%;
    height: 80%;
    display: block;
}
.backCover .SJurl {
    position: absolute;
    top: 95%;
    left: 42%;
    width: 16%;
    height: 5%;
    z-index: 200;
}
.backCover .SJurlscaletext {
    -ms-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
.backCover .SJurltext, .pagenumber {
    text-align: center;
    color: #444;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 12px;
}

/* Dedication Page */
.dedication .SJlogo {
    /* Native size: 250 x 83 */
    /* Page size: 748 x 544 */
    /* Need to keep width and height ratio the same: (.3*748)/(.13695*544) = 250/83 */
    width: 30%;
    height: 13.695%;
    position: absolute;
    top: 79%;
    left: 21%;
    z-index: 200;
}
.dedication .SJlogo img {
    width: 80%;
    height: 80%;
    display: block;
}
.dedication .SJQR {
    /* Native size: 149 x 149 */
    /* Page size: 748 x 544 */
    /* Need to keep width and height ratio the same: (.1*748)/(.1375*544) = 149/149 */
    /*width: 10%;*/
    /*height: 13.75%;*/
    width: 25%;
    height: 15.125%;
    position: absolute;
    top: 74%;
    left: 63%;
}
.dedication .SJQR img {
    padding-left: 28%;
    width: 44%;
    height: 100%;
}
.dedication .copyright {
    position: absolute;
    top: 93%;
    left: 8%;
    width: 50%;
    height: 11%;
    z-index: 200;
}
.dedication .copyrightscaletext {
    -ms-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
.dedication .copyrighttext {
    text-align: center;
    color: #444;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 10px;
}
.dedication .extendedContent {
    font-weight: bold;
    text-align: center;
}
.dedication .extendedContentText {
    font-size: 14px;
    color: #444;
}
.dedication .extendedContentText .qrlink {
    color: #0071bc;
    text-decoration: underline;
    font-weight: bold;
}
/* Need to match the default font in quill's base.styl and or snow.styl */
.scaledtext, .editortext .ql-container {
    font-family: 'Noto Sans', sans-serif;
    font-size: 24px;
    color: #0B333C;
    word-wrap: break-word;
    -ms-word-wrap: break-word;
    line-height: 1.42;
}

.sjbigtext .sjresize {
    overflow: hidden;
    width:96%;
    height:96%;
    padding:2%;
    border-radius: 8px;
}

.bookattr-title .scaledtext, .bookattr-title .editortext .ql-container {
    font-size: 40px;
    color: #ffffff;
    text-align: center;
}

.bookattr-author .scaledtext, .bookattr-author .editortext .ql-container {
    font-size: 32px;
    color: #ffffff;
    text-align: center;
}

.bookattr-giver .scaledtext, .bookattr-giver .editortext .ql-container {
    font-family: 'Roboto Slab';
    font-size: 18px;
    color: #ffffff;
    text-align: center;
}
/*******************************/
/* END - For rendering books from the new editor */
/*******************************/

textarea {
  overflow: auto; /* 1 */
  vertical-align: top; /* 2 */
  color: #474747;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.pull-left { float: left; }
.pull-right { float: right; }
.hide { display: none; }
.show { display: block; }
.no-margin { margin: 0 !important; }
.no-padding { padding: 0 !important; }
.light-text { color: #808080; }
.small-text { font-size: 13px; }
.lh-fix { line-height: 0 !important; }
/*.clearfix { zoom: 1; }*/

.clearfix:before, .clearfix:after {
  display: table;
  content: "";
  line-height: 0;
}

.clearfix:after { clear: both; }

#showpage .tile .content {
    padding: 10px 0;
}
#showpage .pic {
  width: 180px;
  height: 137px;
}
#showpage .box {
    clear: both;
    padding: 20px 15px;
}
#showpage .rbkMeta {
    width: 180px;
    text-align: center;
}
#showpage a.title {
    color: #474747;    
}
#showpage #morePrompt {
    padding-top: 60px;
}

#showpage #createPrompt {
    position:relative;
    float: left;
    margin: 0;
}
#showpage #createPrompt .pic {
    height: 127px;
    display: inline-block;
}

#showpage #left-column {
    float: left;
    margin-top: 418px;
}


#actionBar {
    display: flex;
    justify-content: center;
}
#actionBar li {
    color: #0071bc;
    font-weight: bold;
    font-size: 1.1em;
    text-align: center;
    float: left;
    margin-left: 30px;
    cursor: pointer;
}
#sideactionButtons li {
    width: 250px;
    margin-bottom: 15px;
    font-size: 1.1em;
    text-align: left;
    font-weight: normal;
}
#sideactionButtons li.active {
    color: #0071bc;
}
/* this must come after #actionBar li CSS */
li .fa-stack-1x {
    color: white;
}
li.likeButton.inactive .icon {
    color: #474747;
}
#sideactionButtons li.active {
    color: #0071bc;
    cursor: pointer;
}
#sideactionButtons li.inactive {
    color: #474747;
}
#sideactionButtons li.likeButton.inactive .icon {
    color: #474747;
}

#sideactionButtons .bookOption {
    text-align: left;
    margin: 10px 0 10px 5px;
    cursor: pointer;
    line-height: 1.2em;
}
#sideactionButtons .bookOption:hover {
    color: #0071bc;
}    
#sideactionButtons .buyPromptNote {
    font-size: 0.8em;
}

.fa-circle-thin {
    display: none;
    /*color: rgb(110,110,110);*/
}
.fa-circle-thin:hover {
    display: none;
    /*color: #0071bc;*/
}    
#actionBarBack {
    position: absolute;
    top: 440px;
    left: 260px;
}
#actionBarBack.coverhasaudio {
    top: 500px;
}
#actionBar .standardButton {
    float: left;
}
#showpage #pagetext i {
    font-size: inherit;
}
#showpage .pagehtml i {
    font-size: inherit;
}
#actionBar li.active img {
    margin: 0 5px -5px 10px;
}


.nbkmeta {
    text-align: center;
    max-width: 650px;
    margin: 0 auto;
}
.nbkmeta h1#title {
   font-size: 1.5em;
   color: #474747;
}
.nbkmeta #description {
    max-width: 660px;
    margin: 10px auto 0px;
}
.nbkmeta #changeDescription {
    color: #0071bc;
}
.nbkmeta #changeDescription:hover {
    cursor: pointer;
    text-decoration: underline;
}

    
.sample-steve-jobs .zoom-in{
	display:none;
}
.sj-book{
	width:1030px;
	height:387px;
	z-index: 0;
}

.sj-book .inner-gradient{
	background:-webkit-gradient(linear, left top, right top, color-stop(0, rgba(0, 0, 0, 0)), color-stop(0.3, rgba(0, 0, 0, 0.2)), color-stop(0.5, rgba(255, 255, 255, 0.2)) ) !important;
}

.sj-book .outer-gradient{
	background:-webkit-gradient(linear, left top, right top, color-stop(0.4, rgba(0, 0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.3)), to(rgba(0, 0, 0, 0))) !important;
}

.sj-book h1{
	font-family: "Stempel-Garamond-W01-Roman";
}

.sj-book .book-content{
	margin:0;
}

.sj-book .book-content .page-image-holder{
	background-color: white;
        background-position: center;
/*        background-image:url(/images/spinning.gif);  */
        background-repeat:no-repeat;
}

.sj-book .coverplay {
    position: absolute;
    width: 96px;
    height: 100px;
    top: 145px;
    left: 415px;
    /*background-image:url(/images/playbutton70.png);*/
}

.sj-book h2{
	font-size:16px;
	letter-spacing:2px;
	font-weight: 400;
}

.sj-book blockquote{
	color:#586078;
	margin:10px 0;
	font-style:italic;
}

.sj-book blockquote:before{
	content: "\201C";
	color:#333D53;
	font-size:20px;
}

.sj-book blockquote:after{
	content: "\201D";
	color:#333D53;
	font-size:20px;
}

.sj-book cite{
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:13px;
	font-weight:200;
	font-style:normal;
	color:#666;
}

.sj-book .book-content .center-pic{
	margin:0;
	text-indent:0;
	text-align:center;
}

.sj-book .zoom-this:hover{
	opacity:0.9;
	cursor:pointer;
}

/*
.sj-book .book-content p{
	text-indent: 18px;
}
*/

.sj-book .left-pic{
	float:left;
	margin-top:15px;
	margin-right:15px;
	margin-bottom:15px;
}

.animated{
	-webkit-transition:margin-left 0.2s ease-in-out;
	-moz-transition:margin-left 0.2s ease-in-out;
	-o-transition:margin-left 0.2s ease-in-out;
	-ms-transition:margin-left 0.2s ease-in-out;
	transition:margin-left 0.2s ease-in-out;
}

.show-bar .sj-book .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 10px #999;
	-moz-box-shadow:0 0 10px #999;
	-ms-box-shadow:0 0 10px #999;
	-o-box-shadow:0 0 10px #999;
	box-shadow:0 0 10px #999;
}

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

.zoom-pic{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.2);
	z-index:999;
}

.zoom-pic img{
	-webkit-box-shadow:0 0 20px #999;
	-moz-box-shadow:0 0 20px #999;
	-o-box-shadow:0 0 20px #999;
	-ms-box-shadow:0 0 20px #999;
	box-shadow:0 0 20px #999;
}

.sj-book .p1 .side{
	width:5px;
	height:387px;
	position:absolute;
	top:0;
	left:475px;

	background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #bbb), color-stop(0.5,  #ddd), color-stop(1,  #bbb));
	background-image:-webkit-linear-gradient(left, #bbb, #ddd, #bbb);
	background-image:-moz-linear-gradient(left, #bbb, #ddd, #bbb);
	background-image:-ms-linear-gradient(left, #bbb, #ddd, #bbb);
	background-image:-o-linear-gradient(left, #bbb, #ddd, #bbb);
	background-image:linear-gradient(left, #bbb, #ddd, #bbb);

	-webkit-transform:rotateY(-90deg);
	-moz-transform:rotateY(-90deg);
	-o-transform:rotateY(-90deg);
	-ms-transform:rotateY(-90deg);
	transform:rotateY(-90deg);

	-webkit-transform-origin:top right;
	-moz-transform-origin:top right;
	-o-transform-origin:top right;
	-ms-transform-origin:top right;
	transform-origin:top right;
	
	z-index:100000;
}

.sj-book .cover-white{
    width: 496px;
    height: 369px;
    position:absolute;
    top:9px;
    left:19px;
    background-color: white;
}

.sj-book .back-side .cover-white{
    left:0;
}

.sj-book .cover-spine-top{
    width:20px;
    height:15px;
    position:absolute;
    top:0;
    left:495px;
    background: rgba(50, 50, 50, .4);
    border-top: 1px solid rgba(50, 50, 50, .6);
    border-left: 1px solid rgba(50, 50, 50, .6);
}

.sj-book .back-side .cover-spine-top{
    left:0;
    border-right: 1px solid rgba(50, 50, 50, .6);
    border-left: none;
}
    
.sj-book .cover-spine-bottom{
    width:20px;
    height:15px;
    position:absolute;
    top:371px;
    left:495px;
    background: rgba(50, 50, 50, .4);
    border-bottom: 1px solid rgba(50, 50, 50, .6);
    border-left: 1px solid rgba(50, 50, 50, .6);
}

.sj-book .back-side .cover-spine-bottom{
    left:0;
    border-right: 1px solid rgba(50, 50, 50, .6);
    border-left: none;
}

.sj-book .spine{
        width:22px;
        height:387px;
        position:absolute;
        top:0;
        left:493px;
    
	background-image:url(/images/spine3.png);
      	background-repeat:repeat-y;
    
        z-index:100000;
        -webkit-transform:scaleX(-1);
        -moz-transform:scaleX(-1);
        -ms-transform:scaleX(-1);
        -o-transform:scaleX(-1);
        transform:scaleX(-1);
}
.sj-book .p1 .spine{
        left:0px;
        -webkit-transform:scaleX(1);
        -moz-transform:scaleX(1);
        -ms-transform:scaleX(1);
        -o-transform:scaleX(1);
        transform:scaleX(1);
}

.sj-book .page-shadow-left, .sj-book .page-shadow-right {
        width:495px;
        height:369px;
        position:absolute;
        top:0;
        left:0;
      	background-repeat:no-repeat;
        z-index:100000;
}

.sj-book .page-shadow-left{
	background-image:url(/images/index_book_bg_left_overlay.png);
}

.sj-book .page-shadow-right{
	background-image:url(/images/index_book_bg_right_overlay.png);
}

.sj-book .page-shadow-center-left, .sj-book .page-shadow-center-right {
    display: none;
    width:22px;
    height:369px;
    position:absolute;
    top:0;
    left:0;
    background-repeat:repeat-y;
    z-index:100000;
}

.sj-book .page-shadow-center-left{
    left:473px;
    background-image:url(/images/index_book_bg_left_inner_overlay.png);
    background-repeat:repeat-y;
}

.sj-book .page-shadow-center-right{
    background-image:url(/images/index_book_bg_right_inner_overlay.png);
}


.noie .sj-book-transform div[page="1"] > div,
.noie .sj-book-transform div[page="2"] > div{
	overflow:visible !important;
}

.sj-book .depth{
	/*background-image:url(/images/pages-depth.png);*/
        background-image:url(/images/index_book_bg_pagedepth.png);
	position:absolute;
	top:9px;
	width:16px;
	height:369px;
}

.sj-book .front-side .depth{
	left:4px;
	background-position:0 0;
}

.sj-book .back-side .depth{
	right:4px;
	background-position:right 0;
}

.sj-book .hard{
	width:515px;
	height:387px;
	background-color:gray;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	-ms-box-shadow:none;
	box-shadow:none;
}

.sj-book .page-wrapper{
	-webkit-perspective:2000px;
	-moz-perspective: 2000px;
	-ms-perspective: 2000px;
	perspective: 2000px;
}

.sj-book .own-size{
	width:495px;
	height:369px;
	overflow:hidden;
	/* background-image:url(/images/pages.png); */
}

.sj-book .own-size.even{
	background-position:0 0;
	/*background:-webkit-gradient(linear, left top, right top, color-stop(0.95, #fff), color-stop(1, #dadada));
	background-image:-webkit-linear-gradient(left, #fff 95%, #dadada 100%);
	background-image:-moz-linear-gradient(left, #fff 95%, #dadada 100%);
	background-image:-ms-linear-gradient(left, #fff 95%, #dadada 100%);
	background-image:-o-linear-gradient(left, #fff 95%, #dadada 100%);
	background-image:linear-gradient(left, #fff 95%, #dadada 100%);*/
}

.sj-book .own-size.odd{
	background-position:460px 0;
	/*background:-webkit-gradient(linear, right top, left top, color-stop(0.95, #fff), color-stop(1, #cacaca));
	background-image:-webkit-linear-gradient(right, #fff 95%, #cacaca 100%);
	background-image:-moz-linear-gradient(right, #fff 95%, #cacaca 100%);
	background-image:-ms-linear-gradient(right, #fff 95%, #cacaca 100%);
	background-image:-o-linear-gradient(right, #fff 95%, #cacaca 100%);
	background-image:linear-gradient(right, #fff 95%, #cacaca 100%);*/
}

.sj-book .loader{
	background-image:url(/images/loader.gif);
	width:22px;
	height:22px;
	position:absolute;
	top:280px;
	left:219px;
}

.sj-book .page-number{
	color:#999;
	width:100%;
	bottom:25px;
	position:absolute;
	display:block;
	text-align: center;
	line-height:30px;
	font-size:11px;
}

.sj-book .table-contents{
	font-size:16px;
	width:300px;
	margin:80px auto;
	color:#ccc;
}

.sj-book .table-contents li{
	list-style:none;
	line-height:25px;
}

.sj-book .table-contents span{
	float:right;
}

.sj-book .table-contents a{
	float:left;
	width:100%;
	clear:both;
	text-decoration:none;
	color:#333;
	margin:2px 0;
	padding:0 10px;
}

.sj-book .table-contents a:hover{
	background:#CAD1EE;
	float:left;
	width:100%;
	clear:both;
	text-decoration:none;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-o-border-radius:10px;
	-ms-border-radius:10px;
	border-radius:10px;
}

.sj-book .book-content .capital,
.sj-book .book-content .no-indent{
	text-indent: 0;
}

.sj-book .capital:first-letter {
    display:block;
    float:left;
    font-size: 300%;
    line-height: 70%;
	margin-right: 6px;
	margin-top: 7px;
	margin-left:18px;
}

.ie8 .sj-book .even,
.ie9 .sj-book .even{
	background-color:white;
	background-image:url(/images/gradient-page-left.jpg);
	background-position:right top;
	background-repeat:repeat-y;
}

.ie8 .sj-book .odd,
.ie9 .sj-book .odd{
	background-color:white;
	background-image:url(/images/gradient-page-right.jpg);
	background-position:left top;
	background-repeat:repeat-y;
}

.sj-book .coverimg {
    width:515px;
    height:387px;
}

.sj-book .cover {
	background-color: gray;
        background-position: center;
/*        background-image:url(/images/spinning.gif);  */
        background-repeat:no-repeat;
}


/* Likers */
#likedBy {
    position: relative; 
    margin: 15px 0px 10px 30px; 
}
#likedBy i {
    color: #474747;
}
#likersOthers_container {
    display: none; 
    position: absolute; 
    top: 30px; 
    right: 10px; 
    border: 2px solid #444;  
    z-index: 100; 
    background-color: white; 
    border-radius: 5px;     
}
#likersOthers {
    overflow: auto;  /* auto add scroll bar, if needed */
    max-height: 300px;
    padding: 20px 110px;
}
#close_likers {
    padding: 10px 15px;
    background-color: #444;
    background-size: cover;
    cursor: pointer;
    color: #f5f6f7;
    letter-spacing: 0.3px;
}
#close_likers a {
    font-size: 20px; 
    color: #777;
}
/* end of likers */

/* Report book */
#reportBook {
    display: none; 
    position: absolute; 
    top: 0px; 
    right: 90px; 
    border: 2px solid #444;  
    z-index: 100; 
    background-color: white; 
    border-radius: 5px;
}
#reportBook #reportMenu .reportOption {
    padding: 15px;
    margin: 0;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    color: #222;
}
#reportBook #reportMenu .reportOption:hover {
    background-color: #ddd;
    color: #222;
    font-weight: bold;
    cursor: pointer;
}
#reportBook #close_reportBook {
    padding: 15px;
    background-color: #444;
    background-size: cover;
    cursor: pointer;
    color: #f5f6f7;
    letter-spacing: 0.3px;
    width: 250px;
}
#reportBook .secondQuestion {
    padding: 15px; 
    color: #222;
    width: 250px;
}
#reportBook .secondQuestion input {
    font-size: 1em; 
    padding: 5px; 
    border-radius: 5px; 
    width: 90%;
    border: 1px solid #aaa;
}
#reportBook #sendReportButton {
    display: block; 
    margin-top: 10px;
}
/* end of report book */


#pagetext {
    background-color:#ddd;
    margin-top: 10px;
    padding: 20px 8px 5px 8px;
}

#pagetextleft, #pagetextright {
        width: 495px;
        min-height: 369px;
        border: 1px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        zoom: 1;
        /*display: inline;*/
        _height: 369px;    
}

.pagehtml p {
    text-indent: 0 !important;
    font-size: .1rem; /* PW - 2020-07-08 - Need to have it set to a very small size to prevent problems with the text line-spacing on small mobile screens */
}
.flashtext p {
    font-size: .1rem; /* PW - 2021-01-05 - Need to have it set to a very small size to make it the same as it was in flash */
}

#WidgetFloaterPanels {
    display: none !important;
}

.marker {
    position: relative;
    white-space: nowrap;
}

.sjrspan {
    display: inline-block;
}
.convertedflashtext span.sjrspan {
    display: inline;
}