body, div, p, li {
font-family: 'Josefin Sans', sans-serif;
}

body, html{
    overflow: hidden;
    position: relative;
    height: 100%;
}


body { 
  background: url(media/background.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin: 0px;
  text-align: center;

}

#loading{
	position: absolute;
	height: 150px;
	width: 150px;

	top: 50%;
	margin-top: -75px;
	left: 50%;
	margin-left: -75px;
	display: none;
	z-index: 1;
}

#loading img{
	height: 100%;
}

#sidebar {
	display: none;
	position: absolute;
	bottom: 0px;
	left: 0px;
    margin: 0;
    padding: 0;
    width: 100%;
	background-color: #231a23;
	height: 155px;
	box-sizing: border-box;
	z-index: 1000;
}

#carousel{
	position: absolute;

	width: 100%;
	height: 100%;
	padding: 10px;
	padding-top: 25px;
	box-sizing: border-box;
	overflow-x: auto;
	overflow-y: hidden;
    white-space: nowrap;	
}

#sidebar p {
 color: lightgrey;
 font-size: 11pt;

}

#sidebar form {
 padding: 10pt;
}

input[type=text] {
	height: 30px;
	color: #555;
	padding: 0 5px;
	font-size: 1.1em;
	box-sizing: border-box;
	width: 100%;
	border-radius: 8px;
	width: 100%;
}

input[type=submit] {
 width: 30%;
 border: 0px;
 border-radius: 3px;
 font-size: 10pt;
 padding: 8px;
 background-color: lightgrey;
 float: right;
}

#imageResults {
	height: 100%;
}

#messageWindow {
 width: 40%;
 min-width: 300px;
 background-color: white;
 position: relative;
 margin-left: auto;
 margin-right: auto;
 margin-top: 140px;
 padding: 30px; 
 border-radius: 5px;
 opacity: 0.9;
 display: none;
}

#messageText img {
  width: 180px;
  border-radius: 90px;
  
}

#messageImageFrame {
 text-align: center;
 padding: 30px;
}

#messageLink {
 text-align: center;
 padding-top: 20px;
}

#messageLink a {
  text-decoration: none;
  font-size: 12pt;
}

#hiddenMessage {
 display: none;

}

.chapterCard {
	display: inline-block;
	position: absolute;
	top: 24px;
}

.chapterCard h2{
 color: white;
 margin: 0px;
 font-weight: normal;
 font-size: 14pt;
 margin-left: 5px;
 position: absolute;
 bottom: 0px;
}

.imagePreview {
	cursor: hand;
	display: inline;
	height: 100%;
	margin: 0 5px;
}

.imagePreview img{
	opacity: 0.5;
    -webkit-transition: opacity 0.5s; /* Safari */
    transition: opacity 0.5s;
	
}

.imagePreview img:hover{
	opacity: 1!important;
}

.imagePreview img{
	height: 100%;
}

#mainImageCont{
	height: 100%;
	width: 100%;
	padding-top: 90px; /*height of yiangou logo + header padding*/
	padding-bottom: 155px; /*height of sidebar*/
	box-sizing: border-box;
	display: none;
	text-align: center;
	overflow: hidden;
	/*cursor: zoom-in;*/
}


#mainImage {
	max-width: 100%;
	max-height: 100%;
	display: none;
}

#mainImage2{
	position: relative;
	width: 100%;
	height: 100%;
	background-size: contain;
	background-position: top center;
	background-repeat: no-repeat;
	z-index: 1;
}


.activeZoom{
	cursor: zoom-out!important;
}

#mainImage:hover{
	cursor: url('/images/zoom.cur'), auto;
}

#header{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	text-align: center;
	background: #c6c9cf;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to top, #D7DDE8, #c6c9cf);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to top, #D7DDE8, #c6c9cf); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	padding: 15px 0;
	z-index: 1000;
}

#header img {
  height: 60px;
}


#imageIdCont {
position: absolute;
top: -25px;
right: 20px;
background-color: #231a23;
color: white;
font-size: 10pt;
padding: 5px;
display: none;
z-index: 1000;
height: 15px;
cursor: pointer;
}

.imageId{
	display: inline;
}

#previousArrow {
 position: fixed;
 top: 0px;
 right: 80px;
 display: none;
 background-color: grey;
 padding: 5px;
 z-index: 1001;
}

#previousArrow A{
 color: white;
 text-decoration: none;
}

#nextArrow {
 position: fixed;
 top: 0px;
 right: 20px;
 display: none;
 background-color: grey;
 padding: 5px;
 z-index: 1001; 
}

#chapters{
    position: fixed;
    top: 120px;
    right: 20px;
    display: none;
    background-color: grey;
    padding: 5px;
}


#nextArrow A{
 color: white;
 text-decoration: none;
}

#accessCode{
	padding-top: 150px;
	width: 180px;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
}

#loader{
	display:none;
}

.zoom{
	transition: all .1s;
	transition-timing-function: linear;
}

/*Fancybox*/
/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp{padding:0;margin:0;border:0;outline:none;vertical-align:top;}
.fancybox-wrap{position:absolute;top:0;left:0;z-index:8020;}
.fancybox-skin{position:relative;background:#000;color:#444;text-shadow:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.fancybox-opened{z-index:8030;}
.fancybox-opened .fancybox-skin{-webkit-box-shadow:0 10px 25px rgba(0,0,0,0.5);-moz-box-shadow:0 10px 25px rgba(0,0,0,0.5);box-shadow:0 10px 25px rgba(0,0,0,0.5);}
.fancybox-outer,.fancybox-inner{position:relative;}
.fancybox-inner{overflow:hidden;}
.fancybox-type-iframe .fancybox-inner{-webkit-overflow-scrolling:touch;}
.fancybox-error{color:#444;font:14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;margin:0;padding:15px;white-space:nowrap;}
.fancybox-image,.fancybox-iframe{display:block;width:100%;height:100%;}
.fancybox-image{max-width:100%;max-height:100%;}
#fancybox-loading,.fancybox-close,.fancybox-prev span,.fancybox-next span{background-image:url('/images/fancybox_sprite.png');}
#fancybox-loading{position:fixed;top:50%;left:50%;margin-top:-22px;margin-left:-22px;background-position:0 -108px;opacity:0.8;cursor:pointer;z-index:8060;}
#fancybox-loading div{width:44px;height:44px;background:url('/images/fancybox_loading.gif') center center no-repeat;}
.fancybox-close{position:absolute;top:-18px;right:-18px;width:36px;height:36px;cursor:pointer;z-index:8040;}
.fancybox-nav{position:absolute;top:0;width:40%;height:100%;cursor:pointer;text-decoration:none;background:transparent url('/images/blank.gif');/* helps IE */
-webkit-tap-highlight-color:rgba(0,0,0,0);z-index:8040;}
.fancybox-prev{left:0;}
.fancybox-next{right:0;}
.fancybox-nav span{position:absolute;top:50%;width:36px;height:34px;margin-top:-18px;cursor:pointer;z-index:8040;visibility:hidden;}
.fancybox-prev span{left:10px;background-position:0 -36px;}
.fancybox-next span{right:10px;background-position:0 -72px;}
.fancybox-nav:hover span{visibility:visible;}
.fancybox-tmp{position:absolute;top:-99999px;left:-99999px;visibility:hidden;max-width:99999px;max-height:99999px;overflow:visible !important;}
/* Overlay helper */
.fancybox-lock{overflow:hidden !important;width:auto;}
.fancybox-lock body{overflow:hidden !important;}
.fancybox-lock-test{overflow-y:hidden !important;}
.fancybox-overlay{position:absolute;top:0;left:0;overflow:hidden;display:none;z-index:8010;background:url('/images/fancybox_overlay.png');opacity:1!important; background-color: rgba(0,0,0,0.6);}
.fancybox-overlay-fixed{position:fixed;bottom:0;right:0;}
.fancybox-lock .fancybox-overlay{overflow:auto;overflow-y:scroll;}
/* Title helper */
.fancybox-title{visibility:hidden;font:normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;position:relative;text-shadow:none;z-index:8050;}
.fancybox-opened .fancybox-title{visibility:visible;}
.fancybox-title-float-wrap{position:absolute;bottom:0;right:50%;margin-bottom:-35px;z-index:8050;text-align:center;}
.fancybox-title-float-wrap .child{display:inline-block;margin-right:-100%;padding:2px 20px;background:transparent;/* Fallback for web browsers that doesn't support RGBa */
background:rgba(0,0,0,0.8);-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;text-shadow:0 1px 2px #222;color:#FFF;font-weight:bold;line-height:24px;white-space:nowrap;}
.fancybox-title-outside-wrap{position:relative;margin-top:10px;color:#fff;}
.fancybox-title-inside-wrap{padding-top:10px;}
.fancybox-title-over-wrap{position:absolute;bottom:0;left:0;color:#fff;padding:10px;background:#000;background:rgba(0,0,0,.8);}
/*Retina graphics!*/
@media only screen and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min--moz-device-pixel-ratio:1.5),
only screen and (min-device-pixel-ratio:1.5){#fancybox-loading,.fancybox-close,.fancybox-prev span,.fancybox-next span{background-image:url('/images/fancybox_sprite@2x.png');background-size:44px 152px;/*The size of the normal image,half the size of the hi-res image*/}
#fancybox-loading div{background-image:url('/images/fancybox_loading@2x.gif');background-size:24px 24px;/*The size of the normal image,half the size of the hi-res image*/}
}

#container{
	height: 100%;
	width: 100%;
}

@media (max-width:750px){
	#header img{
		height: 30px;
	}
	#mainImageCont{
		padding-top: 60px;
	}
	
	#messageImageFrame{
		display: inline;
		width: auto;
		float: right;
		margin-left: 10px;
		padding: 0px;
	}
	
	#messageImageFrame img{
		width: 100px;
		border-radius: 50px;
	}
	
	#messageText{
		text-align: justify;
	}
	
	#nextArrow, #previousArrow{
		display: none!important;
	}
	
	#sidebar{
		height: 100px;
	}
	
	
}