@charset "utf-8";

/*------------------------------------------
common div blocks Cascading Style Sheets
------------------------------------------*/

/*---------------------
wrapper block
---------------------*/
.block-wrapper {
  margin:0 auto;
  width:100%;
  height:100%;
  /*background:url(../img/color-white50.png);*/  

}

/*---------------------
contents
---------------------*/
#block-container,
#frontcover-container,
#backcover-container{
	width:100%;
	height:800px;
	background: url(../img/volumen/bg.png)repeat-x;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
#block-container{
	z-index:2;
	visibility:hidden;
}

#frontcover-container{
	z-index:10;
	visibility:visible;
}

#backcover-container{
	z-index:1;
	visibility:hidden;
}

#block-container:before,
#frontcover-container:before,
#backcover-container:before{
	content:" ";
	display:block;
	background:url(../img/before-bg.png) repeat-x;
	width:100%;
	height:20px;
	position:absolute;
	top:0px;
}
#block-container:after,
#frontcover-container:after,
#backcover-container:after{
	content:" ";
	background:url(../img/after-bg.png) repeat-x;
	width:100%;
	height:20px;
	position:absolute;
	bottom:0px;
}
/*---------------------
book main
---------------------*/
#pagecontent,
#pagecontent-bookmark{
	width:1100px;
	height:750px;
	margin:-375px auto auto -550px;
	position:absolute;
	top:50%;
	left:50%;
}

#rightpagecontent{
	width:550px;
	height:700px;
	float:right;
	position:relative;
	background:url(../img/volumen/pageright.png) no-repeat;
}

#leftpagecontent{
	width:550px;
	height:700px;
	float:right;
	position:relative;
	background:url(../img/volumen/pageleft.png) no-repeat;
}

#prevbtn{
	display:block;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	position:absolute;
	bottom:50px;
	right:50px;
	width:100px;
	height:100px;
}

#prevbtn:hover{
	background:url(../img/volumen/prevbtn.png) no-repeat;
}

#nextbtn{
	display:block;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	position:absolute;
	bottom:50px;
	left:50px;
	width:100px;
	height:100px;
}

#nextbtn:hover{
	background:url(../img/volumen/nextbtn.png) no-repeat;
}

#right-page-number{
	position:absolute;
	bottom:60px;
	right:300px;
	color:#000;
	font-weight:bold;
}

#left-page-number{
	position:absolute;
	bottom:60px;
	left:300px;
	color:#000;
	font-weight:bold;
}
/*---------------------
front
---------------------*/
#frontcover,
#frontcover-bookmark,
#backcover,
#backcover-bookmark{
	width:1100px;
	height:750px;
	margin:-375px auto auto -550px;
	position:absolute;
	top:50%;
	left:50%;
}

#frontcoverbtn{
	float:left;
	display:block;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	width:600px;
	height:750px;
	background:url(../img/volumen/frontbtn.png) no-repeat;
}

#frontcoverbtn:hover{
	background:url(../img/volumen/frontbtn2.png) no-repeat;
}

.backindex{
	display:block;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	float:right;
	width:200px;
	height:100px;
	background:url(../img/menu-logo.png) no-repeat;
	-webkit-transition: 0.2s linear;
       -moz-transition: 0.2s linear;
         -o-transition: 0.2s linear;
		-ms-transition: 0.2s linear;
            transition: 0.2s linear;
}
.backindex:hover{
	margin:0 30px 0 0;
}

#frontcover h1{
	display:block;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	float:right;
	width:300px;
	height:150px;
	position:absolute;
	right:100px;
	top:200px;
	background:url(../img/title-volumen.png) no-repeat;
}
/*---------------------
back
---------------------*/
#backcoverbtn{
	float:right;
	display:block;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	width:600px;
	height:750px;
	background:url(../img/volumen/backbtn.png) no-repeat;
}
#backcoverbtn:hover{
	background:url(../img/volumen/backbtn2.png) no-repeat;
}
/*---------------------
footer
---------------------*/
#footer-block{
	width:100%;
	height:30px;
	position:fixed;
	bottom:0;
	background:url(../img/color-white50.png);
	color:#000;
	padding:0 20px;
}

#footer-block p .backsite{
	display:block;
	width:150px;
	height:30px;
	position:absolute;
	top:0;
	right:50px;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	background:url(../img/footer-icon.png) no-repeat;
	opacity:0.8;
}
#footer-block p .backsite:hover{
	opacity:1;
}

#footer-block p .footer-backindex{
	display:block;
	width:56px;
	height:30px;
	position:absolute;
	top:0;
	right:200px;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	background:url(../img/footer-logo.png) no-repeat;
	opacity:0.8;
}
#footer-block p .footer-backindex:hover{
	opacity:1;
}

/*---------------------
bookmark
---------------------*/
.bookmark{
	width:63px;
	height:170px;
	position: absolute;
	top: -70px;
}
.bookmark:hover{
	top: -80px;
}
#pagecontent-bookmark .bookmark{
	top: -80px;
}
#pagecontent-bookmark .bookmark:hover{
	top: -90px;
}

.leftboolmark1{
	left:80px;
	background:url(../img/volumen/bookmark1.png) no-repeat;
}
.leftboolmark2{
	left:160px;
	background:url(../img/volumen/bookmark2.png) no-repeat;
}
.leftboolmark3{
	left:240px;
	background:url(../img/volumen/bookmark3.png) no-repeat;
}
.leftboolmark4{
	left:320px;
	background:url(../img/volumen/bookmark4.png) no-repeat;
}
.leftboolmark5{
	left:400px;
	background:url(../img/volumen/bookmark5.png) no-repeat;
}
.leftboolmark6{
	left:480px;
	background:url(../img/volumen/bookmark0.png) no-repeat;
}

.rightboolmark1{
	right:80px;
	background:url(../img/volumen/bookmark1.png) no-repeat;
}
.rightboolmark2{
	right:160px;
	background:url(../img/volumen/bookmark2.png) no-repeat;
}
.rightboolmark3{
	right:240px;
	background:url(../img/volumen/bookmark3.png) no-repeat;
}
.rightboolmark4{
	right:320px;
	background:url(../img/volumen/bookmark4.png) no-repeat;
}
.rightboolmark5{
	right:400px;
	background:url(../img/volumen/bookmark5.png) no-repeat;
}
.rightboolmark6{
	right:480px;
	background:url(../img/volumen/bookmark0.png) no-repeat;
}

.bookmark span{
	font-size:1em;
	margin:-0.5em 0 0 -1.5em;
	position: absolute;
	left:50%;
	top:70px;
}