ghooghe
6/11/2013 - 3:26 PM

Epaper styles

Epaper styles

.fullscreen {
  background-color: #e3e3e3;
	position: absolute;
	width: 100%;
	height: 100%;	
	top: 0 ;
	left: 0;
	z-index: 10;
	overflow-x: hidden;
}

.epaper {
	background-color: #ffffff;
	font-weight: normal;
	width: 58em;
	margin: 0 auto;
	height: 100%;
	position: relative;
}

.epaper.fullwidth {
	height: 82em;
	position: absolute;
}

.fullscreen .epaper img {
	z-index: auto;
}

.up, .down, .fullscreen .next, .fullscreen .previous, .close, .print, .openas, .zoom {
	background: transparent url("../img/epaper-icons.png") no-repeat left top;
	width: 34px;
	height: 34px;
	display: block;
	text-indent: -9999px;
}

.up, .down, .fullscreen .next, .fullscreen .previous, .tools {
	position: fixed;
	z-index: 3;
}

.close, .print, .openas, .zoom {
	margin: 8px auto;
}

.tools {
	height: 100%; 
	width: 60px;
	top: 0;
	padding-top: 8px;
	box-shadow: 0 0 3px #444444;
	background-color: #141414;
}

.up, .down {
	left: 50%;
}

.up {
	background-position: -120px 0;
	top: 25px;
}
.up:hover {
	background-position: -120px -40px;
}
.up:active {
	background-position: -120px -80px;
}

.down {
	background-position: -40px 0;
	bottom: 25px;
}
.down:hover {
	background-position: -40px -40px;
}
.down:active {
	background-position: -40px -80px;
}

.fullscreen .previous, .fullscreen .next {
	top: 40%;
}

.fullscreen .next, .fullscreen .previous {
	left: 12px;	
}

.fullscreen .next {
	background-position: -80px 0;
	top: 50%;
}
.fullscreen .next:hover {
	background-position: -80px -40px;
}
.fullscreen .next:active {
	background-position: -80px -80px;
}
.fullscreen .previous:hover {
	background-position: 0px -40px;
}
.fullscreen .previous:active {
	background-position: 0px -80px;
}

.close {
	background-position: -320px 0;
}
.close:hover {
	background-position: -320px -40px;
}
.close:active {
	background-position: -320px -80px;
}

.openas {
	background-position: -360px 0;
}
.openas:hover {
	background-position: -360px -40px;
}
.openas:active {
	background-position: -360px -80px;
}

.zoom {
	background-position: -240px 0;
}
.zoom:hover {
	background-position: -240px -40px;
}
.zoom:active, .zoom.active {
	background-position: -240px -80px;
}

.print {
	background-position: -160px 0;
}
.print:hover {
	background-position: -160px -40px;
}
.print:active {
	background-position: -160px -80px;
}