@font-face {
  font-family: 'epub-fontello';
  src: url('../font/epub-fontello.eot?67372720');
  src: url('../font/epub-fontello.eot?67372720#iefix') format('embedded-opentype'),
       url('../font/epub-fontello.woff2?67372720') format('woff2'),
       url('../font/epub-fontello.woff?67372720') format('woff'),
       url('../font/epub-fontello.ttf?67372720') format('truetype'),
       url('../font/epub-fontello.svg?67372720#epub-fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'epub-fontello';
    src: url('../font/epub-fontello.svg?67372720#epub-fontello') format('svg');
  }
}
*/
 


body {
	background: #4e4e4e;
	overflow: hidden;
	height:100%;
}
html { height: 100%; }

/*
*, *:before, *:after {
	box-sizing: border-box;
}
*/

.flex {
	box-sizing: border-box;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
}

.flex.start { /* browser default */
	-webkit-box-pack: start;
	-webkit-justify-content: flex-start;
					justify-content: flex-start;
}
.flex.center {
	-webkit-box-pack: center;
	-webkit-justify-content: center;
					justify-content: center;
}
.flex.end {
	-webkit-box-pack: end;
	-webkit-justify-content: flex-end;
					justify-content: flex-end;
}
.flex.spaced {
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
					justify-content: space-between;
}
.flex.stretch {
	/* browser default */
	-webkit-box-align: stretch;
	-webkit-align-items: stretch;
					align-items: stretch;
}
.flex.top {
	-webkit-box-align: start;
	-webkit-align-items: flex-start;
					align-items: flex-start;
}
.flex.middle {
	-webkit-box-align: center;
	-webkit-align-items: center;
					align-items: center;
}
.flex.bottom {
	-webkit-box-align: end;
	-webkit-align-items: flex-end;
					align-items: flex-end;
}
.flex.baseline {
	-webkit-box-align: baseline;
	-webkit-align-items: baseline;
					align-items: baseline;
}
.flex.vertical {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
					flex-direction: column;
}
.flex.horizontal { /*browser default*/
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
					flex-direction: row;
	
}
.flex.nowrap {
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
}
.flex.wrap {
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
.flex .flex-grow {
	/*
useful for sticky footers:
	<div class="flex vertical">
		<header>...
		<div class="flex-grow">...
		<footer>...
	</div>

useful for double sidebars:
	<div class="flex">
	<nav id="leftside">...
	<div id="main" class="flex-grow">...
	<nav id="rightside">...
*/
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	flex: 1;
}
.col,.cell {
	-webkit-box-flex: 0;
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;	
}

#main {
	position: absolute;
	width: 100%;
	height: 100%;
	max-height:100%;
	right: 0;
 
	xborder-radius: 5px;
	background: #fff;
	overflow: hidden;
	-webkit-transition: -webkit-transform .4s, width .2s;
	-moz-transition: -webkit-transform .4s, width .2s;
	-ms-transition: -webkit-transform .4s, width .2s;

	-moz-box-shadow:    inset 0 0 50px rgba(0,0,0,.1);
	-webkit-box-shadow: inset 0 0 50px rgba(0,0,0,.1);
	-ms-box-shadow:     inset 0 0 50px rgba(0,0,0,.1);
	box-shadow:         inset 0 0 50px rgba(0,0,0,.1);
}
#_main {
	height:100%;
	position: relative;
}

#_main * {
	box-sizing: border-box;
}


#titlebar {
	/* margin: 0 50px 0 50px; */
	position: relative;
	color: #4f4f4f;
	font-weight: 100;
	font-family: Georgia, "Times New Roman", Times, serif;
	opacity: .5;
	text-align: center;
	-webkit-transition: opacity .5s;
	-moz-transition: opacity .5s;
	-ms-transition: opacity .5s;
	z-index: 10;
	min-height: 1.7em;
	/*line-height: 1.5em;*/
	font-size:1.3em;
}

#titlebar:hover {
	opacity: 1;
}

#titlebar a {
	width: 1.5em;
	overflow: hidden;
	display: inline-block;
	opacity: .5;
	padding: 0.2em 0.1em;
	border-radius: 4px;
	cursor: pointer;
	vertical-align:middle;
	white-space: nowrap;
	border:1px solid rgba(0,0,0,0);
}

#titlebar a::before {
	visibility: visible;
}

#titlebar a:hover {
	opacity: .8;
	border: 1px solid rgba(0,0,0,.2) ;
}

#titlebar a:active {
	opacity: 1;
	color: rgba(0,0,0,.6);
	/* margin: 1px -1px -1px 1px; */
	-moz-box-shadow:    inset 0 0 6px rgba(155,155,155,.8);
	-webkit-box-shadow: inset 0 0 6px rgba(155,155,155,.8);
	-ms-box-shadow: inset 0 0 6px rgba(155,155,155,.8);
	box-shadow: inset 0 0 6px rgba(155,155,155,.8);
}

#sidebar-buttons a, #titlebar a, .arrow {  
	-webkit-touch-callout: none; /* iOS Safari */
		-webkit-user-select: none; /* Chrome/Safari/Opera */
		 -khtml-user-select: none; /* Konqueror */
			 -moz-user-select: none; /* Firefox */
				-ms-user-select: none; /* Internet Explorer/Edge */
						user-select: none; 
	cursor: pointer;
}



#titlebar #opener {
	float: left;
}

#titlebar #metainfo {
	font-size:0.8em;
}


#titlebar #metainfo {
	display: inline-block;
	text-align: center;
	max-width: 80%;
}
#titlebar #metainfo #book-title {
	font-weight: bold;
	white-space : nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

#titlebar #metainfo #title-seperator {
	display: none;
}




#viewer-container {
	width: 80%;
	height: 95%;
	position: relative;
	margin: 0 auto;
	max-width: 1250px;
	z-index: 2;
	border:1px solid rgba(0,0,0,0.1);
	border-radius: 3px;
	padding: 1em 1em;
	-moz-box-shadow: 3px 3px 3px rgba(0,0,0,.4);
	-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,.4);
	-ms-box-shadow: 3px 3px 3px rgba(0,0,0,.4);
	box-shadow: 3px 3px 3px rgba(0,0,0,.4);
}
#viewer {
	width: 100%;
	height: 100%;
	/* margin-left: 10%; */
	position: relative;
	overflow: hidden;
}

#viewer-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1000;
}


#viewer iframe {
	border: none;
}

#prev {
	float:left;
}

#next {
	float:right;
}

.arrow {
	font-size: 64px;
	color: #E2E2E2;
	font-family: arial, sans-serif;
	font-weight: bold;
	cursor: pointer !important;
	width:9%;
	height:95%;
	display:table;
	text-align: center;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.arrow>span {
	display: table-cell;
	vertical-align: middle;

}

.arrow:hover {
	color: #777;
}

.arrow:active,
.arrow.active {
	color: #000;
}


#main.closed {
	/* left: 300px; */
	/*-webkit-transform: translate(300px, 0);
	-moz-transform: translate(300px, 0);
	-ms-transform: translate(300px, 0);*/
}

#main.single {
	width: 75%;
}

#main.single #viewer {
	/* width: 60%;
	margin-left: 20%; */
}





#sidebar {
	background: #6b6b6b;
	position: absolute;
	left: -350px;
	-webkit-transform: translate(-350px, 0);
	-moz-transform: translate(-350px, 0);
	top: 0;
	width: 300px;
	height: 100%;
	max-height: 100%;
	z-index: 10;

	-webkit-transition: -webkit-transform .5s;
	-moz-transition: -moz-transform .5s;
	-ms-transition: -moz-transform .5s;

	-webkit-box-shadow: 10px 10px 5px -2px rgba(0,0,0,0.4);
	-moz-box-shadow: 10px 10px 5px -2px rgba(0,0,0,0.4);
	box-shadow: 10px 10px 5px -2px rgba(0,0,0,0.4);
}
#sidebar,#sidebar * {
	box-sizing:border-box;
}

#sidebar.open {
	left: 0;
	-webkit-transform: translate(0, 0);
	-moz-transform: translate(0, 0); 
}

#sidebar-buttons {
	width:100%;
	background: #4e4e4e;
	padding: 0.2em 0.5em 0 0.5em;
	font-size:1.3em;
	line-height: 1.3em;
	min-height: 1.5em;
	/*-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.6);
	-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.6);
	-ms-box-shadow: 0px 1px 3px rgba(0,0,0,.6);
	box-shadow: 0px 1px 3px rgba(0,0,0,.6);*/
}

#sidebar-buttons a {
	width:1.6em;
	padding: 0. 0.1em;
	display: inline-block;
	color: #aaa;
	white-space: nowrap;
	border:1px solid rgba(0,0,0,0);
	border-radius: 4px;
	cursor: pointer;
}

#sidebar-buttons a:hover {
	color: #ccc;
	border:1px solid #aaa;
	border-radius: 4px;
}


#sidebar-buttons a.active {
	color: white;
	background-color: #6b6b6b;
	border: 1px solid #888;
	border-bottom: 1px solid #6b6b6b;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

#sidebar-closer {
	color:white;
	float:right;
}


.sidebar-panel {
	width: 100%;
	min-height: 100%;
	display: none;
	overflow-y: scroll;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
					flex: 1;
			}

#searchBox {
	width: 165px;
	float: left;
	margin-left: 10px;
	margin-top: -1px;
	/*
	border-radius: 5px;
	background: #9b9b9b;
	float: left;
	margin-left: 5px;
	margin-top: -5px;
	padding: 3px 10px;
	color: #000;
	border: none;
	outline: none; */

}

input::-webkit-input-placeholder {
		color: #454545;
}
input:-moz-placeholder {
		color: #454545;
}
input:-ms-placeholder {
		color: #454545;
}

#divider {
	position: absolute;
	width: 1px;
	border-right: 1px #000 solid;
	height: 95%;
	z-index: 1;
	left: 50%;
	margin-left: -1px;
	top: 0;
	opacity: .15;
	box-shadow: -2px 0 15px rgba(0, 0, 0, 1);
	display: none;
}

#divider.show {
	display: block;
}

#loader {
	position: absolute;
	z-index: 10;
	left: 50%;
	top: 50%;
	margin: -33px 0 0 -33px;
}

#tocView,
#bookmarksView {
	visibility: hidden;
	-webkit-transition: visibility 0 ease .5s;
	-moz-transition: visibility 0 ease .5s;
	-ms-transition: visibility 0 ease .5s;*/
}



#sidebar.open #tocView,
#sidebar.open #bookmarksView {
	visibility: visible;
	-webkit-transition: visibility 0 ease 0;
	-moz-transition: visibility 0 ease 0;
	-ms-transition: visibility 0 ease 0;
}

#sidebar.open #tocView {
	display: block;
}

#tocView > ul,
#bookmarksView > ul {
	margin-top: 15px;
	margin-bottom: 50px;
	padding-left: 20px;
	display: block;
}

#tocView li,
#bookmarksView li {
	margin-bottom:10px;
	width: 225px;
	font-family: Georgia, "Times New Roman", Times, serif;
	list-style: none;
	text-transform: capitalize;
}

#tocView li:active,
#tocView li.currentChapter
{
	list-style: none;
}

.list_item a {
	color: #AAA;
	text-decoration: none;
}

.list_item a.chapter {
	font-size: 1em;
}

.list_item a.section {
	font-size: .8em;
}

.list_item.currentChapter > a,
.list_item a:hover {
	color: #f1f1f1
}

/* #tocView li.openChapter > a, */
.list_item a:hover {
	color: #E2E2E2;
}

.list_item ul {
	padding-left:10px;
	margin-top: 8px;
	display: none;
}

.list_item.currentChapter > ul,
.list_item.openChapter > ul {
	display: block;
}

#tocView.hidden {
	display: none;
}

.toc_toggle {
	display: inline-block;
	width: 14px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.toc_toggle:before {
	content: '▸';
	color: #fff;
	margin-right: -4px;
}

.currentChapter > .toc_toggle:before,
.openChapter > .toc_toggle:before {
	content: '▾';
}

#searchResults {
	margin-bottom: 50px;
	padding-left: 20px;
	display: block;
}

#searchResults li {
	margin-bottom:10px;
	width: 225px;
	font-family: Georgia, "Times New Roman", Times, serif;
	list-style: none;
}

#searchResults a {
	color: #AAA;
	text-decoration: none;
}

#searchResults p {
	text-decoration: none;
	font-size: 12px;
	line-height: 16px;
}

#searchResults p .match {
	background: #ccc;
	color: #000;
}

#searchResults li > p {
	color: #AAA;
}

#searchResults li a:hover {
	color: #E2E2E2;
}

#searchView.shown {
	display: block;
	overflow-y: scroll;
}

#notes {
 padding: 0 0 0 34px;
}

#notes li {
	color: #eee;
	font-size: 12px;
	width: 240px;
	border-top: 1px #fff solid;
	padding-top: 6px;
	margin-bottom: 6px;
}

#notes li a {
	color: #fff;
	display: inline-block;
	margin-left: 6px;
}

#notes li a:hover {
	text-decoration: underline;
}

#notes li img {
	max-width: 240px;
}

#note-text {
	display: block;
	width: 260px;
	height: 80px;
	margin: 0 auto;
	padding: 5px;
	border-radius: 5px;
}

#note-text[disabled], #note-text[disabled="disabled"]{
		opacity: .5;
}

#note-anchor {
	margin-left: 218px;
	margin-top: 5px;
}


.highlight { background-color: yellow }



@media only screen and (max-width: 1040px) {
	#viewer-container{
		width: 50%;
		margin-left: 25%;
	}

	#divider,
	#divider.show {
		display: none;
	}
}

@media only screen and (max-width: 900px) {
	#viewer-container{
		width: 60%;
		margin-left: 20%;
	}

}

@media only screen and (max-width: 760px) {
	#viewer-container{
		width: 76%;
		margin-left: 12%;
	}

}


@media only screen and (max-width: 550px) {
	#viewer-container{
		width: 86%;
		margin-left: 7%;
		padding: 0.5em 0.5em;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	-ms-box-shadow: none;
	box-shadow: none;
	}
	.arrow {
		width: 5.999%;
		font-size: 48px;
	}

	#sidebar {
		width: 200px;
	}

	#titlebar #metainfo { 
		font-size: 0.55em; 
		-webkit-box-ordinal-group: 101; /* move to end */
		-webkit-order: 100;
		order: 100;
	}
	#metainfo #title-seperator,#metainfo #chapter-title {
		display: none !important;
	}

	#tocView {
		max-width: 260px;
	}

	#tocView li {
		font-size: 12px;
	}

	#tocView > ul{
		padding-left: 10px;
	}
}


/* For iPad portrait layouts only */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait) {
		/*#viewer iframe {
				width: 460px;
				height: 740px;
		}*/
}
 /*For iPad landscape layouts only */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) {
		/*#viewer iframe {
				width: 460px;
				height: 415px;
		}*/
}
/* For iPhone portrait layouts only */
@media only screen and (max-device-width: 480px) and (orientation: portrait) {
		/*#viewer {
			width: 256px;
			height: 432px;
		}
		#viewer iframe {
			 width: 256px;
			 height: 432px;
		}*/
}
/* For iPhone landscape layouts only */
@media only screen and (max-device-width: 480px) and (orientation: landscape) {
		/*#viewer iframe {
				width: 256px;
				height: 124px;
		}*/
}


 
[class^="icon-"]:before, [class*=" icon-"]:before {
	font-family: "epub-fontello";
	font-style: normal;
	font-weight: normal;
	speak: none;
 
	display: inline-block;
	text-decoration: inherit;
	width: 1em;
	margin-right: .2em;
	text-align: center;
	/* opacity: .8; */
 
	/* For safety - reset parent styles, that can break glyph codes*/
	font-variant: normal;
	text-transform: none;
 
	/* fix buttons height, for twitter bootstrap */
	line-height: 1em;
 
	/* Animation center compensation - margins should be symmetric */
	/* remove if not needed */
	margin-left: .2em;
 
	/* you can be more comfortable with increased icons size */
	/* font-size: 120%; */
 
	/* Font smoothing. That was taken from TWBS */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
 
	/* Uncomment for 3D effect */
	/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "epub-fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
 
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.icon-cancel:before { content: '\e800'; } /* '' */
.icon-cog:before { content: '\e801'; } /* '' */
.icon-book:before { content: '\e802'; } /* '' */
.icon-cancel-circled2:before { content: '\e803'; } /* '' */
.icon-font-down:before { content: '\e804'; } /* '' */
.icon-font-up:before { content: '\e805'; } /* '' */
.icon-pencil-alt:before { content: '\e806'; } /* '' */
.icon-left-open:before { content: '\e807'; } /* '' */
.icon-right-open:before { content: '\e808'; } /* '' */
.icon-flight:before { content: '\e80a'; } /* '' */
.icon-search:before { content: '\e80b'; } /* '' */
.icon-resize-full:before { content: '\e80c'; } /* '' */
.icon-resize-small:before { content: '\e80d'; } /* '' */
.icon-list:before { content: '\e80e'; } /* '' */
.icon-bookmark:before { content: '\e80f'; } /* '' */
.icon-pencil:before { content: '\e810'; } /* '' */
.icon-edit:before { content: '\e811'; } /* '' */
.icon-link-ext:before { content: '\f08e'; } /* '' */
.icon-bookmark-empty:before { content: '\f097'; } /* '' */
.icon-menu:before { content: '\f0c9'; } /* '' */
.icon-list-bullet:before { content: '\f0ca'; } /* '' */
.icon-doc-text:before { content: '\f0f6'; } /* '' */
.icon-angle-left:before { content: '\f104'; } /* '' */
.icon-angle-right:before { content: '\f105'; } /* '' */
.icon-quote-right:before { content: '\f10e'; } /* '' */
.icon-angle-circled-left:before { content: '\f137'; } /* '' */
.icon-angle-circled-right:before { content: '\f138'; } /* '' */
.icon-link-ext-alt:before { content: '\f14c'; } /* '' */
.icon-left:before { content: '\f177'; } /* '' */
.icon-sliders:before { content: '\f1de'; } /* '' */
.icon-brush:before { content: '\f1fc'; } /* '' */