div#flipbook-view-nav-prev-page {
	position: absolute; 
	top: 0px; 
	left: 0px; 
	background: #777777;
	width: 15%;
	height: 100%;
	opacity: 0.0;
}

div#flipbook-view-nav-next-page {
	position: absolute;
	top: 0px;
	right: 0px;
	background: #777777;
	width: 15%;
	height: 100%;
	opacity: 0.0;
}

div#flipbook-view-nav-prev-page:hover,
div#flipbook-view-nav-next-page:hover {
	opacity: 0.1;
	box-shadow: 0px 0px 20px 20px #777777;
	cursor: pointer;
}

div#flipbook-view-background {
	display: none;
	background-color: black;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	z-index: 100;
	opacity: 0.9;
}
	
div#flipbook-view-background.fade-in {
	animation: fade-in-ninety 1s;
}

div#flipbook-view-wrapper {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 200;
	width: 100%;
	height: 100%;
}

div#flipbook-view-wrapper.fade-in {
  animation: fade-in-full 1s;
}

div#flipbook-view-background.fade-out,
div#flipbook-view-wrapper.fade-out {
  animation: fade-out 0.5s;
}

@keyframes fade-in-ninety {
  0% { opacity: 0; }
  100% { opacity: 0.9; }
}

@keyframes fade-in-full {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fade-out {
	100% { opacity: 0.0; }
}

div#flipbook-view-close {
	position: absolute;
	width: 2em;
	height: 2em;
	top: 1em;
	right: 1em;
	cursor: pointer;
}

div#flipbook-view-close svg {
	stroke: #dddddd;
	fill: #dddddd;
}

div#flipbook-view-container {
	margin: auto auto;
	margin-top: 5%;
	width: 80%;
	height: 80%;
	position: relative;
	z-index: 500;
}

div#flipbook-app canvas {
	box-sizing: border-box;
	border: thin solid silver;
}

div#flipbook-view-toolbar {
	color: #999999;
	background-color: #1c1c1c;
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: 3em;
	text-align: center;
}

div#flipbook-view-toolbar .flipbook-view-button-wrapper {
	display: inline-block;
}

div#flipbook-view-toolbar .page-info {
	float: left;
	height: 2em;
	margin-top: 0.8em;
	text-align: center;
	width: 10em;
}

div#flipbook-view-toolbar .flipbook-button {
	box-sizing: border-box;
	height: 2em;
	margin: 0.5em;
	margin-left: 1em;
	margin-right: 1em;
	float: left;
}

div#flipbook-view-toolbar .flipbook-button svg {
	stroke: #999999;
	fill: #999999;
	padding-top: 10%;
	height: 80%;
}

div#flipbook-view-toolbar .flipbook-button:hover svg {
	filter: brightness(150%) drop-shadow(0px 0px 3px white);
}

div#flipbook-view-toolbar .flipbook-button:active svg {
	filter: brightness(200%);
}