﻿#sky { background:url(../imgs/book/) no-repeat center top; }

.clouds {
	background-image:url(../img/book/pop-up-clouds.png);
	background-repeat:no-repeat;
	background-position: center top;
	background-size:100% auto;
}

#section_title { font-size:18px; color:#3c4981; font-weight:bold; width:8em; }

/* tooltips */
.booktip {
	border-color:#3c4981 !important;
	background:#fefefe !important;
	font-size:13px !important;
	line-height:16px !important;	
}


#book-height {
	height:480px;
	position:relative;
	width:100%;
	background-image: url("../img/book/blue-white-background.jpg");
	-webkit-transform:translate3d(0,0,0);
}
@media screen and (max-width: 689px) {
	#book-height { height:230px; }
}

#book-wrapper {
	height: 100%;
	display: block;
	font-size:100%;
	position:absolute;
	top:0;
	width:100%;
	-webkit-transform: translateZ(0);
	-webkit-font-smoothing: antialiased;
 
}
#book-wrapper #book {
	margin: 7.5% auto 0;
	width: 441px;
	height: 297px;
	display: block;
	position: relative;
	  -webkit-transform:perspective(1000px) rotateX(60deg);
		 -moz-transform:perspective(1000px) rotateX(60deg);
		  -ms-transform:perspective(1000px) rotateX(60deg);
		   -o-transform:perspective(1000px) rotateX(60deg);
			  transform:perspective(1000px) rotateX(60deg);
}
@media screen and (max-width: 1179px) {
	#book-wrapper #book {
		margin-top: 14%;
	}
}

#book-wrapper #book .front-cover.right div
{ 
	background: #3c4981; 
	background-image:url(../img/book/blue-book.jpg);
	background-repeat:no-repeat;
	background-size:100% auto;
}



/* popup pages */
.panel {
	overflow: visible !important;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}
.panel-bg { width:100% !important; position:absolute; top:0; left:0; }
.backleft {
	right:-2px;
	-webkit-transform-origin:100% 0% 0px;
	-moz-transform-origin:100% 0% 0px;
	-ms-transform-origin:100% 0% 0px;
	-o-transform-origin:100% 0% 0px;
	transform-origin:100% 0% 0px;
	-webkit-transform:rotate(8deg) rotateX(1deg);
	-moz-transform:rotate(8deg) rotateX(1deg);
	-ms-transform:rotate(8deg) rotateX(1deg);
	-o-transform:rotate(8deg) rotateX(1deg);
	transform:rotate(8deg) rotateX(1deg);
}
.backright {
	left:-2px;
	-webkit-transform-origin:0% 0% 0px;
	-moz-transform-origin:0% 0% 0px;
	-ms-transform-origin:0% 0% 0px;
	-o-transform-origin:0% 0% 0px;
	transform-origin:0% 0% 0px;
	-webkit-transform:rotate(-8deg) rotateX(1deg);
	-moz-transform:rotate(-8deg) rotateX(1deg);
	-ms-transform:rotate(-8deg) rotateX(1deg);
	-o-transform:rotate(-8deg) rotateX(1deg);
	transform:rotate(-8deg) rotateX(1deg);
}
/* safari, not chrome */
::i-block-chrome,.backleft {
	-webkit-transform:rotate(8deg) translateZ(1px);
	transform:rotate(8deg) translateZ(1px);
}
::i-block-chrome,.backright {
	-webkit-transform:rotate(-8deg) translateZ(1px);
	transform:rotate(-8deg) translateZ(1px);
}

.backleft, .backright {
	width:100% !important;
	position:absolute;
	z-index:2;
	top:45%;
	-webkit-transition: all .6s ease-in;
	-moz-transition: all .6s ease-in;
	-o-transition: all .6s ease-in;
	-ms-transition: all .6s ease-in;
	transition: all .6s ease-in;
}
.backleft.open {
	-webkit-transform:rotateX(90deg) rotateY(8deg);
	-moz-transform:rotateX(90deg) rotateY(8deg);
	-o-transform:rotateX(90deg) rotateY(8deg);
	-ms-transform:rotateX(90deg) rotateY(8deg);
	transform:rotateX(90deg) rotateY(8deg);
}
.backright.open {
	-webkit-transform:rotateX(90deg) rotateY(-8deg);
	-moz-transform:rotateX(90deg) rotateY(-8deg);
	-o-transform:rotateX(90deg) rotateY(-8deg);
	-ms-transform:rotateX(90deg) rotateY(-8deg);
	transform:rotateX(90deg) rotateY(-8deg);
}




/*
.frontleft {
	width:80% !important;
	top:65%;
	left:15%;
}

.frontright {
	width:90% !important;
	top:65%;
	right:10%;
}*/
.frontleft, .frontright {
	position:absolute;
	z-index:1;
	-webkit-transform-origin:0% 0% 0px;
	   -moz-transform-origin:0% 0% 0px;
		-ms-transform-origin:0% 0% 0px;
		 -o-transform-origin:0% 0% 0px;
			transform-origin:0% 0% 0px;
	-webkit-transition: all .6s ease-in;
	-moz-transition: all .6s ease-in;
	-o-transition: all .6s ease-in;
	-ms-transition: all .6s ease-in;
	transition: all .6s ease-in;
}
.frontleft {
	
/*	-webkit-transform:rotateX(3deg);
	-moz-transform:rotateX(3deg);
	-ms-transform:rotateX(3deg);
	-o-transform:rotateX(3deg);
	transform:rotateX(3deg);
*/	
}
.frontleft.open, .frontright.open {
	z-index:2;
	-webkit-transform:rotateX(90deg);
	-moz-transform:rotateX(90deg);
	-o-transform:rotateX(90deg);
	-ms-transform:rotateX(90deg);
	transform:rotateX(90deg);
}




.textleft, .textright {
	position:absolute;
	z-index:1;
	-webkit-transform-origin:center bottom;
	   -moz-transform-origin:center bottom;
		-ms-transform-origin:center bottom;
		 -o-transform-origin:center bottom;
			transform-origin:center bottom;
/*	-webkit-transition: all .3s ease-in;
	-moz-transition: all .3s ease-in;
	-o-transition: all .3s ease-in;
	-ms-transition: all .3s ease-in;
	transition: all .3s ease-in;*/
	cursor:pointer;
	opacity:0;
	bottom:4%;
	z-index:0;	
}
.textleft { left:9%; }
.textright { right:9%; }
.textleft.open, .textright.open {
	-webkit-transform:translateZ(2px) rotateX(-1deg);
	-moz-transform:translateZ(2px) rotateX(-1deg);
	-o-transform:translateZ(2px) rotateX(-1deg);
	-ms-transform:translateZ(2px) rotateX(-1deg);
	transform:translateZ(2px) rotateX(-1deg);
}



/*
#book-wrapper #book a:link, #book-wrapper #book a:visited
{
text-decoration:none;
}
*/
#book-wrapper ul, #book-wrapper li
{
 list-style-type: none;
margin:0;
padding:0;
position:relative;
}
#book-wrapper #book .left, #book-wrapper #book .right
{
width:100%;
 height: 100%;
 display: block;
 position: absolute;
top:0;
}
#book-wrapper.notthreed #book.ie .exploded .left, #book-wrapper.notthreed #book.ie .exploded.nextpage .left
{
left:0;
}
#book-wrapper #book .left div, #book-wrapper #book .right div
{
	border-radius: 3px;
	border:solid 1px rgba(0,0,0,0.2);
}
/*
#book-wrapper.notthreed #book.ie .left div, #book-wrapper #book.ie .right div
{
 border-radius: 0;
 border: none;
}
*/


#book-wrapper #book .left div { left:1px; background:#fefefe; }
#book-wrapper #book .right div { right:1px; background:#fefefe; }
#book-wrapper #book .left div > span, #book-wrapper #book .right div > span { display:block; }
#book-wrapper #book.ie .left div, #book-wrapper #book.ie .right div { left:50%; }
#book-wrapper #book .page .right div span { position:absolute; right:0; width:100%; }
#book-wrapper #book #previous, #book-wrapper #book #next, #book-wrapper #zoomprevious, #book-wrapper #zoomnext { width:10%; display:block; position:absolute; line-height:100%; font-size: 500%; padding:31% 0; text-shadow: 5px 5px 0 rgba(0,0,0,0.05); }
#book-wrapper #book-controls { display:inline; }


/***************** v Arrows v ***************************/
#book-wrapper #book #previous { left:-10%; top:0; }
#book-wrapper #book #next { right:-10%; top:0; }
/*#book-wrapper.threed #book #previous {
-webkit-transform: translateZ(100px ) rotatey(45deg);
-moz-transform: translateZ(100px ) rotatey(45deg);
-o-transform: translateZ(100px ) rotatey(45deg);
-ms-transform: translateZ(100px ) rotatey(45deg);
}
#book-wrapper.threed #book #next {
-webkit-transform: translateZ(100px ) rotatey(-45deg);
-moz-transform: translateZ(100px ) rotatey(-45deg);
-o-transform: translateZ(100px ) rotatey(-45deg);
-ms-transform: translateZ(100px ) rotatey(-45deg);
}
*/
/***************** ^ Arrows ^ ***************************/



#book-wrapper #book ul li div
{
display:block;
width:50%;
height:100%;
overflow:hidden;
position:absolute;
padding:2% 0 0;
}

/*
#book-wrapper #book ul li div a, #book-wrapper #bookpagezoom div a
{
display:block;
padding:2%;
}
#book-wrapper #book ul li div a:hover, #book-wrapper #bookpagezoom div a:hover
{
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
*/
#book-wrapper #book .page
{
position:absolute;
width:100%;
height:100%;
display:block;
}
#book-wrapper #book ul, #book-wrapper #book .page ul
{
width:100%;
height:100%;
display:block;
}
/*
#book-wrapper .page div li, #book-wrapper #bookpagezoom li
{
display:list-item;
margin-left:2em;
 list-style-type: disc;
}
#book-wrapper #bookpagezoom ul
{
text-align:left;
}
#book-wrapper #pright
{
 font-size: 80%;
 text-transform: uppercase;
 opacity: .5;
position:relative;
display:block;
}
#book-wrapper #pright a
{
position:absolute;
right:1%;
bottom:1%;
}
#book-wrapper a:link, #book-wrapper a:visited, #book-wrapper a:hover
{
text-decoration:none;
color:#000;
}
*/
#book-wrapper a:link, #book-wrapper a:visited, #book-wrapper a:hover, #book-wrapper #book .page,
#book-wrapper #book .left, #book-wrapper #book .right, #book-wrapper ul#booktopbar a b, #book-wrapper ul#booktopbar a:hover b
{
-webkit-transition: all 1.3s ease-in-out;
-moz-transition: all 1.3s ease-in-out;
-o-transition: all 1.3s ease-in-out;
-ms-transition: all 1.3s ease-in-out;
}

/*************************** ANIMATION MOD BROWSERS ******************************/
/*
#book-wrapper.notthreed #book .left, #book-wrapper.notthreed #book .previouspage .right
{
-webkit-transform: rotatey(-180deg);
-moz-transform: rotatey(-180deg);
-o-transform: rotatey(-180deg);
-ms-transform: rotatey(-180deg);
}
#book-wrapper.notthreed #book .right, #book-wrapper.notthreed #book .currentpage .left,
#book-wrapper.notthreed #book .currentpage .right, #book-wrapper.notthreed #book .previouspage .left
{
-webkit-transform: rotatey(0deg);
-moz-transform: rotatey(0deg);
-o-transform: rotatey(0deg);
-ms-transform: rotatey(0deg);
}
*/


#book-wrapper.threed #book .left
{
-webkit-transform: translateX(1px) rotateY(179deg);
-moz-transform: translateX(1px) rotateY(180deg);
-o-transform: translateX(1px) rotateY(179deg);
-ms-transform: translateX(1px) rotateY(179deg);
/*transform: translateX(1px) rotateY(180deg);*/
}
#book-wrapper.threed #book .right
{
-webkit-transform: translatex(1px ) translatez(2px ) rotatey(0deg);
-moz-transform: translatex(1px ) translatez(2px ) rotatey(0deg);
-o-transform: translatex(1px ) translatez(2px ) rotatey(0deg);
-ms-transform: translatex(1px ) translatez(2px ) rotatey(0deg);
/*transform: translateX(1px) translateZ(2px) rotateY(0deg);*/
}
#book-wrapper.threed #book .currentpage .left
{
-webkit-transform: translatex(-3px ) translatez(2px ) rotatey(0deg);
-moz-transform: translatex(-3px ) translatez(2px ) rotatey(0deg);
-o-transform: translatex(-3px ) translatez(2px ) rotatey(0deg);
-ms-transform: translatex(-3px ) translatez(2px ) rotatey(0deg);
/*transform: translateX(-3px) translateZ(2px) rotateY(0deg);*/
}
#book-wrapper.threed #book .currentpage .right
{
-webkit-transform: translatex(-1px ) translatez(2px ) rotatey(0deg); 
-moz-transform: translatex(-1px ) translatez(2px ) rotatey(0deg);
-ms-transform: translatex(-1px ) translatez(2px ) rotatey(0deg);
-o-transform: translatex(-1px ) translatez(2px ) rotatey(0deg);
/*transform: translateX(-1px) translateZ(2px) rotateY(0deg);*/
}
#book-wrapper.threed #book .previouspage .left
{
-webkit-transform: translatex( -1px ) translatez(-2px ) rotatey(0deg);
-moz-transform: translatex( -1px ) translatez(-2px ) rotatey(0deg);
-ms-transform: translatex( -1px ) translatez(-2px ) rotatey(0deg);
-o-transform: translatex( -1px ) translatez(-2px ) rotatey(0deg);
/*transform: translateX(-1px) translateZ(-2px) rotatey(0deg);*/
}
#book-wrapper.threed #book .previouspage .right
{
-webkit-transform: translatex(-1px ) translatez(-2px ) rotatey(-179deg);
-moz-transform: translatex(-1px ) translatez(-2px ) rotatey(-179deg);
-ms-transform: translatex(-1px ) translatez(-2px ) rotatey(-179deg);
-o-transform: translatex(-1px ) translatez(-2px ) rotatey(-179deg);
/*transform: translateX(-1px) translateZ(-2px) rotateY(-179deg);*/
}

#book-wrapper ul#booktopbar
{
position:absolute;
height:21px;
bottom:4%;
width:100%;
text-align:center;
/*font-size:70%;
font-weight:bold;
color:rgba(0,0,0,0.5);*/
/*text-shadow: 1px 1px 0 #fff;*/
padding:0;
margin:0;
}
@media screen and (max-width: 689px) {
	#book-wrapper ul#booktopbar {
		bottom:10%;
	}
	#book-wrapper ul#booktopbar img {
		width:30%;
	}
	#section_title { font-size:16px; width:6em; }
	#book-wrapper ul#booktopbar a { display:inline !important; }
}
@media screen and (min-width: 480px) and (max-width: 689px) {
	#book-wrapper ul#booktopbar {
		bottom:4%;
	}
	#book-wrapper ul#booktopbar img {
		width:20%;
	}
}
@media screen and (min-width: 690px) and (max-width: 1023px) {
	#book-wrapper ul#booktopbar {
		bottom:10%;
	}
	#book-wrapper ul#booktopbar img {
		width:70%;
	}
}
#book-wrapper ul#booktopbar li
{
/*
border: 1px solid #999;
 border-radius: 10px;
 box-shadow: 5px 5px 0 rgba(0,0,0,0.05), inset 0 0 5px #d6d6d6;
 text-shadow: 1px 1px 0 #fff;
*/
 height: 30px;
 display: inline-block;
 list-style-type: none;
}
#book-wrapper ul#booktopbar a, #book-wrapper ul#booktopbar #booknav p
{
display:inline-block;
margin:0;
}

#book-wrapper #book .page div 
{
-webkit-backface-visibility: hidden;
-moz-backface-visibiity: hidden;
backface-visibility: hidden;
}

/*************************** 3D ***********************************/
#book-wrapper.threed
{
-webkit-perspective: 5000px;
-webkit-transform: translateZ(0px);
-webkit-perspective-origin: 50% 50%;
-moz-perspective: 5000px;
-moz-transform: translateZ(0px);
-moz-perspective-origin: 50% 50%;
-ms-perspective: 5000px;
-ms-transform: translateZ(0px);
-ms-perspective-origin: 50% 50%;
-o-perspective: 5000px;
-o-transform: translateZ(0px);
-o-perspective-origin: 50% 50%;
}
#book-wrapper.threed, #book-wrapper.threed ul, #book-wrapper.threed li, #book-wrapper.threed div
{
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
}
/*
#book-wrapper.threed ul#booktopbar
{
-webkit-transform: translateZ(10px);
-moz-transform: translateZ(10px);
-ms-transform: translateZ(10px);
-o-transform: translateZ(10px);
}*/
#book-wrapper.threed #bookpagezoomwrapper
{
-webkit-transform: translateZ(1000px);
-moz-transform: translateZ(1000px);
-ms-transform: translateZ(1000px);
-o-transform: translateZ(1000px);
width:80%;
left:10%;
padding-top:2%;
}


/* iOS */
#book-wrapper a, #book-wrapper map, #book-wrapper area { -webkit-tap-highlight-color: rgba(0,0,0,0); }
	

/*************************** SAFARI FIX ***********************************/

#book-wrapper.notthreed .previouspage, #book-wrapper.notthreed .nextpage
{
-webkit-animation: fade 1s;
}
@-webkit-keyframes fade
{
0% {
-webkit-transform: translateZ(1000px);
}
100% {
-webkit-transform: translateZ(-1000px);
}
}
#quicktime
{
position:absolute;
top:40%;
height:20%;
width:20%;
background:#fff;
border:1px solid #000;
border-radius:10px;
padding:1em;
z-index:99999;
}

/* qTip2 v2.2.1 | Plugins: tips viewport imagemap | Styles: core | qtip2.com | Licensed MIT | Tue Sep 09 2014 15:04:30 */
.qtip{position:absolute;left:-28000px;top:-28000px;display:none;max-width:280px;min-width:50px;font-size:10.5px;line-height:12px;direction:ltr;box-shadow:none;padding:0}.qtip-content{position:relative;padding:5px 9px;overflow:hidden;text-align:left;word-wrap:break-word;color:#3c4981}.qtip-titlebar{position:relative;padding:5px 35px 5px 10px;overflow:hidden;border-width:0 0 1px;font-weight:700}.qtip-titlebar+.qtip-content{border-top-width:0!important}.qtip-close{position:absolute;right:-9px;top:-9px;z-index:11;cursor:pointer;outline:0;border:1px solid transparent}.qtip-titlebar .qtip-close{right:4px;top:50%;margin-top:-9px}* html .qtip-titlebar .qtip-close{top:16px}.qtip-icon .ui-icon,.qtip-titlebar .ui-icon{display:block;text-indent:-1000em;direction:ltr}.qtip-icon,.qtip-icon .ui-icon{-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;text-decoration:none}.qtip-icon .ui-icon{width:18px;height:14px;line-height:14px;text-align:center;text-indent:0;font:400 bold 10px/13px Tahoma,sans-serif;color:inherit;background:-100em -100em no-repeat}.qtip-default{border:1px solid #F1D031;background-color:#FFFFA3;color:#DDD}.qtip-default .qtip-titlebar{background-color:#FFEF93}.qtip-default .qtip-icon{border-color:#CCC;background:#F1F1F1;color:#777}.qtip-default .qtip-titlebar .qtip-close{border-color:#AAA;color:#111}.qtip .qtip-tip{margin:0 auto;overflow:hidden;z-index:10}.qtip .qtip-tip,x:-o-prefocus{visibility:hidden}.qtip .qtip-tip,.qtip .qtip-tip .qtip-vml,.qtip .qtip-tip canvas{position:absolute;color:#123456;background:0 0;border:0 dashed transparent}.qtip .qtip-tip canvas{top:0;left:0}.qtip .qtip-tip .qtip-vml{behavior:url(#default#VML);display:inline-block;visibility:visible}

