.community {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.favorites {
	@extend .community;
	.community-list {
		top: 2.65rem!important;
	}
}

.community-list {
	@extend .list;
	top: $title-h-pad + $search-height!important;

	.label {
		margin: 0;
		width: 17.1rem;
	}

	.rating-list {
	  	@extend .detail;
	  	font-family: $monospace;
		position: absolute;
		top: .5rem;
		right: .5rem;
	}

	.inline-rating {
		font-size: .8rem;
	}
}

.community-content {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	.scroll {
		position: absolute;
		overflow-y: auto;
		top: 2.5rem;
		bottom: 0;
		right: 0;
		left: 1px;
		padding: $pad;
		padding-top: 0.6rem;
	}

	.description {
		padding: 0;
		margin: 0;
	}

	.rating-content {
		position: absolute;
		z-index: 0;
		left: .5rem;
	}

	.author {
		font-size: 0.72rem;
		color: darken($grey, 15%);
		padding: 0 !important;
		margin: 0 !important;
		&:before {
			content: "submitted by ";
			font-weight: bolder;
		}
	}

	hr {
		padding-top: .5rem;
		margin: 0;
		padding: 0;
	}

	.header {
		background: $top-bg;
		height: 2.5rem;

		.rating {
			position: relative;
		  	top: .5rem;
		  	text-align: center;
		}

		.load.icon {
			position: relative;
			top: .5rem;
			right: $pad;
			z-index: 1;
		}

		.favorite.icon {
			position: absolute;
		  	z-index: 1;
			left: 1.2rem;
			top: .5rem;
			cursor: pointer;

			&:hover {
				color: $hover-color;
			}
		}

		.favorite.icon.full {
			&:after {
				content: "\e013";
			}
		}

		.favorite.icon.empty {
			&:after {
				content: "\e020";
			}
		}

		hr {
			position: absolute;
			margin: 0;
			padding: 0;
			left: $pad;
			right: $pad;
			top: 2.25rem;
		}
	}
}

.search {
	position: relative;

	input::-webkit-input-placeholder {
		color: $placeholder-color;
	}

	input:-moz-placeholder { /* Firefox 18- */
		color: $placeholder-color;
	}

	input::-moz-placeholder {  /* Firefox 19+ */
		color: $placeholder-color;
	}

	input::-ms-input-placeholder {
		color: $placeholder-color;
	}

	input {
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		background: $top-bg;
		height: $search-height;
		color: $lib-color;
		padding-left: 2rem;
		margin: 0;
		width: 100%;
	}

	.spinner {
		position: absolute;
		top: $pad;
		right: $pad;
		padding: 0;
	}

	.search-icon {
		&:before {
			padding-top: ($search-height - 1.125rem) / 2;
			padding-left: 0.5rem;
			font-family: $icon-font;
			-webkit-font-smoothing: antialiased;
			content: "\E028";
			font-size: 1.125rem;
			position: absolute;
		}
	}

}