@charset "utf-8";

.jxbookflip { position:relative; width:100%; overflow:hidden; margin:0 auto; }
.jxbookflip > div { position:absolute; width:100%; top:0; left:0;}
.jxbookflip .pages > div { position:absolute; top:0; left:0; overflow:hidden; z-index:1}
.jxbookflip .pages .page_shadow { position:absolute; top:0; width:100%; background:url(../images/shadow-all.png) repeat-y;}

.jxbookflip .fliper {  background-size:cover; }
.jxbookflip .fliper .fliper_pic { position:absolute; }

.jxbookflip .panelbook { position:absolute; width:100%; z-index:2}
.jxbookflip .panelbook > div { position:relative; width:50%; cursor:pointer; background:url(../images/space.gif); cursor:pointer;}
.jxbookflip .panelbook .leftflip { float:left; }
.jxbookflip .panelbook .rightflip { float:right; }
.jxbookflip .panelbook > div > div { position:absolute; min-width:20px; min-height:20px; padding:0 5px; text-align:center; line-height:20px; background:rgba(255,255,255,.7); }
.jxbookflip .panelbook .left > div { left:0;}
.jxbookflip .panelbook .right > div { right:0;}
.jxbookflip .panelbook > div:hover > div { filter:alpha(opacity=100); opacity:1 }


/* custom control button example */
#bookflip { }
#mycontroler { position:relative; width:100%; margin:20px auto 30px auto; text-align:center; }
#mycontroler a{ display:inline-block; width:21px; height:21px; margin:3px 5px 0 5px; font-size:12px; background:url(../images/fliper_pagers.png); text-indent:-9999px; outline:none; *blr: expression(this.onFocus=this.blur()); }
#mycontroler a:hover { opacity:.5}
#mycontroler a.disable { opacity:.2}


#mycontroler .btn_wrap, #mycontroler .jumper_wrap  { display:inline-block; margin:0 10px 20px 10px; }

#mycontroler .b1{ background-position:0 0;}
#mycontroler .b2{ background-position:-21px 0;}
#mycontroler .b3{ background-position:-42px 0;}
#mycontroler .b4{ background-position:-63px 0;}
#mycontroler .b5{ margin-top:4px; margin-left:10px; background-position:-84px 0;}

#mycontroler .jumper_wrap { line-height:25px; }
#mycontroler .jumper_wrap select { width:80px; margin:0 5px 0 10px; }

img{max-width:none !important;
}
@media all and (max-width:400px){
	#mycontroler .btn_wrap { margin-bottom:15px; }
}