regluit/static/less/book_panel.less

@import "variables.less";

/* Local variables */
.greenpanelstuff {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    width: 120px;
    line-height:16px;
}

.greenpanelactionitems(@pos, @lineheight) {
    line-height:@lineheight;
    font-size:11px;
    background-repeat: no-repeat;
    background-position: @pos center;
    font-weight:bold;
    text-decoration:none;
    text-transform: uppercase;
}

.greenpanelactionborders {
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-color: #FFFFFF;
   	border-bottom-color: #FFFFFF;
}

.panelhoverlink {
	text-decoration:none;
	color:@text-blue;
}

.readit {
    width:118px;
    height:35px;
    padding:0px 0px;
    background:#FFFFFF;
    margin:0px;
    .one-border-radius(4px);
    border: 1px solid #81bb38;    
}

.readit_inner (@padding, @lineheight) {
    .greenpanelactionitems(10px, @lineheight);
    padding:0px 0px 0px @padding;
    color:@dark-green;
    	
    &:hover {
		text-decoration:none;
	}
}

.banners (@right) {
    width:120px;
    height:30px;
    padding:0px;
    margin:10px 0 0 0;
    .greenpanelactionborders;
    
    a, span {
    	.greenpanelactionitems(left, 30px);
		padding:0 @right 0 21px;
    	color:#FFF;
    	
   		&:hover { .panelhoverlink;}
	}
}

/* background */
@charset "utf-8";
*{
    padding:0px;
    margin:0px;
}

#main-wrapper{
    height: 100%;
    width: 725px;
    margin: 0px;
    padding: 0px 0px;
}

.panelview.tabs{
    padding:5px 0px;
    margin:0px;
    width:142px;
    float: left;

	span.active{
	    padding:15px;
    	margin:15px 0px;
    	font-weight:bold;
    }
}

/* styling of front side elements */
.panelview.book-list {
	.greenpanelstuff;
    margin: auto;
    padding: 0px 5px 5px 5px;
    height: 300px;
    background-color: #ffffff;
    color: @text-blue;
    border: 5px solid @pale-blue;
    position: relative;
    
    &:hover {
    	color: @text-blue;
	}

    img {
	    padding:5px 0px;
    	margin:0px;
	}
}

.panelview {
	&.remove-wishlist, &.on-wishlist, &.create-account, &.add-wishlist {
		display: none;
	}
}

.panelview.book-name div {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height:16px;
    max-height:32px;
    color: #3d4e53;
    overflow: hidden;    
}

.panelview.booklist-status {
	display: none;
}

.panelview.icons {
	position: absolute;
	bottom: -3px;
	width: 140px;
	
	.booklist-status-img {
		float: left;
	}
	
	.booklist-status-label {
		position: absolute;
		color: @green;
		padding-left: 5px;
		left: 40px;
		bottom: 5px;
		font-size: 17px;
		margin-bottom: 3px;
	}
	
    .panelnope {
    	display: none;
    }
    
    .rounded {
    	margin-bottom: 7px;
    }
}

.panelview.boolist-ebook a {
	display: none;
}

/* switch to/from hover state when jquery swaps class names */

div.panelview.side1  {
	display: visible;
}

div.panelview.side2  {
	display: none;
}

/* styling of hover state */
.panelback {
	position: relative;
}

.greenpanel2 {
	.greenpanelstuff;
    margin: 0;
    padding: 10px;
    height: 295px;
    background-color: @green;
    color: #fff;
    position:absolute;
    top:-5px;
    left:-10px;
}

.greenpanel_top {
	height: 135px;
}

/* Campaign status text at top of hover state */
.unglued_white {
    font-size: 12px;
    margin: 0px auto 10px auto;
    padding: 5px 0 10px 0;
    height:58px;
}

/* White-background action buttons; vary by state of campaign */
.read_itbutton {
	.readit;
	span {
		.readit_inner(30px, 40px);
		background: url("@{image-base}book-panel/book_icon.png") no-repeat 10% center;

		&:hover { .panelhoverlink; }
	}
	
	&.pledge {
		span {
			.readit_inner(25px, 35px);
			background: none;
			
			&:hover { .panelhoverlink; }
		}
		
		background-image: url("@{image-base}icons/pledgearrow-green.png");
		background-repeat: no-repeat;
		background-position: 90% center;		
	}	
}

.read_itbutton_fail {
	.readit;
	
	span {
		.readit_inner(15px, 40px);
		background: none;
	}
}

.Unglue_itbutton{
	.readit;
	
	a {
    	background-image: url("@{image-base}book-panel/unglue_icon.png");
    	.readit_inner(25px, 40px);
	}
}

.moreinfo.add-wishlist, .moreinfo.create-account {
	.banners(5px);
	background: url("@{image-base}book-panel/add_wish_icon.png") no-repeat left center;
	padding-right:0;
}

.moreinfo.remove-wishlist {
	.banners(5px);
	background: url("@{image-base}booklist/remove-wishlist-white.png") no-repeat left center;
}

.moreinfo.on-wishlist {
	.banners(5px);
	background: url("@{image-base}checkmark_small-white.png") no-repeat left center;
}

/* title, author */
.white_text {
    width:120px;
    height:45px;
    padding:15px 0px;
    margin:0px;

	 a {
    	color:#FFFFFF;
    	text-decoration:none;
    	
    	&:hover { .panelhoverlink;}
	}
	
	p {
		/* necessary to ensure title/author don't overflow onto icons */
    	line-height:16px;
    	max-height:32px;
    	overflow: hidden;
	}
}

.moreinfo {
	.banners(0);
	background: url("@{image-base}book-panel/more_icon.png") no-repeat left center;
	cursor: pointer;
	
	> div {
		.height(30px);
		padding-bottom:8px;
	}
}

/*end the 2greenpanel*/

.read{
    margin: 15px auto 5px auto;
    padding: 0px;
    width: 140px;
    color:@call-to-action;
    height:40px;
    line-height:25px;
    float:left;
    position: absolute;
    bottom: -15px;
}
.read p {
    margin: 0px;
    padding: 10px 3px;
    width: 50px;
    font-size: 10pt;
    float:left;
}
.read img{
    padding:5px 0px;
    margin:0px;
    float:left;
}

/**/
.read2{
    margin: 15px auto;
    padding: 0px;
    width: 130px;
    color:@call-to-action;
    height:40px;
    line-height:25px;
}
.read2 p {
    margin: 0px;
    padding: 10px 3px;
    width: 50px;
    font-size:10pt;
    float:left;
}
.read2 img{
    padding:0px;
    margin:0px;
    float:left;
    
}
.right_add{
    padding:10px;
    margin:0px;
    float:right;
}
/* --------------- ( slideout hover state ) --------------------------------------------- */
.panelview.book-thumb {
    position: relative;
    margin:0px;
    padding:0px;
    left:0px;
    
    img { 
        z-index: 100;
        width: 120px;
        height: 182px; 
    }

	span {
        position:absolute;
        bottom: 0;
        left:-10px;
        top:-5px;
        z-index: 1000;
        height:auto;
    }
   
}