regluit/static/scss/book_panel2.scss

@import "variables.scss";

/* Local variables */
@mixin greenpanelstuff()
{
    font-size: 12px;
    width: 120px;
    line-height:16px;
}

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

@mixin greenpanelactionborders()
{
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-color: #FFF;
   	border-bottom-color: #FFF;
}

@mixin panelhoverlink()
{
	text-decoration:none;
	color:$text-blue;
}

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

.buyit {
    font-size: 13pt;
    color: $green;
}

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

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

/* background */
$charset: "utf-8";

#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 {
	@include 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;
	}
	
	.pledge.side1 {
	    display: none;
	}
}

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

.panelview.book-name div {
    font-size: 12px;
    line-height:16px;
    max-height:32px;
    color: $text-blue;
    overflow: hidden;    
    
    a {
    	color: $medium-blue;
    }
}

.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;
    }
}
/* make sure the box with the number of wishers displays right */
span.rounded {
	@include roundedspan;
}

span.grey { 
	@include supporter-color-span(#bacfd6, "grey");
}

.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 {
	@include greenpanelstuff;
    margin: 0;
    padding: 10px;
    height: 295px;
    background-color: $green;
    color: #fff;
    position:absolute;
    top:-5px;
    left:-10px;
}

.greenpanel_top {
	height: 135px;
}
.greenpanel2 .button_text {
    height: 30px; 
    line-height: 30px
}
.greenpanel2 .bottom_button {
    position: absolute; 
    bottom: 0px; 
    height: 26px;
}
.greenpanel2 .add_button {
    position: absolute; 
    bottom: 60px; 
    height: 26px;
}

/* 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;
    
    p{
        margin:0;
    }
}

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

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

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

.panelview.panelfront.icons .read_itbutton {
    margin-bottom: 7px;
    @include height(30px);
}

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

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

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

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

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

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

.moreinfo {
	@include banners(0);
	background: url("#{$image-base}book-panel/more_icon.png") no-repeat left center;
	cursor: pointer;
	
	> div {
		@include 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;
    }
   
}