body {
	margin: 0px;
}
#djvuContainer {
	position: absolute;
	width: 100%;
	height: 100%;
	text-align: center;
}

.toolbar {
	position: relative;
	display: inline-block;
	padding-top: 10px;
	z-index: 1;

	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	transition: transform 0.3s;
	-webkit-transition: -webkit-transform 0.3s;
}

.toolbarHidden {
	transform: translate(0, -100%);
	-webkit-transform: translate(0, -100%);
	-ms-transform: translate(0, -100%);
	transition: transform 1s;
	-webkit-transition: transform 1s;
}

.toolbarSquareButton {
	float: left;
	width: 40px;
	height: 40px;
	background-image: url("img/toolbar-buttons.png");
	background-repeat: no-repeat;
	background-size: 500% 300%;
}

.scrollbar {
	position: absolute;
	border-radius: 6px;
	opacity: 0.6;
	box-shadow: inset 0 0 0 1px black, inset 0 0 0 2px white, inset 0 0 0 10px #BBB;
	transition: opacity 0.3s;
	z-index: 1;
}
.scrollbar:hover {
	box-shadow: inset 0 0 0 1px black, inset 0 0 0 2px white, inset 0 0 0 10px #999;
}
.scrollbarClicked, .scrollbarClicked:hover {
	box-shadow: inset 0 0 0 1px black, inset 0 0 0 2px white, inset 0 0 0 10px #777;
}
.scrollbarHidden {
	opacity: 0;
	transition: opacity 0.6s;
}

.scrollbarVertical {
	right: 0px;
	border-right: 1px solid transparent;
	width: 13px;
}

.scrollbarHorizontal {
	bottom: 0px;
	border-bottom: 1px solid transparent;
	height: 13px;
}

.content {
	overflow: hidden;
	position: absolute;
	height: 100%;
	width: 100%;
}

.textLayer {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: scroll;
}
.textPage {
	position: relative;
	margin-top: 100vh;
	margin-bottom: 100vh;
}
.textPage div {
	position: absolute;
	width: 100%;
}
.textPage span {
	position: absolute;

	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);

	font-family: sans-serif;
	color: #000;
	color: rgba(0, 0, 0, 0);
	white-space: nowrap;
	z-index: 1;
	/* border: 1px solid red; /* for easy debug */
}

.buttonZoomIn {
	background-position: 25% 0;
}
.buttonZoomIn:hover {
	background-position: 25% 50%;
}
.buttonZoomIn:disabled {
	background-position: 25% 100%;
}

.buttonZoomOut {
	background-position: 0 0;
}
.buttonZoomOut:hover {
	background-position: 0 50%;
}
.buttonZoomOut:disabled {
	background-position: 0 100%;
}

.buttonPagePrev {
	background-position: 50% 0;
}
.buttonPagePrev:hover {
	background-position: 50% 50%;
}
.buttonPagePrev:disabled {
	background-position: 50% 100%;
}

.buttonPageNext {
	background-position: 75% 0;
}
.buttonPageNext:hover {
	background-position: 75% 50%;
}
.buttonPageNext:disabled {
	background-position: 75% 100%;
}

.toolbarItem {
	display: inline-block;
	margin: 0 10px;
}

.comboBox {
	float: left;
	position: relative;
}

.comboBoxSelection {
	width: 8.25ex;
	margin: 10px 12px 0px 12px;
}

.comboBoxText {
	width: 5ex;
	border: none;
	padding: 0px;
	outline: none;

	position: absolute;
	margin: 10px 0px 0px 12px;
	top: 2px;
	left: 3px;
}

.statusImage {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 128px;
	height: 128px;
	margin: -72px 0 0 -64px;
	background-image: url("img/status.png");
	background-repeat: no-repeat;
	z-index: 1;
}

.blankImage {
	background-image: url("img/blank.jpg");
}
.comboBox{margin: 0;position: relative;top: -10px;}
.toolbar{
    background: rgba(0,0,0,0.4);
    position: fixed;
    bottom: 20px;
    margin-left: -135px;
    height: 30px;
    border: none;
    border-radius: 3px;
}
.toolbar.toolbarHidden{display:none;}
.toolbarSquareButton {
    width: 20px;
    cursor: pointer;
    border-radius: 0px;
    background-color:#eee;
    border: none;
    height: 20px;
}
.comboBox{top: 0px;background: #fff;height: 20px;overflow: hidden;}
.comboBoxSelection {
    width: 8.25ex;height: 20px;
    -webkit-appearance: none;
    margin: 0;padding: 0;
    position: relative;top: -3px;
    background: #fff;
    padding-left: 10px;
    border: 1px solid #eee;
    border-radius: 0px;
}
.comboBoxText {display: none;}