@import "variables.less";

.comments {
	clear: both;
	padding: 5px;
	margin: 0 5px 8px 0;
	//min-height: 105px;
	width: 95%;
	
	&.row1 {
		background: #f6f9f9;
	}
	
	&.row2 {
		background: #fff;
	}
	
	div {
		float: left;
		
		img {
			margin: 0 5px;
		}
	}
	
	.image img {
		height: 100px;
	}
	
	// so div will stretch to height of content
	&:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}
	
	.nonavatar {
		width: 620px;
		
		span {
			padding-right: 5px;
			
			&.text:before {
				content: "\201C";
				font-size: @font-size-larger;
				font-weight: bold;
			}

			&.text:after {
				content: "\201D";
				font-size: @font-size-larger;
				font-weight: bold;
			}
		}
	}
	
	.avatar {
		float: right;
		margin: 0 auto;
		padding-top: 5px;
	}
}
.official {
	border: 3px #B8DDE0 solid;
	margin-top: 3px;
	margin-bottom: 5px;
	padding-left: 2px;
}