regluit/static/scss/supporter_layout.scss

@import "variables.scss";

.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 {
		@include 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;
        @include 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;
        @include 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;
	line-height: 24px;
}

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 {
	@include roundedspan;
}

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

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

span.grey {
	@include 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 {
	@include 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;
		@include height(46px);
		margin-right:2px;

		&.tabs1, &.tabs2, &.tabs3 {
			width:112px;
		}

		a {
			@include height(46px);
			display:block;
			text-align:center;
			padding:0 10px;
			min-width:80px;
			@include 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 {
	@include height(43px);
	font-size: $font-size-larger;
	padding-left: 37px;
	border: solid 3px $blue-grey;
	@include one-border-radius(5px);
	width: 665px;
	margin: 7px 0;

	a {
		font-size: $font-size-larger;
		color: $call-to-action;
	}
}