body{
overflow:hidden;
background-color:#fcfcfc;
margin:0;
padding:0;
}
body.dark{
background-color: #272727;
transition: background-color .4s linear;
-o-transition: background-color .4s linear;
-moz-transition: background-color .4s linear;
-webkit-transition: background-color .4s linear;
}
.dark #header, .dark #footer {
opacity: .25;
transition: opacity .4s linear;
-o-transition: opacity .4s linear;
-moz-transition: opacity .4s linear;
-webkit-transition: opacity .4s linear;
}

.logo, #header, #footer, .ui a, .ui a span.icon,#pagination-prev div.arrow, #pagination-next div.arrow{
background: transparent url('images/image.png') no-repeat top left;
}

div#header{
background-repeat: repeat-x;
background-image: url('images/image.png');
width: 100%;
height: 50px;
display: block;
left: 0px;
top: 0px;
float: left;
}
#logo{
position:absolute;
left:0px;
top:0px;
}
#logo a.logo {
background-position: left -53px;
width: 200px;
height: 50px;
display: block;
float: left;
}
#main{
width: 100%;
float: left;
display: block;
overflow: auto;
}

div#download {
font-size: 16px;
color: #666;
}

div#footer {
background-position: 0 -117px;
background-repeat: repeat-x;
display: block;
width: 100%;
height: 25px;
bottom: 0px;
top: 100%;
font-size: 11px;
color: #666;
z-index: 2000;
float: left;
}
span.curator {
margin: 8px 8px 8px 13px;
float: right;
}

.magazine-viewport .container{
position:absolute;
top:50%;
left:50%;
width:922px;
height:600px;
margin:auto;
}

.magazine-viewport .magazine{
width:922px;
height:600px;
left:-461px;
top:-300px;
}

.magazine-viewport .page{
width:461px;
height:600px;
background-color:white;
background-repeat:no-repeat;
background-size:100% 100%;
}

.magazine-viewport .zoomer .region{
display:none;
}

.magazine .region{
position:absolute;
overflow:hidden;
background:#ffffff;
opacity:0.3;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
cursor:pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
}

/* .magazine .region-bg{
opacity:1;
} */

.magazine .region:hover{
opacity:0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
}

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

.magazine .region.zoom:hover{
opacity:0.2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
}

.magazine .page{
-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);
}

.magazine-viewport .page img{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin:0;
}

.magazine .even .gradient{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background:-webkit-gradient(linear, left top, right top, color-stop(0.95, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.2)));
background-image:-webkit-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
background-image:-moz-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
background-image:-ms-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
background-image:-o-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
background-image:linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
}

.magazine .odd .gradient{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background:-webkit-gradient(linear, right top, left top, color-stop(0.95, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.15)));
background-image:-webkit-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
background-image:-moz-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
background-image:-ms-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
background-image:-o-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
background-image:linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
}

.magazine-viewport .zoom-in .even .gradient,
.magazine-viewport .zoom-in .odd .gradient{

display:none;

}

.magazine-viewport .loader{
background-image:url(images/loader.gif);
width:22px;
height:22px;
position:absolute;
top:280px;
left:219px;
}

.magazine-viewport .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;
}

.magazine-viewport .next-button,
.magazine-viewport .previous-button{
width:22px;
height:600px;
position:absolute;
top:0;
}

.magazine-viewport .next-button{
right:-22px;
-webkit-border-radius:0 15px 15px 0;
-moz-border-radius:0 15px 15px 0;
-ms-border-radius:0 15px 15px 0;
-o-border-radius:0 15px 15px 0;
border-radius:0 15px 15px 0;
}

.magazine-viewport .previous-button{
left:-22px;
-webkit-border-radius:15px 0 0 15px;
-moz-border-radius:15px 0 0 15px;
-ms-border-radius:15px 0 0 15px;
-o-border-radius:15px 0 0 15px;
border-radius:15px 0 0 15px;
}

.magazine-viewport .previous-button-hover,
.magazine-viewport .next-button-hover{
background-color:rgba(0,0,0, 0.2);
}

.magazine-viewport .previous-button-hover,
.magazine-viewport .previous-button-down{
background-image:url(images/arrows.png);
background-position:-4px 284px;
background-repeat:no-repeat;
}

.magazine-viewport .previous-button-down,
.magazine-viewport .next-button-down{
background-color:rgba(0,0,0, 0.4);
}

.magazine-viewport .next-button-hover,
.magazine-viewport .next-button-down{
background-image:url(images/arrows.png);
background-position:-38px 284px;
background-repeat:no-repeat;
}

.magazine-viewport .zoom-in .next-button,
.magazine-viewport .zoom-in .previous-button{
display:none;
}

.animated{
-webkit-transition:margin-left 0.5s;
-moz-transition:margin-left 0.5s;
-ms-transition:margin-left 0.5s;
-o-transition:margin-left 0.5s;
transition:margin-left 0.5s;
}

.thumbnails{
width:100%;
height:110px;
z-index:1;
float: left;
display: block;
overflow-x: auto;
}

.thumbnails > div{
width:100%;
height:100%;
/*margin:0 auto;*/
white-space: nowrap;
overflow-y: hidden;
overflow-x: auto;
}

.thumbnails #thumb_list{
margin:10px;
padding:0;
text-align:center;
/*-webkit-transform:scale3d(0.5, 0.5, 1);
-moz-transform:scale3d(0.5, 0.5, 1);
-o-transform:scale3d(0.5, 0.5, 1);
-ms-transform:scale3d(0.5, 0.5, 1);
transform:scale3d(0.5, 0.5, 1);*/
-webkit-transition:-webkit-transform ease-in-out 100ms;
-moz-transition:-moz-transform ease-in-out 100ms;
-ms-transition:-ms-transform ease-in-out 100ms;
-o-transition:-o-transform ease-in-out 100ms;
transition:transform ease-in-out 100ms;
}

.thumbanils-touch #thumb_list{
-webkit-transform:none;
-moz-transform:none;
-o-transform:none;
-ms-transform:none;
transform:none;
}
/*
.thumbnails-hover ul{
-webkit-transform:scale3d(0.6, 0.6, 1);
-moz-transform:scale3d(0.6, 0.6, 1);
-o-transform:scale3d(0.6, 0.6, 1);
-ms-transform:scale3d(0.6, 0.6, 1);
transform:scale3d(0.6, 0.6, 1);
}
*/
.thumbnails li{
list-style:none;
display:inline-block;
margin:0 5px;
-webkit-box-shadow:0 0 10px #ccc;
-moz-box-shadow:0 0 10px #ccc;
-ms-box-shadow:0 0 10px #ccc;
-o-box-shadow:0 0 10px #ccc;
box-shadow:0 0 10px  #ccc;
-webkit-transition:-webkit-transform 60ms;
-moz-transition:-webkit-transform 60ms;
-o-transition:-webkit-transform 60ms;
-ms-transition:-webkit-transform 60ms;
transition:-webkit-transform 60ms;
}

.thumbnails li span{
display:none;
}

.thumbnails .current{
-webkit-box-shadow:0 0 10px red;
-moz-box-shadow:0 0 10px red;
-ms-box-shadow:0 0 10px red;
-o-box-shadow:0 0 10px red;
box-shadow:0 0 10px red;
}

.thumbnails .thumb-hover{
-webkit-transform:scale3d(1.3, 1.3, 1);
-moz-transform:scale3d(1.3, 1.3, 1);
-o-transform:scale3d(1.3, 1.3, 1);
-ms-transform:scale3d(1.3, 1.3, 1);
transform:scale3d(1.3, 1.3, 1);

-webkit-box-shadow:0 0 10px #666;
-moz-box-shadow:0 0 10px #666;
-ms-box-shadow:0 0 10px #666;
-o-box-shadow:0 0 10px #666;
box-shadow:0 0 10px #666;
}

.thumbanils-touch .thumb-hover{
-webkit-transform:none;
-moz-transform:none;
-o-transform:none;
-ms-transform:none;
transform:none;
}

.thumbnails .thumb-hover span{
position:absolute;
bottom:-30px;
left:0;
z-index:2;
width:100%;
height:30px;
font:bold 12px arial;
line-height:30px;
color:#666;
display:block;
cursor:default;
}

.thumbnails img{
float:left;
}

.exit-message{
position: absolute;
top:10px;
left:0;
width:100%;
height:40px;
z-index:10000;
}

.exit-message > div{
width:140px;
height:30px;
margin:auto;
background:rgba(0,0,0,0.5);
text-align:center;
font:12px arial;
line-height:30px;
color:white;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}

.zoom-icon{
position:absolute;
z-index:1000;
width:22px;
height:22px;
top:10px;
right:10px;
background-image:url(images/zoom-icons.png);
background-size:88px 22px;
}

.zoom-icon-in{
background-position:0 0;
cursor: pointer;
}

.zoom-icon-in.zoom-icon-in-hover{
background-position:-22px 0;
cursor: pointer;
}

.zoom-icon-out{
background-position:-44px 0;
}

.zoom-icon-out.zoom-icon-out-hover{
background-position:-66px 0;
cursor: pointer;
}

.bottom{
position:absolute;
left:0;
bottom:0;
width:100%;
}

#nav {
display: block;
float: left;
/*margin: 14px 0 0 24px;*/
height: 50px;
position:absolute;
left:200px;
top:0px;
}

#nav ul li {
position: relative;
padding: 1px 6px;
height: 21px;
display: block;
float: left;
z-index: 10;/*
transition: background-color .14s linear;
-o-transition: background-color .14s linear;
-moz-transition: background-color .14s linear;
-webkit-transition: background-color .14s linear;*/
}

#nav ul li.divider{
position: relative;
width: 1px;
height: 20px;
background-color: #D1D1D1;
border-right: 1px solid white;
margin: 0;
padding: 0;
z-index: 1;
border-image: initial;	
}
div.fullscreen-wrapper, div.lights-wrapper, div.audio-wrapper {
width: 117px;
height: 17px;
}
div.fullscreen a, div.fullscreen.clone a {
float: left;
margin: 0;
padding: 7px 0 0;
margin-top: 1px;
height: 17px;
width: 117px;
color: #666;
position: relative;
text-decoration: none;
text-indent: -10000em;
background-position: 0px -240px;
transition: color .4s linear;
-o-transition: color .4s linear;
-moz-transition: color .4s linear;
-webkit-transition: color .4s linear;
transition: background-color .13s linear;
-o-transition: background-color .13s linear;
-moz-transition: background-color .13s linear;
-webkit-transition: background-color .13s linear;
}
div.lights a, div.lights.clone a {
float: left;
margin: 0;
padding: 7px 0 0;
margin-top: 1px;
height: 17px;
width: 117px;
color: #666;
position: relative;
text-decoration: none;
text-indent: -10000em;
background-position: 0px -150px;
transition: color .4s linear;
-o-transition: color .4s linear;
-moz-transition: color .4s linear;
-webkit-transition: color .4s linear;
transition: background-color .13s linear;
-o-transition: background-color .13s linear;
-moz-transition: background-color .13s linear;
-webkit-transition: background-color .13s linear;
}
div.audio a, div.audio.clone a {
float: left;
margin: 0;
padding: 7px 0 0;
margin-top: 1px;
height: 17px;
width: 117px;
color: #666;
position: relative;
text-decoration: none;
text-indent: -10000em;
background-position: 0px -270px;
transition: color .4s linear;
-o-transition: color .4s linear;
-moz-transition: color .4s linear;
-webkit-transition: color .4s linear;
transition: background-color .13s linear;
-o-transition: background-color .13s linear;
-moz-transition: background-color .13s linear;
-webkit-transition: background-color .13s linear;
}
div.fullscreen a span.icon, 
.fullscreen div.fullscreen a span.icon, 
div.lights a span.icon, 
.lights div.lights a span.icon,
div.audio a span.icon, 
.audio div.audio a span.icon {
background-position: -32px -214px;
width: 25px;
height: 14px;
display: block;
position: absolute;
top: 3px;
transition: left .2s linear;
-o-transition: left .2s linear;
-moz-transition: left .2s linear;
-webkit-transition: left .2s linear;
}
#pagination-prev {
position: absolute;
z-index: 1500;
top: 50%;
left: 0;
opacity: 1;
transition: opacity .4s linear;
-o-transition: opacity .4s linear;
-moz-transition: opacity .4s linear;
-webkit-transition: opacity .4s linear;
}
#pagination-next {
position: absolute;
z-index: 1500;
top: 50%;
right: 0;
opacity: 1;
transition: opacity .4s linear;
-o-transition: opacity .4s linear;
-moz-transition: opacity .4s linear;
-webkit-transition: opacity .4s linear;
}
#pagination-prev div.arrow {
background-position: -144px -160px;
width: 42px;
height: 70px;
text-indent: -10000em;
}

#pagination-prev:hover div.arrow {
background-position: -144px -261px;
}
#pagination-prev div.arrow:disabled {
background-position: -144px -460px;
}

#pagination-next div.arrow {
background-position: -249px -160px;
width: 42px;
height: 70px;
text-indent: -10000em;
}

#pagination-next:hover div.arrow {
background-position: -249px -261px;
}

#pagination-next div.arrow:disabled {
background-position: -249px -460px;
}
.hint-x{
position:absolute;
display: block;
background-color: #FF8D29;
color:#fff;
padding: 10px;
border: 1px solid #ddd;
border-radius: 10px;
width:200px;
z-index: 100;
box-shadow: 5px 5px 10px grey;
}