.colorPreview {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEX////MzMw46qqDAAAAD0lEQVQI12P4z4Ad4ZAAAH6/D/Hgw85/AAAAAElFTkSuQmCC);
	border: 1px solid @wcfContainerBorderColor;
	border-radius: @wcfContainerBorderRadius;
	display: inline-block;
	
	&:hover {
		.boxShadow(0, 0, @wcfContainerBorderColor, 15px, 0);
	}
	
	> div {
		border: 2px solid @wcfContentBackgroundColor;
		border-radius: @wcfContainerBorderRadius;
		cursor: pointer;
		display: block;
		height: 60px;
		width: 180px;
	}
}

.colorList {
	> li {
		float: left;
		padding: @wcfGapSmall;
		
		> figure > figcaption {
			font-size: @wcfSmallFontSize;
			margin-bottom: @wcfGapSmall;
			text-align: center;
		}
	}
	
	&::after {
		clear: both;
		content: "";
		display: block;
	}
}

#tplStyleAdd #styleLogo {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEX////MzMw46qqDAAAAD0lEQVQI12P4z4Ad4ZAAAH6/D/Hgw85/AAAAAElFTkSuQmCC);
}