/* The following styles are used only for this page - the actual plugin styles are in slidernav.css */

* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  background: #ffffff;
}

object, #book-flash {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
}

#maincontent, #book-flash, #jsContainer {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: #ffffff;
}

#maincontent {
  width: 100%;
}

#overlay {
  height: 100%;
}

#jsContainer {
  font-family: 'Helvetica Neue', Helvetica, Arial;
  font-size: 14px;
  line-height: 18px;
  color: #231f20;
  background: #f1f0f0;
}

.clearfix:after, .clear-block:after {
  font-size: 0;
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  content: '.';
}


/* flip-magazine-container CSS */

#book-flash {
  display: block;
  overflow: hidden;
  /*min-width: 960px;
    min-height: 500px;*/
}

.flip-magazine-container {
  position: relative;
  display: block;
  width: 100%;
  height: -webkit-calc(100vh - 44px);
  height: calc(100vh - 44px);
  margin: auto auto;
  padding: 0;
}

.flip-magazine {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  width: 100vw;
}


/* flip-magazine CSS */


/*.flip-magazine{width:520px; height:548px;margin:auto auto; background:yellow;}
*/


/* flip-magazine-navigation CSS */

.flip-magazine-navigation {
  position: relative;
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  background: url(../images/flip-magazine-navigation-bg.png) repeat-x scroll 0 0 transparent!important;
}

#jsContainer span {
  display: block;
  margin: 0 auto;
}

span.ffback {
  line-height: 29px;
  width: 18px;
  height: 29px;
  background: url('../images/ffback.png') no-repeat scroll left center transparent;
}

span.back {
  line-height: 29px;
  width: 14px;
  height: 29px;
  background: url('../images/back.png') no-repeat scroll left center transparent;
}

span.zoom {
  line-height: 29px;
  width: 21px;
  height: 29px;
  background: url('../images/zoom.png') no-repeat scroll left center transparent;
}

span.fullscreen {
  line-height: 29px;
  width: 21px;
  height: 29px;
  background: url('../images/fullscreen.png') no-repeat scroll left center transparent;
}

span.smallscreen {
  line-height: 29px;
  width: 21px;
  height: 29px;
  background: url('../images/smallscreen.png') no-repeat scroll left center transparent;
}

span.inhoud {
  line-height: 29px;
  width: 37px;
  height: 29px;
  background: url('../images/inhoud.png') no-repeat center center transparent;
}

span.forward {
  line-height: 29px;
  width: 14px;
  height: 29px;
  background: url('../images/forward.png') no-repeat scroll left center transparent;
}

span.ffforward {
  line-height: 29px;
  width: 18px;
  height: 29px;
  background: url('../images/fforward.png') no-repeat scroll left center transparent;
}

span.arrow {
  line-height: 48px;
  width: 34px;
  height: 48px;
}

span.arrow-left {
  background: url('../images/arrow-left.png') no-repeat scroll left center transparent;
}

span.arrow-right {
  background: url('../images/arrow-right.png') no-repeat scroll left center transparent;
}

span.arrow-up {
  width: 24px;
  background: url('../images/arrow-up.png') no-repeat scroll left center transparent;
}

span.arrow-down {
  width: 24px;
  background: url('../images/arrow-down.png') no-repeat scroll left center transparent;
}


/* button-arrow CSS */

a.arrow {
  font-weight: bold;
  line-height: 48px;
  display: block;
  width: 63px;
  height: 48px;
  color: #fff;
  border: 1px solid #4a4848;
  border-radius: 3px;
  outline: 0;
  background: #6f6c6c;
  /* old browsers */
  background: -moz-linear-gradient(top, #948f8f 3%, #948f8f 4%, #6f6c6c 100%);
  /* firefox */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(3%, #948f8f), color-stop(4%, #948f8f), color-stop(100%, #6f6c6c));
  /* webkit */
  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  /* Safari, Chrome */
  /* Firefox */
  box-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  /* CSS3 */
  text-shadow: 1px 1px #1f272b;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#948f8f', endColorstr='#6f6c6c', GradientType=0);
  /* ie */
}

.left {
  position: absolute;
  top: 50%;
  left: 1%;
  -ms-transform: translate(-1%, -50%);
  transform: translate(-1%, -50%);
  -webkit-transform: translate(-1%, -50%);
  z-index: 1;
}

.right {
  position: absolute;
  top: 50%;
  right: 1%;
  -ms-transform: translate(-1%, -50%);
  transform: translate(-1%, -50%);
  -webkit-transform: translate(-1%, -50%);
  z-index: 1;
}


/* flip-magazine-navigation CSS */

.flip-magazine-navigation {
  position: relative;
  bottom: 0;
  display: block;
  width: 100%;
  margin: 0;
  text-align: center;
  background: #b8b5b5;
}


/* Dark Button CSS */

.button {
  font-weight: bold;
  line-height: 30px;
  display: block;
  width: 37px;
  height: 29px;
  padding: 0;
  color: #fff;
  border: 1px solid #4a4848;
  border-radius: 3px;
  outline: 0;
  background: #6f6c6c;
  /* old browsers */
  background: -moz-linear-gradient(top, #948f8f 3%, #948f8f 4%, #6f6c6c 100%);
  /* firefox */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(3%, #948f8f), color-stop(4%, #948f8f), color-stop(100%, #6f6c6c));
  /* webkit */
  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  /* Safari, Chrome */
  /* Firefox */
  box-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  /* CSS3 */
  text-shadow: 1px 1px #1f272b;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#948f8f', endColorstr='#6f6c6c', GradientType=0);
  /* ie */
}

a.arrow:hover, .button:hover {
  color: #fff;
  background: #4c5a64;
  /* old browsers */
  background: #6f6c6c;
  /* old browsers */
  background: -moz-linear-gradient(top, #948f8f 3%, #948f8f 4%, #6f6c6c 100%);
  /* firefox */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(3%, #948f8f), color-stop(4%, #948f8f), color-stop(100%, #6f6c6c));
  /* webkit */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#948f8f', endColorstr='#6f6c6c', GradientType=0);
  /* ie */
}

a.arrow:active, .button:active {
  color: #fff;
  background: #6f6c6c;
  /* old browsers */
  background: -moz-linear-gradient(top, #948f8f 3%, #948f8f 4%, #6f6c6c 100%);
  /* firefox */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(3%, #948f8f), color-stop(4%, #948f8f), color-stop(100%, #6f6c6c));
  /* webkit */
  -webkit-box-shadow: 1px 1px 1px rgba(255, 255, 255, .1);
  /* Safari, Chrome */
  /* Firefox */
  box-shadow: 1px 1px 1px rgba(255, 255, 255, .1);
  /* CSS3 */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#948f8f', endColorstr='#6f6c6c', GradientType=0);
  /* ie */
}


/* Other stuff: */


/*.button-list {
    display: block;
    float: left;
    list-style: none outside none;
    margin: 8px 0 0 7px;
    padding: 0;
    width: auto;
}*/

.button-list {
  display: block;
  width: 996px;
  margin: 0 auto;
  padding: 0;
  list-style: none outside none;
  padding-top: 6px;
}

.button-list li {
  float: left;
  margin: 0 10px 0 0;
}

.button-list li.logo {
  width: 140px;
  text-align: center;
}

.button-list li.pagelabel {
  font-weight: bold;
  line-height: 30px;
  display: block;
  width: 201px;
  height: 30px;
  margin-right: 50px;
  margin-left: 50px;
  padding: 0;
  color: #494949;
  border: 1px solid #4a4848;
  border-radius: 3px;
  outline: 0;
  background: #a5a1a1;
  /* old browsers */
  background: -moz-linear-gradient(top, #f8f8f8 3%, #f8f8f8 4%, #a5a1a1 100%);
  /* firefox */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(3%, #f8f8f8), color-stop(4%, #f8f8f8), color-stop(100%, #a5a1a1));
  /* webkit */
  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  /* Safari, Chrome */
  /* Firefox */
  box-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  /* CSS3 */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#a5a1a1', GradientType=0);
  /* ie */
}

.pagesholder {
  display: table;
  margin: auto;
}

.pageholder {
  display: table-cell;
}

#zoomContainer {
  position: fixed;
  z-index: 213333333333333;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: auto;
}

#zoomContent {
  overflow: scroll;
  width: 100%;
  height: 100%;
  margin: auto;
}

.zoomholder>div {
  -webkit-background-size: cover;
  background-size: cover;
  margin: auto;
}