/*

 * @ FlipBook plugin for Elxis CMS created by Nikos Vlachtsis (http://www.osw.gr) is a combination of 4 jQuery plugins all licensed under MIT License (http://opensource.org/licenses/mit-license.php)
 * @ Mainly is based on source code of Booklet jQuery plugin (http://builtbywill.com/code/booklet/) created by William Grauvogel 
 * @ The plugin has also 3 additional functions: Zoom, Carousel navigation and Fullscreen which are also 3 jQuery plugins
 * @ Zoom function is based on source code of jQuery Panzoom plugin (https://github.com/timmywil/jquery.panzoom) created by Timmy Willison
 * @ Carousel thumbnail navigation function is based on source code of jQuery jCarousel - v0.3.3 plugin (http://sorgalla.com/jcarousel/) created by Jan Sorgalla
 * @ Fullscreen function is based on source code of jQuery Fullscreen plugin (https://github.com/private-face/jquery.fullscreen) created by Vladimir Zhuravlev

 *----------- css for jQuery Booklet Plugin -----------*

 * jQuery Booklet Plugin
 * Copyright (c) 2010 - 2014 William Grauvogel (http://builtbywill.com/)
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
 * Version : 1.4.4
 * Originally based on the work of:
 *	1) Charles Mangin (http://clickheredammit.com/pageflip/)
 */
 
	.booklet         {position:relative; margin:0 auto 10px; overflow:visible !important;}
	.booklet .b-page {left:0; top:0; position:absolute; overflow:hidden; padding:0; outline:1px solid rgba(0,0,0,0);}
	
	.booklet .b-pN  {}
	.booklet .b-p0  {}
	.booklet .b-p1  {}
	.booklet .b-p2  {}    
	.booklet .b-p3  {}
	.booklet .b-p4  {}
	   
   	/* Page Wrappers */
	.booklet .b-wrap       {top:0; position:absolute;}
	.booklet .b-wrap-left  {background:#fff;}
	.booklet .b-wrap-right {background:#efefef;} /* #efefef */
	
	.booklet .b-pN .b-wrap,
	.booklet .b-p1 .b-wrap,
	.booklet .b-p2 .b-wrap,
	.booklet .b-p3 .b-wrap,
	.booklet .b-p4 .b-wrap  {left:0;}
	.booklet .b-p0 .b-wrap  {right:0;}
	
   	/* Custom Page Types */
	.booklet .b-page-blank  {padding:0; width:100%; height:100%;}
	.booklet .b-page-cover  {padding:0; width:100%; height:100%; background:#925C0E;}
	.booklet .b-page-cover h3  {color:#fff; text-shadow:0 1px 3px #222;}
   
   	/* Page Numbers */
	.booklet .b-counter {position:absolute; display:block; bottom:10px; background:#E6EBEC; width:18px; height:18px; border-radius:18px; padding:2px; text-align:center; font-family:tahoma,arial,sans-serif; font-size:.8em; color:#333; }
	.booklet .b-wrap-left  .b-counter  {left:10px;}
	.booklet .b-wrap-right .b-counter {right:10px;}
   
   	/* Page Shadows */
	.booklet .b-shadow-f  {right:0; top:0; position:absolute; opacity:0; background-image:url("images/shadow-top-forward.png"); background-repeat:repeat-y; background-position:100% 0;}
	.booklet .b-shadow-b  {left:0;  top:0; position:absolute; opacity:0; background-image:url("images/shadow-top-back.png");    background-repeat:repeat-y; background-position:0 0;}
	
	.booklet .b-p0 {background-image:url("images/shadow.png"); background-repeat:repeat-y; background-position:100% 10px;}
	.booklet .b-p3 {background-image:url("images/shadow.png"); background-repeat:repeat-y; background-position:0 10px;}
	
   	/* Overlay Controls */
	.booklet .b-grab     {cursor: url("images/openhand.cur"), default;}
	.booklet .b-grabbing {cursor: url("images/closedhand.cur"), default;}
	
   	/* Overlay Controls */
	.booklet .b-overlay      {top:0; position:absolute; height:100%; width:50%;}
	.booklet .b-overlay-prev {left:0;}
	.booklet .b-overlay-next {right:0;}
	
   	/* Tab Controls */
	.booklet .b-tab        {background:#000; height:30px; width:100%; padding:6px 0 0; text-align:center; position:absolute; font-size:11px;}
	.booklet .b-tab-prev   {left:0; background:#F5F5F5; color:#666; border:1px solid #ccc; border-top-left-radius:4px; border-top-right-radius:4px;}
	.booklet .b-tab-next   {right:0; background:#F5F5F5; color:#666; border:1px solid #ccc; border-top-left-radius:4px; border-top-right-radius:4px;}
	.booklet .b-tab:hover  {background:#E4E4EA; color:#000;}	
	
   	/* Arrow Controls */
  .booklet .b-arrow  {display:block; position:absolute; text-indent:-9999px; top:0; height:100%; width:28px;}
	.booklet .b-arrow:hover {display:block; position:absolute; text-indent:-9999px; top:0; height:100%; width:28px;}
	.booklet .b-arrow div      {display:none; text-indent:-9999px; height:32px; width:28px; position:absolute; left:0; top:45%;}
	.booklet .b-arrow-next     {right:-26px;}
  .booklet .b-arrow-next:hover {
  right:-26px;
  background:rgba(0,0,0, 0.2);
  -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 16px #ccc;
	-moz-box-shadow:0 0 16px #ccc;
	-o-box-shadow:0 0 16px #ccc;
	-ms-box-shadow:0 0 16px #ccc;
	box-shadow:0 0 16px #ccc;
  border-radius:0 14px 14px 0;
  }
	.booklet .b-arrow-prev {left:-26px;}
  
  .booklet .b-arrow-prev:hover {
  left:-26px;
   background:rgba(0,0,0, 0.2);
  -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 16px #ccc;
	-moz-box-shadow:0 0 16px #ccc;
	-o-box-shadow:0 0 16px #ccc;
	-ms-box-shadow:0 0 16px #ccc;
	box-shadow:0 0 16px #ccc;
  border-radius:14px 0 0 14px;
  }
	
  .booklet .b-arrow-next div {background:url("images/arrow-next.png") no-repeat left top;}
  
  .booklet .b-arrow-prev div {background:url("images/arrow-prev.png") no-repeat left top;}
		
/* @z-index fix (needed for older IE browsers)
--------------------------------------------*/

    body              {z-index:0;}
    .b-menu           {z-index:100;}
    .b-selector       {z-index:100;}
    .booklet          {z-index:10;}
    .b-pN             {z-index:10;}
    .b-p0             {z-index:30;}
    .b-p1             {z-index:20;}
    .b-p2             {z-index:20;}
    .b-p3             {z-index:30;}
    .b-p4             {z-index:10;}
    .b-prev           {z-index:40;}
    .b-next           {z-index:40;}
    .b-counter        {z-index:40;}
	
/* @Menu Items
----------------------------------------*/
	.b-menu {height:30px; padding:0 0 10px;}
	
	.b-selector             {height:30px; position:relative; border:6px double #97CF00; border-top-left-radius:6px; border-top-right-radius:6px; color:#333; cursor:pointer; font:normal 12px "Myriad Pro", Myriad, "DejaVu Sans Condensed","Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;}
	.b-selector .b-current  {padding:6px; line-height:18px; min-width:18px; height:20px; display:block; background:#97CF00; text-align:center;}
	.b-selector-page        {width:auto; margin-left:15px;}
	.b-selector-chapter     {width:auto;}
	
	.b-selector:hover            {color:#fff; background-position:left 0;}
	.b-selector:hover .b-current {background-position:right 0;}
	.b-selector ul               {overflow:hidden; margin:0 -6px 0 0; list-style:none !important; position:absolute; top:40px; right:0; padding:0 0 10px; background:#97CF00; width:100px;}
	.b-selector li               {border:none;}
	.b-selector li:hover         {background:#D00000;}
	.b-selector a                {color:#333; height:14px; text-decoration:none; display:block; padding:5px 10px;}
	.b-selector a .b-text        {float:left; clear:none;}
	.b-selector a .b-num         {float:right; clear:none;}
	.b-selector a:hover          {color:#fff;}

	
  /*----------- css for panzoom plugin and all navigation buttons -----------*/

	section {text-align: center; margin: 10px 0;}
  .panzoom-parent {border: 2px solid #333;}
  .panzoom-parent .panzoom { border: 2px dashed #666; }
  .parent > div { display: inline-block; width: 100%;}
  .buttons-container {margin: 0 0 5px 0; padding:0 3px 10px 3px;}
  .buttons {height: 32px; margin: 0 auto 10px auto; }
  .fsbutton {text-align:center;}
  .linkbutton {width:64px; height:32px; text-align:center; padding:0; margin:2px 0; display:inline-block;}
  .textbutton {text-align:center; background:#F5F5F5; font-size:12px; border:1px solid #666; border-radius:3px; padding:2px 4px; margin:0 0 6px 0; display:inline-block;}
  .textbutton:hover {background:#D8E8F6; border:1px solid #333;}
  .fsheader {background:#EEE27A; font-size:12px; border:1px solid #666; border-radius: 3px; text-align:center; height: 40px; padding:2px 5px 10px 5px; margin:0 0 20px 0; display:inline-block;}
  .numpages {background:#D8E8F6; font-size:12px; border:1px solid #666; border-radius: 3px; padding:2px 5px; margin:0 0 6px 0; display:inline-block;}
  #custom-prev { border:0; outline:none; width:32px; height:32px; background: url("images/prev.png") 0 0 no-repeat; }
  #custom-prev:hover {cursor: pointer; border:0; outline:none; width:32px; height:32px; background: url("images/prev.png") 100% 0 no-repeat;}
  #custom-next { border:0; outline:none; width:32px; height:32px; background: url("images/next.png") 0 0 no-repeat; }
  #custom-next:hover {cursor: pointer; border:0; outline:none; width:32px; height:32px; background: url("images/next.png") 100% 0 no-repeat;}
  #play {border:0; outline:none; width:32px; height:32px; background: url("images/play.png") 0 0 no-repeat;}
  #play:hover {cursor: pointer; border:0; outline:none; width:32px; height:32px; background: url("images/play.png") 100% 0 no-repeat;}
  #pause {border:0; outline:none; width:32px; height:32px; background: url("images/pause.png") 0 0 no-repeat;}
  #pause:hover {cursor: pointer; border:0; outline:none; width:32px; height:32px; background: url("images/pause.png") 100% 0 no-repeat;}
  .zoom-in {border:0; outline:none; width:32px; height:32px; background: url("images/zoom-in.png") 0 0 no-repeat;}
  .zoom-in:hover {cursor: pointer; border:0; outline:none; width:32px; height:32px; background: url("images/zoom-in.png") 100% 0 no-repeat;}
  .zoom-out {border:0; outline:none; width:32px; height:32px; background: url("images/zoom-out.png") 0 0 no-repeat;}
  .zoom-out:hover {cursor: pointer; border:0; outline:none; width:32px; height:32px; background: url("images/zoom-out.png") 100% 0 no-repeat;}
  .reset {border:0; outline:none; width:32px; height:32px; background: url("images/reset.png") 0 0 no-repeat;}
  .reset:hover {cursor: pointer; border:0; outline:none; width:32px; height:32px; background: url("images/reset.png") 100% 0 no-repeat;}
  .zoom-range {height: 24px; margin-top: 5px; border:1px solid #ccc; border-radius: 4px; display:inline-block;}
  .clear {clear:both;}
  
  /*----------- css for jcarousel plugin -----------*/
  
.jcarousel-wrapper {
    margin: 5px auto 130px auto;
    position: relative;
    border: 10px solid #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 6px #999;
    -moz-box-shadow: 0 0 6px #999;
    box-shadow: 0 0 6px #999;
}

/** Carousel **/

.jcarousel {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.jcarousel ul {
    width: 20000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jcarousel li {
    width: auto;
    float: left;
    padding-left: 38px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.jcarousel img {
    display: block;
    max-width: 100%;
    height: auto !important;
}

/** Carousel Controls **/

.jcarousel-control-prev,
.jcarousel-control-next {
    position: absolute;
    top: 50%;
    margin-top: -15px;
    width: 30px;
    height: 30px;
    text-align: center;
    background: #D8D4D0;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    font: 24px/27px Arial, sans-serif;
    outline: none;
    border: 1px solid #aaa;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    -webkit-box-shadow: 0 0 4px #F0EFE7;
    -moz-box-shadow: 0 0 4px #F0EFE7;
    box-shadow: 0 0 4px #F0EFE7;
}

.jcarousel-control-prev {left: 0;}

.jcarousel-control-next {right: 0;}

.jcarousel-control-prev:hover, .jcarousel-control-next:hover { background: #BDB6B1; text-decoration: none; }

/** Carousel Pagination **/

.jcarousel-pagination {
    position: absolute;
    top: 130px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    margin: 0;
}

.jcarousel-pagination a {
    text-decoration: none;
    display: inline-block;
    font-size: 11px;
    height: 10px;
    width: 10px;
    line-height: 10px;
    outline: none;
    background: #fff;
    color: #4E443C;
    border-radius: 10px;
    text-indent: -9999px;
    margin-right: 7px;
    -webkit-box-shadow: 0 0 2px #4E443C;
    -moz-box-shadow: 0 0 2px #4E443C;
    box-shadow: 0 0 2px #4E443C;
}

.jcarousel-pagination a.active {
    background: #4E443C;
    color: #fff;
    opacity: 1;
    -webkit-box-shadow: 0 0 2px #F0EFE7;
    -moz-box-shadow: 0 0 2px #F0EFE7;
    box-shadow: 0 0 2px #F0EFE7;
}