@import url('reset.css');
@import url('static.css');
@import url('elements.css');


/* General */
.clear  { clear: both; display: block; }

a       { cursor: pointer; text-decoration: none; }
a:hover { text-decoration: none; outline:none }

label, input[type="submit"] { cursor: pointer; }

html { overflow: hidden; outline:none;}


/* Structure */
html, body { width: 100%; height: 100%; overflow: hidden; }

body { background-color:#474646; outline:none; /*background: url(../img/bg2.jpg) no-repeat center 0;*/ line-height: 1.5; font-family: 'Arial', sans-serif; color: #77797f; }

#page          { outline:none; position: absolute; left: 50%; top: 50%; z-index: 5; display: none; width: 1200px; height: 420px; margin: -358px 0 0 -550px; }
#page.mobile   { outline:none; width: 595px; height: 300px; margin: -210px 0 0 -275px; }
#page .padding {  }


@media screen and (max-width: 1024px) { body { background-size: 200% 200%; outline:none;} #page { width: 450px; height: 300px; margin: -205px 0 0 -270px; outline:none; } }

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {

	body  { background-size: 200% 200%; outline:none; }
	#page { width: 595px; height: 300px; margin: -205px 0 0 -270px; outline:none; }
}

@media screen and (max-width: 768px) { #page { width: 450px; height: 300px; margin: -205px 0 0 -270px; outline:none; } }

@media only screen and (max-device-width: 960px) { #page  { /*width: 595px; height: 300px;*/width: 450px; height: 300px; margin: -205px 0 0 -270px; outline:none; } }


.cursor-grab { cursor: -webkit-grab; cursor: -moz-grab; }

.overlay { position:absolute; left:-10000px!important; display:none; top:0; z-index:20; background:#fff; width:100%; height:100%; opacity: 0; outline:none; }

.overlay.active { left: 0px!important; display: block; }


/* Book */
#book { position: relative; z-index: 10; width: 100%; height:100%; outline:none; }

#book .turn-page { background-color: white; background-size: 100% 100%; outline:none!important; }

.double        { background-size: 200% 100% !important; outline:none;}
.double.first  { background-position: 0% 0%; outline:none;}
.double.second { background-position: -100% 0%; outline:none;}


/* Nav Arrows */
.nav_arrow      { position: absolute; top: 50%; z-index: 15; width: 34px; height: 136px; margin-top: -68px;  }
.nav_arrow.next { right: -34px; background: url(../img/right.png); }
.nav_arrow.prev	{ left: -34px; background: url(../img/left.png); }