@import "variables.less";

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

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

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

	&.rounded {
		background:@pale-blue;
		.border-radius(20px, 20px, 20px, 20px);

		.jsmod-content {
			padding:10px 20px;
			font-weight:bold;
			border:none;
			margin:0;
		}

	}
}

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

.book-detail-img {
	float: left;
	margin-right:10px;
	width:151px;
	
	img {
		padding:5px;
		border: solid 5px @pale-blue;
	}
}

.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;
	}
	
	.find-book {
		margin-top:15px;
		
		label {
			float:left;
			line-height:31px;
		}
	}
	
	.find-link {
		float:right;
	}
	
	.pledged-info {
		padding:0;
	}
	
	.pledged-group {
		padding:10px 40px 10px 0;
		float:left;
	}
	
	.status {
		float: right;
		padding-top: 4px;
	}
	
	.btn_support a {
		background:url("@{image-base}btn_bg.png") 0 0  no-repeat;
		width:104px;
		height:41px;
		line-height:41px;
		display:block;
		color:#fff;
		font-weight:bold;
		text-align:center;
	}

}


#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-2, #tabs-3, #tabs-4 {
	display:none;
}

ul.tabs {
	float:left;
	padding:0;
	margin:0;
	list-style:none;
	
	li {
		float: left;
		.height(46px);
		margin-right:2px;
		margin-bottom:1px;
		
		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;
		}
		
		a:hover, &.active a {
			background:@medium-blue;
			color:#fff;
		}
	}

}

#js-rightcol {
	float:right;
	width:235px;
	
	h3.jsmod-title {
		background:#a7c1ca;
		.border-radius(10px, 10px, 10px, 10px);
		padding:10px;
		height:auto;
		font-style:normal;
		font-size:14px;
		margin:0 0 10px 0;
		
		span {
			padding:0;
			color:#fff;
			font-style:normal;
		}
	}

	.jsmodule {
		margin-bottom:10px;
	}
	
	.jsmod-content {
		padding-left:10px;
	}
}

.js-rightcol-pad {
	border:1px solid @blue-grey;
	.border-radius(10px, 10px, 10px, 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;
}

ul.social li {
	padding:5px 0 5px 30px;
	.height(28px);

	&.facebook {
		background:url("@{image-base}icons/facebook.png") left center no-repeat;
	}

	&.twitter {
		background:url("@{image-base}icons/twitter.png") left center no-repeat;
	}
	
	&.email {
		background:url("@{image-base}icons/email.png") left center no-repeat;
	}
}

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

ul.support li {
	border-bottom:1px solid @blue-grey;
	padding:10px 15px 10px 0;
	
	span {
		display:block;

		&.menu-item-price { 
			font-size:18px;
		}
	}
}

.work_supporter {
	height: 50px;
	margin-top: 5px;
	vertical-align: middle;
	margin-left:-5px;
	
	.work_supporter_avatar {
		float: left;
	}
	
	.work_supporter_name {
		.height(50px);
		float: left;
		margin-left: 5px;
	}
}

/* differs from sitewide.css. should it? */
a{ color:#3d4e53; font-size:12px;}