@charset "utf-8";
/* CSS Document */

/*-------------#wrapper-----------*/
#wrapper .book_shelf,
.book_shelf .shelf,
.book_shelf .ranking {
    float:left;
	clear:both;
    width:710px;
}
/*-----------------------------*/
.book_shelf div.left,
.book_shelf div.right {
    padding-top:60px;
	width:30px;
	position: relative;
	z-index:2;
}
/*-----------------------------*/
.book_shelf ul.books {
    float:left;
	width:650px;
}
*html .book_shelf .books{overflow:hidden !important;}
.book_shelf .shelf ul.books li {
    position:relative;
    float:left;
	width:147px;
	margin-right:14px;
}
.book_shelf .shelf ul.books li .book {
    position:absolute;
	bottom:0;
	left:0;
}
/*----------book images--------*/
/* new from here */
.book_shelf .shelf ul.books li .book_base,
.book_shelf .shelf ul.books li .book_base2 {
    position:relative;
    float:left;
	clear:both;
    width:147px;
	overflow:hidden;
	padding-bottom:13px;
    background:url(../img/book_bg.jpg) no-repeat left bottom;
	z-index:0;
}
/* new to here */
.book_shelf .shelf ul.books li .book_img {
    width:127px;
    padding:2px 0 0 20px;
	background:url(../img/book_bg_top.jpg) no-repeat left top;
	
}
.book_shelf .shelf ul.books li .book_img img {
    width:110px;
	position:relative; /* add */
	z-index:4; /* add */
}

.book_shelf .shelf ul.books li .book_base p,
.book_shelf .shelf ul.books li .book_base2 p {
    position:absolute;
	width:110px;
    top:20%;
	left:15%;
	font-size:11px;
	line-height:1.4em;
	text-align:center;
	z-index:6;
}
/* add from here */
.book_shelf .shelf ul.books li .book_base .icon,
.book_shelf .shelf ul.books li .book_base2 .icon {
    position:absolute;
	top:120px;
	left:0;
	z-index:6;
}
.book_shelf .shelf ul.books li .book_base .cover,
.book_shelf .shelf ul.books li .book_base2 .cover2 {
    position:absolute;
	top:10%;
	left:20%;
	width:92px;
	height:92px;
	cursor:pointer;	
	z-index:2;
}
.book_shelf .shelf ul.books li .book_base .cover {background:url(../img/book_onmouse_cover.png) no-repeat 50% 50%;}
.book_shelf .shelf ul.books li .book_base2 .cover2 {background:url(../img/book_onmouse_cover2.png) no-repeat 50% 50%;}
.book_shelf .shelf ul.books li .book_base .book_btn,
.book_shelf .shelf ul.books li .book_base2 .book_btn {
    position:absolute;
    width:110px;
	height:157px;
	z-index:5;
	cursor:pointer;	
}
/*-----------------------------*/
.book_shelf .shelf .review_base {
    position:relative;
    float:left;
	clear:both;
	width:147px;
    height: 130px;
}
.book_baloon {
    position:absolute;
	top:-8px;
	left:-11px;
    width:135px;
	height:60px;
	overflow:hidden;
	padding:20px 4px 0 20px;
	background:url(../img/book_review_bg.png) no-repeat left top;
}
.book_shelf .shelf .review_bottom {
    position:absolute;
	bottom:8px;
	left:-11px;
    width:159px;
    height:52px;
    background:url(../img/book_review_bg_bottom.png) no-repeat left bottom;
}
/*--------------------------------*/
.book_shelf .shelf .review_base p {
    float:left;
	clear:both;
	width:135px;
	font-size:11px;
	line-height:1.3em;
}
.book_shelf .shelf .read {
	padding-bottom:3px;
	font-weight:bold;
}
.book_shelf .shelf .red {background:url(../img/book_review_tit_bg_r.gif) no-repeat center bottom;}
.book_shelf .shelf .blue {background:url(../img/book_review_tit_bg_b.gif) no-repeat center bottom;}
.book_shelf .shelf .yellow {background:url(../img/book_review_tit_bg_y.gif) no-repeat center bottom;}
/* add to here */

/*----------ranking--------*/
.book_shelf .ranking ul.books li {
    position:relative;
	margin:0;
}
.book_shelf .ranking ul.books li .rank {
    position:absolute;
	top:0;
	text-align:center;
	width:140px;
}
.book_shelf .ranking ul li .book_base {
    position:absolute;
	bottom:56px;
	z-index:0;
    width:125px;
    background:url(../img/book_ranking_bg.jpg) repeat-y left bottom;
}
.book_shelf .ranking ul li .book_ranking_bottom {
    position:absolute;
	bottom:0;
	left:-5px;
	z-index:1;
    width:130px;
	height:56px;
    background:url(../img/book_ranking_bg_bottom.png) no-repeat left bottom;
}
.book_shelf .ranking ul li .book_img {
    width:105px;
    padding:2px 0 0 20px;
	background:url(../img/book_ranking_bg_top.jpg) no-repeat left top;
}
/* -- new from here -- */
.book_shelf .ranking ul li .book_img img,
.book_shelf .ranking ul li .book_base p {
    width:90px;
}
.book_shelf .ranking ul li .book_base .chart,
.book_shelf .ranking ul li .book_base p {position:absolute;}
.book_shelf .ranking ul li .book_base .chart {
	bottom:0;
	right:5px;
}
.book_shelf .ranking ul li .book_base p {
    top:20%;
	left:15%;
	font-size:11px;
	line-height:1.4em;
	text-align:center;
}
.book_shelf .ranking ul li .book_base .chart2 {
    height:32px;
    width:35px;
	background:url(/common/img/chart2.gif) no-repeat scroll 0 0 transparent;
    color:#EEEEEE;
    font-size:11px;
}
.book_shelf .ranking ul li .book_base .chart2 .point {
    margin:0 auto;
    text-align:center;
}
/* -- new to here -- */
/*-----------------------------------------*/
/*-------------slide-------------*/
.shelf_in,
.ranking_in {
     float:left;
     clear:both;
     width:710px;
     position: relative;
}
.shelf_in {height:330px;}
.ranking_in {height:215px;}
.shelf_in .slide,
.ranking_in .slide {
     float:left;
     clear:both;
     overflow: auto;
     position: absolute;
     top: 0;
	 z-index:0;
}
.shelf_in .slide {
    width:630px; /* .shelf_in width - (.slide margin-left + .slide margin-right) */
    height:350px;
	margin: 0 40px;
}
.ranking_in .slide {
    width:650px; /* .shelf_in width - (.slide margin-left + .slide margin-right) */
    height:240px;
	margin: 0 30px;
}

.shelf_in .slide ul.books,
.ranking_in .slide ul.books {
    width: 9999px;
    margin:0;
    padding:0;
    position: absolute;
    top: 0;
}
.shelf_in .slide ul.books li,
.ranking_in .slide ul.books li {
    display:block;
    float:left;
}
.shelf_in .slide ul.books li {
    height:330px;
    width:146px;
}
.ranking_in .slide ul.books li {
    height:215px;
    width:130px;
}
/*-------------*/
.shelf_in .arrow,
.ranking_in .arrow {
     display: block;
	 width: 30px;
	 height: 100px;
	 background: url(../img/arrow.gif) no-repeat 0 0;
     text-indent: -999px;
     position: absolute;
     cursor: pointer;
     z-index:0;
}
    .shelf_in .arrow{top: 100px;}
    .ranking_in .arrow {top: 70px;}

    .shelf_in .forward,
    .ranking_in .forward {
        background-position: 0 0;
        right: 0;
    }
    .shelf_in .back,
    .ranking_in .back {
        background-position: 0 -200px;
        left: 0;
    }
    .shelf_in .forward:hover,
    .ranking_in .forward:hover {
	    background-position: 0 -100px;
    }
	.shelf_in .back:hover,
	.ranking_in .back:hover {
	    background-position: 0 -300px;
	}
/*------------------------------------------------------*/