/* Docs sample */

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#canvas {
  width: 960px;
  height: 600px;
  margin: 100px auto;
}

#book-zoom {
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -ms-transition: -ms-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
}

.animated {
  -webkit-transition: margin-left 0.2s ease-in-out;
  -moz-transition: margin-left 0.2s ease-in-out;
  -o-transition: margin-left 0.2s ease-in-out;
  -ms-transition: margin-left 0.2s ease-in-out;
  transition: margin-left 0.2s ease-in-out;
}

.sample-docs {
  margin-top: 20px;
  width: 942px;
  height: 600px;
  -ms-interpolation-mode: bicubic !important;
  image-rendering: optimizeQuality !important;
}

.sample-docs .page {
  width: 471px;
  height: 600px;
  background: white;
  -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 0 20px rgba(0,0,0,0.2);
  -ms-box-shadow: 0 0 20px rgba(0,0,0,0.2);
  -o-box-shadow: 0 0 20px rgba(0,0,0,0.2);
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

.sample-docs .depth {
  position: absolute;
  top: 9px;
  width: 16px;
  height: 1754px;
}

.sample-docs .front-side .depth {
  background-size: 100% 100%;
  left: 4px;
  background-position: 0 0;
}

.sample-docs .back-side .depth {
  background-size: 100% 100%;
  right: 4px;
  background-position: 0 0;
}

.sample-docs .p1 .side {
  width: 5px;
  height: 600px;
  position: absolute;
  top: 0;
  left: 475px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #bbb), color-stop(0.5, #ddd), color-stop(1, #bbb));
  background-image: -webkit-linear-gradient(left, #bbb, #ddd, #bbb);
  background-image: -moz-linear-gradient(left, #bbb, #ddd, #bbb);
  background-image: -ms-linear-gradient(left, #bbb, #ddd, #bbb);
  background-image: -o-linear-gradient(left, #bbb, #ddd, #bbb);
  background-image: linear-gradient(left, #bbb, #ddd, #bbb);
  -webkit-transform: rotateY(-90deg);
  -moz-transform: rotateY(-90deg);
  -o-transform: rotateY(-90deg);
  -ms-transform: rotateY(-90deg);
  transform: rotateY(-90deg);
  -webkit-transform-origin: top right;
  -moz-transform-origin: top right;
  -o-transform-origin: top right;
  -ms-transform-origin: top right;
  transform-origin: top right;
  z-index: 100000;
}

/* .sample-docs .p1453
{
	background-color:white;
	background-image:url(../../../JPEG_CATALOG_BN/CatalogNLBN_1453.jpg) !important;
    background-size: cover;
	background-position:-0px 0 !important;
}

.sample-docs .p1454
{
	background-color:white;
	background-image:url(../../../JPEG_CATALOG_BN/CatalogNLBN_1454.jpg) !important;
    background-size: cover;
	background-position:-0px 0 !important;
} */

.sample-docs .hard {
  width: 1240px;
  height: 1754px;
  background-color: white;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none;
}

.sample-docs .even .gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../Img/gradient-page-left.png);
  background-position: right top;
  background-repeat: repeat-y;
}

.sample-docs .odd .gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../Img/gradient-page-right.png);
  background-position: left top;
  background-repeat: repeat-y;
}

.sample-docs .page-wrapper {
  -webkit-perspective: 2000px;
  -moz-perspective: 2000px;
  -ms-perspective: 2000px;
  perspective: 2000px;
}

.sample-docs .loader {
  background-image: url(../Img/Turn/loader2.gif);
  width: 22px;
  height: 22px;
  position: absolute;
  top: 280px;
  left: 219px;
}

.sample-docs .shadow {
  -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 20px #ccc;
  -moz-box-shadow: 0 0 20px #ccc;
  -o-box-shadow: 0 0 20px #ccc;
  -ms-box-shadow: 0 0 20px #ccc;
  box-shadow: 0 0 20px #ccc;
}

.sample-docs .tabs {
  width: 942px;
  height: 22px;
  top: -22px;
  position: relative;
  z-index: 1;
}

.sample-docs .tabs > div {
  width: 461px;
  height: 22px;
  float: left;
}

.sample-docs .tabs .left {
  text-align: left;
  margin-left: 10px;
}

.sample-docs .own-size {
  width: 460px;
  height: 582px;
  background-color: white;
  overflow: hidden;
}

.sample-docs .tabs .right {
  text-align: right;
  margin-right: 10px;
}

.sample-docs .region.zoom {
  opacity: 0.01;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
  filter: alpha(opacity=1);
}

.sample-docs .tabs a {
  color: black;
  -webkit-border-image: url(../Img/Turn/tab-off.png) 2 2 2 2 repeat stretch;
  border-width: 2px 2px 2px 2px;
  display: inline-block;
  font: bold 11px arial;
  text-shadow: 1px 1px 0 #ddd;
  color: #333;
  line-height: 2px;
  text-decoration: none;
}

.sample-docs .tabs .on, .sample-docs .tabs .on:hover {
  -webkit-border-image: url(../Img/Turn/tab-on.png) 2 2 2 2 repeat stretch;
  cursor: default;
}

.sample-docs .tabs a:hover {
  color: black;
  text-decoration: none;
  cursor: pointer;
  -webkit-border-image: url(../Img/Turn/tab-hover.png) 2 2 2 2 repeat stretch;
}

.toolboxstyle {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
  box-shadow: 2px 2px 2px #AAAAAA;
}