html, body 
{
	background-color : transparent;
	margin : 0;
	padding : 0;
	overflow : hidden;
	width : 100%;
	height : 100%;

}

#book-container
{
	overflow: visible !important;
	/*min-height : 550px;*/
	/*max-height : 800px;*/
	/*height: 80% !important;*/
	position: relative !important;
}

#book-container img.pageturn
{
	cursor : pointer;
	position : fixed;
	top : 42%;
}
#book-container img.pageturn.left
{
	left : 1%;
}
#book-container img.pageturn.right
{
	right : 1%;
} 

#book-wrapper
{
	position : relative;
	background-position : center;
	background-repeat : no-repeat;
	background-size : auto 100%;

	-webkit-perspective : 1800px;
	perspective : 1800px;
}

#book-wrapper canvas
{
	position : absolute;
}

#book-wrapper, 
#book-wrapper canvas
{
	width : 100%;
	height : 100%;
	margin : 0 auto;
}

#book-wrapper div.pageflip
{
	position : absolute;
	z-index : 100;
	width : 50%;
	height : 100%;
	/*-webkit-transform-style : preserve-3d;
	transform-style : preserve-3d;*/
	-webkit-backface-visibility : hidden;
	backface-visibility : hidden;
	-webkit-transform : translateZ(0);
}
#book-wrapper div.pageflip.right
{
	left : 50%;
	-webkit-transform-origin : left center;
	transform-origin : left center;
}
#book-wrapper div.pageflip.left
{
	right : 50%;
	-webkit-transform-origin : right center;
	transform-origin : right center;
}
#book-wrapper div.pageflip.right div.gradient
{
	position : absolute;
	width : 100%;
	height : 100%;
	background-image : -webkit-gradient(linear, 100% 0%, 0% 0%, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 1)));
	background-image : -webkit-linear-gradient(right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
	background-image : -moz-linear-gradient(right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
	background-image : -ms-linear-gradient(right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
	background-image : -o-linear-gradient(right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}
#book-wrapper div.pageflip.left div.gradient
{
	position : absolute;
	width : 100%;
	height : 100%;
	background-image : -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 1)));
	background-image : -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
	background-image : -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
	background-image : -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
	background-image : -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}

#book-dom
{
	position : absolute;
	z-index : 1000;
	top : 50%;
	left : 50%;
	/*transform : top left;
	-webkit-transform : top left;
	-ms-transform : top left;*/
}

#book-dom div.text
{
	position : absolute;
}
#book-dom div.text img.replay
{
	position : absolute;
	bottom : 0;
	right : 0;
	cursor : pointer;
}
#book-dom div.text span.highlight
{
	background-color : #ff0;
}


#book-replay 
{
	display : none;
	cursor : pointer;

	background-image : url('../../sparky/media/images/btn-read-again.png');
	width : 232px;
	height : 166px;
	position : absolute;
	right : 0;
	bottom : 0;

	transform-origin : bottom right;
	-webkit-transform-origin : bottom right;
	-ms-transform-origin : bottom right;
}



@media (max-width : 1024px) {
	#book-container img.pageturn
	{
		transform : scale(1);
		-ms-transform : scale(1);
		-webkit-transform : scale(1);
		-moz-transform : scale(1);
	}
	#book-replay
	{
		transform : scale(1);
		-ms-transform : scale(1);
		-webkit-transform : scale(1);
		-moz-transform : scale(1);
	}
}
@media (max-height : 320px) {
	#book-container img.pageturn
	{
		transform : scale(0.7);
		-ms-transform : scale(0.7);
		-webkit-transform : scale(0.7);
		-moz-transform : scale(0.7);
	}
	#book-replay
	{
		transform : scale(0.7);
		-ms-transform : scale(0.7);
		-webkit-transform : scale(0.7);
		-moz-transform : scale(0.7);
	}
}

#orientation 
{
	width : 100%;
	height : 100%;
	position : fixed;
	top : 0;
	left : 0;
	background : #000;
	display : none;
	z-index : 1000;
}
#orientation img
{
	position : absolute;
	top : 50%;
	left : 50%;
	width : 256px;
	margin : -128px 0 0 -128px;
}
@media all and (orientation:portrait) {
	/*#orientation { display : block; }*/
}


#font-preloader
{
	position : absolute;
	top : -9999px;
	left : -9999px;
}

.preloaderContainer {
	display: none;
	margin: 0 0 0 -208px;
	top: 25%;
	left: 50%;
	position: absolute;
	width: 100%;
	height: 190px;
	background: url("../../src/media/images/loading-graphic.png") 0 0 no-repeat;
}

#preloaderPlayButton {
	display: block;
	/*width: 90%;*/
	height: 90vh;
	margin: 5vh auto 0 auto;
	
	background-size: contain;
	position: relative;
	z-index: 999;
}

#progressBar { 
	/*display: none;*/
	left:60%;
	margin-left:-156px;
	top: 60%;
	/*left: 60%;*/
	position: absolute;

	height: 190px;
}
.progressBar canvas { margin-top : 8px; }

#preload-wrapper
{
	position : relative;
	background-position : center;
	background-repeat : no-repeat;
	background-size : auto 100%;

	-webkit-perspective : 1800px;
	perspective : 1800px;
}

#preload-wrapper canvas
{
	position : absolute;
}

#preload-wrapper, 
#preload-wrapper canvas
{
	width : 100%;
	height : 100%;
	margin : 0 auto;
}