regluit/static/less/supporter_layout.less

@import "variables.less";

.block-inner { 
	padding-right:10px;
}

.user-block {
	width:100%;
	clear:both;
}

#user-block-hide {
	float: left;
	width:100%;
	clear:both;
	padding-top: 10px;
	
	.block { 
		float:left; 
	}
	
	.block1, .block3 {
		width:25%;
	}
	
	.block2 {
		width:50%;
		
		div {
			float: left;
			max-width: 340px;
		}
		
		input {
			margin-left: 5px;
		}
	}

	input { 
		float:left; 
		margin:3px 10px 0 0;
		width: 45%;
		
		&[type=checkbox] {
			float: none;
			width: auto;
		}
		
		&#librarything_input, &#goodreads_input {
			width: auto;
			cursor: pointer;
			background: @pale-blue;
			color: @text-blue;
			cursor: pointer;
		}
		
		&.profile-save {
			width: 116px;
			cursor: pointer;
		}		
	}
	
	label {
		float:left; 
		width:90%;
	}	
	
	textarea {
		width:95%;
	}
	
	select {
		margin-bottom: 5px;
	}	
}

#user-block1 {
	float:left;
	width:25%;
	position: relative;
}

.user-block2 {
	color:@medium-blue;
	font-size: @font-size-default;
	line-height:normal;
	float:left;
	width:25%;
}
.user-block23 {
	color:@medium-blue;
	font-size: @font-size-larger;
	line-height:normal;
	float:left;
	width:50%;
}
.user-block24 {
	color:@medium-blue;
	font-size: @font-size-larger;
	line-height:normal;
	float:left;
	width:75%;
}

.user-block3, 
.user-block4 {
	float:left;
	width:25%;
	
	&.recommended {
 		margin-top: auto;
 		
 		img {
 			margin-right: 7px;
 		}
	}
}

.user-block3 {
	margin-top:8px;
	.ungluingtext {
		.height(29px);
		float: left;
		color: @text-blue;
		padding-right: 5px;
	}
}

.user-block4 {
	margin-top: 7px;
}

.user-badges {
    position: absolute;
    bottom: 0;
    left: 60px;
    
    img {
        vertical-align:text-bottom;
        border:1px solid #d4d4d4;
        .one-border-radius(5px);
    }
}

.social { 
	width:100%;
}

#edit_profile {
    float: right;
    margin-top: -12px;
    margin-right: -5px;
    border: 2px solid white;
    padding: 3px 2px 2px 3px;
    
    &:hover {
        border: 2px solid @call-to-action;
        .one-border-radius(5px);
    }
}
span.special-user-name {
	display: block;
	font-size: @font-size-header;
	color:@text-blue;
	margin-left:10px;
	font-weight:bold;
	height:50px;
}

span.user-name,
span.user-short-info { 
	display: block;
}

.user-block2 .user-short-info {
	padding-right:10px;
}

span.user-name,
span.user-name a { 
	font-size: @font-size-default;
	color:@text-blue;
}

span.user-status-title { 
	float:left; 
	margin-right: 8px; 
	padding-top: 5px;
}

span.rounded {
	.roundedspan;
}

span.blue {
	.supporter-color-span(#a7d26a, "blue");
}

span.orange { 
	.supporter-color-span(#eabc7c, "orange");
}

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

div.check-list { 
	float: left; 
	padding-bottom:7px;
	clear: both;
}

a.profile-edit { 
	display:block; 
//	background:url("@{image-base}header/icon-edit.png") right top no-repeat;
}

div.profile-save { 
	padding-top:15px;
	border: none;
}

input.profile-save {
	background: url("@{image-base}header/save-setting.png") 0 0 no-repeat;
	width: 116px;
	height: 42px;
	display: block;
	text-indent: -100000px;
	border:none;
	cursor: pointer;
}

#loadgr {
	background: url("@{image-base}supporter_icons/goodreads_square.png") left center no-repeat;
	min-height: 33px;
	margin: 12px auto;
	
	span {
		display: inline-block;
		vertical-align: middle;
	}
	
	div, input {
		margin: auto 10px auto 36px;
	}
	
	#goodreads_shelves {
		margin: auto 10px auto 36px;
		display: block;
	}
}

#loadlt {
	background: url("@{image-base}supporter_icons/librarything_square.png") left center no-repeat;
	min-height: 32px;
	padding-top: 4px;

	div, input {
		margin: auto 10px auto 36px;
	}
}

.weareonthat {
	background: url("@{image-base}checkmark_small.png") left center no-repeat;
}
span.my-setting { 
	background:@blue-grey url("@{image-base}header/explane.png") 90% center no-repeat; 
	.one-border-radius(7px); 
	.height(40px);
	display:block; 
	padding:0 0 10px 10px; 
	font-size: @font-size-header;
	font-weight: bold;
	cursor:pointer;
}

span.my-setting.active { 
	background:@blue-grey url("@{image-base}header/collspane.png") 90% center no-repeat;
}

#tabs {
    clear: both;
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    width: 100%;
	border-bottom: 4px solid @blue-grey;
    
    ul.tabs li a:hover {
    	text-decoration: none;
    }

	&.wantto {
		ul.tabs li.tabs3.active a {
			background: @blue-grey;
			color: @text-blue;
		}
	}

	&.ungluing {
		ul.tabs li.tabs2.active a {
			background: #eabc7c;
			color: #fff;
		}
	}

	&.unglued {
		ul.tabs li.tabs1.active a {
			background: @green;
			color: #fff;
		}
	}
}

#tabs ul.book-list-view { 
	margin-bottom:0 !important;
}

#tabs-1,
#tabs-2,
#tabs-3 { 
	margin-left:10px;
}

ul.tabs {
	float:left;
	padding:0; 
	margin:0; 
	list-style:none;

	li {
		float: left; 
		.height(46px); 
		margin-right:2px;
		
		&.tabs1, &.tabs2, &.tabs3 {
			width:112px;
		}

		a { 
			.height(46px);
			display:block;
			text-align:center;
			padding:0 10px;
			min-width:80px;
			.border-radius(7px, 7px, 0, 0);
			background:@medium-blue;
			color:#fff;
		}
		
		&.tabs1 a:hover, &.tabs1.active a {
			background:@green;
			color:#fff
		} 

		&.tabs2 a:hover, &.tabs2.active a {
			background:#eabc7c;
			color:#fff;
		} 

		&.tabs3 a:hover, &.tabs3.active a {
			background:@blue-grey;
			color:@text-blue;
		} 
	}
}

#rss {
	height: 46px;
	
	img {
		padding: 16px 0 0 14px;
	}
	
	span {
		margin-left: 3px;
		font-size: @font-size-default;
	}
}

.listview .rounded {
	// cancelling out styles that would otherwise apply
	line-height: normal;
	margin-right: 0;
}

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

.empty-wishlist {
	margin-top: 10px;
}

.js-news-text {
	float:left;
	width:70%;
	font-size: @font-size-larger;
	color:@text-blue;
	font-family:lucida grande;
}

.js-news-links {
	float:right;
	width:30%;
}

.column-left .item {
	margin:0 10px 10px 0;
}

.column-center .item {
	margin:0 5px 10px 5px;
}

.column-right .item {
	margin:0 0 10px 10px;
}

.column .item {
	border:7px solid @pale-blue;
	padding:10px;
}

.book-image { 
	padding:0 0 10px 0;
}

.book-info {
	padding:0 0 10px 0;
	line-height:125%;
	position:relative;

	span.book-new {
		background:url(/static/images/images/icon-new.png) 0 0  no-repeat;
		width:38px;
		height:36px;
		display:block;
		position:absolute;
		right:10px;
		top:0;
	}
}

.book-name {
	color:@text-blue;
}

.book-author {
	color:@medium-blue;
}

.book-status {
	margin:0 -10px;
	border-top:1px solid @pale-blue;
	padding:15px 10px 0 10px;
	position:relative;

	span.unglue {
		font-style:italic;
	}

	span.status {
		position:absolute;
		right:10px;
		bottom:-5px;
		width:37px;
		height:25px;
		display:block;
	}

}

#js-slide .jsmodule {
	width: 660px !important;	
}

#js-maincontainer-bot-block {
	padding-left: 16px;
}

.anon_about {
	.height(43px);
	font-size: @font-size-larger;
	padding-left: 37px;
	border: solid 3px @blue-grey;
	.one-border-radius(5px);
	width: 665px;
	margin: 7px 0;
	
	a {
		font-size: @font-size-larger;
		color: @call-to-action;
	}
}