@import "variables.less";

.shareclass(@sharewhere) {
	background:url("@{image-base}icons/@{sharewhere}.png") 10px center no-repeat;
	cursor: pointer;
		
	span {
		padding-left:10px;
	}
		
	&:hover {
		background:@call-to-action url("@{image-base}icons/@{sharewhere}-hover.png") 10px center no-repeat;
	
		span {
			color: #fff;
			}
	}
}

#js-page-wrap {
	overflow:hidden;
}

#main-container {
	margin-top:20px;
}

#js-leftcol .jsmodule {
	margin-bottom:10px;

	&.rounded .jsmod-content {
		   .one-border-radius(20px);
			background:@pale-blue;
			color: @text-blue;
			padding:10px 20px;
			font-weight:bold;
			border:none;
			margin:0;
			
			&.active0, &.active1 {
				background: #e35351;
			}

			&.active2 {
				background: #e18551;
			}

			&.active3 {
				background: #e5a956;
			}

			&.active4 {
				background: #efd45e;
			}

			&.active5 {
				background: #bbcf67;
			}

			&.active6 {
				background: @green;
			}

			span {
				display: inline-block;
				vertical-align: middle;
				
				&.spacer {
					visibility: none;
				}	
				
				&.findtheungluers {
					cursor: pointer;
				}
			}
					
		}
}

.book-detail {
	float:left;
	width:100%;
	clear:both;
	display:block;
}

.book-detail-img {
	float: left;
	margin-right:10px;
	width:151px;
	
	img {
		.mediaborder;
	}
}

.book-detail-info {
	float:left;
	/* if we want to nix the explore bar, width should be 544ish */
	width:309px;

	h2.book-name, h3.book-author, h3.book-year {
		padding:0;
		margin:0;
		line-height:normal
	}

	h2.book-name {
		font-size:18px;
		text-transform:capitalize;
		font-weight:bold;
		color:@text-blue;
	}

	h3.book-author, h3.book-year {
		font-size:12px;
		font-weight:normal;
		color:@medium-blue;
	}
	
	> div {
		width:100%;
		clear:both;
		display:block;
		overflow:hidden;
		border-top:1px solid @pale-blue;
		padding:10px 0;
	}
	
	> div.layout {
		border: none;
		padding: 0;
		
		div.pubinfo {
			float: left;
			width: auto;
		}
		
		div.btn_support {
			float: right;
			
			input {
				background:url("@{image-base}btn_bg.png") 0 0 no-repeat;
				width:104px;
				height:41px;
				display:block;
				color:#fff;
				font-weight:bold;
				text-align:center;
				border:none;
				padding:0;
				cursor:pointer;
			}
			
			&.modify input {
				background:url("@{image-base}btn_bg_grey.png") 0 0 no-repeat;
			}
		}
	}
	
	.btn_wishlist span {
		text-align: right;
	}
	
	.find-book {
		margin-top:15px;
		
		label {
			float:left;
			line-height:31px;
		}
	}
	
	.find-link {
		float:right;
		
		a {
			padding: 0 0 0 4px;			
		}
	}
	
	.pledged-info {
		padding:0;
		position: relative;
	}
	
	.pledged-group {
		padding:10px 40px 10px 0;
		float:left;
	}
	
	.status {
		position: absolute;
		top:50%;
		right:0%;
		height: 25px;
		margin-top: -12px;
	}
	
}


#tabs{ 
	border-bottom: 4px solid @medium-blue;
    clear: both;
    float: left;
    margin-top: 10px;
    width: 100%;

	ul.book-list-view {
		margin-bottom:4px !important;
	}
}

#tabs-1, #tabs-2, #tabs-3, #tabs-4 {
	display:none;
}

#tabs-1.active, #tabs-2.active, #tabs-3.active, #tabs-4.active {
	display: inherit;
}

#tabs-2 textarea {
	width: 95%;
}

ul.tabs {
	float:left;
	padding:0;
	margin:0;
	list-style:none;
	width: 100%;
	
	li {
		float: left;
		.height(46px);
		padding-right:2px;
		width: 116px;
		
		&.tabs4 {
			padding-right:0px;
		}
		
		a { 
			.height(46px);
			display:block;
			text-align:center;
			padding:0 10px;
			min-width:80px;
			.border-radius(7px, 7px, 0, 0);
			background:@blue-grey;
			color:@text-blue;
			
			&:hover {
				text-decoration: none;
			}
		}
		
		a:hover, &.active a {
			background:@medium-blue;
			color:#fff;
		}
	}

}

#js-rightcol {
	float:right;
	width:235px;
	margin-bottom: 20px;
	
	h3.jsmod-title {
		background:@medium-blue-grey;
		.one-border-radius(10px);
		padding:10px;
		height:auto;
		font-style:normal;
		font-size:14px;
		margin:0 0 10px 0;
		color: white;
		
		span {
			padding:0;
			color:#fff;
			font-style:normal;
		}
	}

	.jsmodule {
		margin-bottom:10px;
	}	
}

.js-rightcol-pad {
	border:1px solid @blue-grey;
	.one-border-radius(10px);
	padding:10px;
} 

#js-maincol {
	float:left;
	/* If we want to nuke the explore column, width should be 705ish */
	width:470px;
	margin:0 10px;

	div#content-block { 
		background: none;
		padding:0;
	}
}

div#content-block-content {
  padding-left: 5px;
}

.tabs-content {
	padding-right: 5px;
	
	iframe {
		.mediaborder;
	}
	
	form {
	margin-left: -5px;
	}
}

ul.social {
	a:hover {
		text-decoration: none;
	}

	li {
		padding:5px 0 5px 30px;
		.height(28px);
	
		&.facebook {
			.shareclass("facebook");
		}
	
		&.twitter {
			.shareclass("twitter");
		}
	
		&.email {
			.shareclass("email");
		}
	
		&.embed {
			.shareclass("embed");
		}
	}
}

#widgetcode {
	display: none;
	border:1px solid @blue-grey;
	.one-border-radius(10px);
	padding:10px;
}

ul.support li {
	border-bottom:1px solid @blue-grey;
	padding:10px 5px 10px 10px;
	background:url("@{image-base}icons/pledgearrow.png") 98% center no-repeat;
	
	span {
		display:block;
		padding-right:10px;

		&.menu-item-price { 
			font-size:18px;
		}
	}
	
	&:hover {
		color: #fff;
		background:@call-to-action url("@{image-base}icons/pledgearrow-hover.png") 98% center no-repeat;
		a {
			color: #fff;
			text-decoration: none;
		}
	}
}

.work_supporter_nocomment {
	height: 50px;
	margin-top: 5px;
	vertical-align: middle;
	margin-left:-5px;
}

.work_supporter_avatar {
	float: left;
}
	
.work_supporter_name {
	.height(50px);
	float: left;
}
	
/* this line differs from sitewide.css. should it? */
a{ color:#3d4e53; font-size:12px;}

.add-wishlist, .add-wishlist-workpage, &.remove-wishlist-workpage, .remove-wishlist, &.on-wishlist, &.create-account {
	float: right;
	cursor: pointer;
            
	span {
    	font-weight:normal;
        color:@text-blue;
        text-transform: none;
        padding-left:20px;
        
        &.on-wishlist {
    		background:url("@{image-base}checkmark_small.png") left center no-repeat;
    		cursor: default;
        }
	}
}

.add-wishlist span, .add-wishlist-workpage span, .create-account span {
    background:url("@{image-base}booklist/add-wishlist.png") left center no-repeat;
}

.remove-wishlist-workpage span, .remove-wishlist span {
    background:url("@{image-base}booklist/remove-wishlist-blue.png") left center no-repeat;
}

.editions {
	clear: both;
	
	div {
		float:left;
		padding-bottom: 5px;
	}
	
	.image {
		width: 60px;
		overflow: hidden;
	}
	
    .metadata { 
    	display:block;
        overflow: hidden;
        margin-left: 5px;
    }
    
    a:hover {
    	text-decoration: underline;
    }
}

.thank-you {
	font-size: 20px;
}

.work_supporter {
	height: auto;
	min-height: 50px;
	margin-top: 5px;
	vertical-align: middle;
	margin-left:-5px;
}
.work_supporter_avatar {
	margin-right: 5px;
}