@comments_bg: #fff2d3;
@active_color: #ffca24;

.block-comments {
	position: relative;
	width: 100%;
	font-family: Futura;
	font-size: 15px;
	line-height: 17px;
	padding-bottom: 1px;
	text-align: left;
	background: #fff9ec;
	
	.tool-tip {
		font-family: PT Sans;
		color: #ccc;
		font-size: 13px;
		margin-top: 4px;
	}
	table {
		border-spacing: 0px;
		
		td{
			vertical-align:top;
		}
	}
	
	&.for-microformats {
		.container {
			.comments {
				width: 710px;
			}
		}
		
		.answer-container {
			width: 710px;
		}
	}
	
	.container {
		overflow: hidden;
		background: @comments_bg;
		
		.comments {
			width: 620px;
			margin: 0 auto;
			
			.comment-image {
				width: 100%;
				padding: 10px 0;
				img {
					max-width: 100%;
				}
			}
		}
	}
	.comments-count {
		font-family: PTSansPro-Caption;
		font-size: 19px;
		padding: 30px 0;
	}
	.comment-author{
		font-family: 'PT Sans';
		position: relative;
		img {
			width:50px !important;
			height:50px !important;
		}
		.user-name {
			display: inline-block;
			font-size: 20px;
			color: #000;	
			margin-top: 8px;
			text-decoration: none;
			
			&:hover {
				text-decoration: underline;
			}
		}
		.date {
			font-size: 12px;
		}
		.rate {
			display: none;
			position: absolute;
			top: 0px;
			right: 0px;
			height: 50px;
			width: 80px;
			text-align: right;
			
			.plus, .minus {
				display: inline-block;
				width: 16px;
				height: 16px;
				line-height: 16px;
				text-align: center;
				border: 1px solid #555;
				border-radius: 2px;
				cursor: pointer;
				font-size: 17px;
				color: #555;
				
				&:hover:not(.disable) {
					background: #fff;
				}
				&.disable {
					color: #aaa;
					border-color: #aaa;
					cursor: default;
				}
			}
			.minus {
				font-size: 20px;
				line-height: 15px;
			}
			.count {
				display: inline-block;
				text-align: center;
				font-weight: bold;
				font-size: 14px;
				padding: 0 6px;
				line-height: 16px;
			}
		}
	}
	.comment-body{
		overflow:hidden;
		font-family: 'PTSerif-Regular';
		font-size: 16px;
		line-height: 19px;
		margin-top: 5px;
		
		p {
			margin: auto !important;
		}
	}
	.comment.deletable>.comment-footer .delete{
		display:inline;
	}
	.comment-footer{
		margin: 10px 0 30px 0;
		height: 20px;
		
		.reply, .delete {
			display: none;
			text-decoration: underline;
			text-transform: uppercase;
			font-family: 'PT Sans';
			cursor: pointer;
			font-size: 13px;
			text-transform: uppercase;
			margin-right: 8px;
			letter-spacing: 2px;
		}
	}
	.comment {
		.comment {
			padding: 0 0 0 60px;
		}
		.answer {
			margin-left: 60px;
			margin-bottom: 30px;
			
			.text-field {
				height: 60px;
			}
		}
		
		&:hover {
			.rate {
				/*display: block;*/
			}
		}
	}
	.comment .comment .comment .comment .comment {
		padding: 0 0 0 0px !important;
	}
	
	.shadow-up {
		position: absolute;
		top: 0px;
		left: 0px;
		height: 7px;
		width: 100%;
		background: url(../images/shadow-up.png) repeat-x;
	}
	.shadow-down {
		position: absolute;
		top: -7px;
		left: 0px;
		height: 7px;
		width: 100%;
		background: url(../images/shadow-down.png) repeat-x;
	}
	.show-all-comments {
		display: none;
		position: relative;
		height: 56px;
		line-height: 56px;
		background: #fff9ec;
		border-top: 1px solid rgba(0,0,0,0.05);
		border-bottom: 1px solid rgba(0,0,0,0.1);
		text-align: center;
		font-family: 'PT Sans';
		font-size: 14px;
		cursor: pointer;
		text-transform: uppercase;
		
		&:hover {
			background: @active_color;
		}
	}
	.answer-container {
		width: 620px;
		margin: 30px auto;
	}
	.ulogin {
		display: none;
		background: #fff9ec;
		position: absolute;
		right: 0px;
		margin-top: -25px;
		z-index: 100;
	}
	.answer {
		position: relative;
		border: 1px solid #222;
		box-shadow: inset 1px 1px 7px rgba(0,0,0,0.23);
		border-radius: 1px;
		
		.button {
			font-family: 'PT Sans';
			text-transform: uppercase;
			color: #000;
			text-decoration: none;
			cursor:pointer;
			font-size: 13px;
			padding: 0 15px 0 15px;
			cursor: pointer;
			
			&:hover {
				text-decoration: underline;
			}
		}
		.user-name {
			display: inline-block;
			font-size: 30px !important;
			color: #000;
			text-decoration: none;
			margin-top: 20px;
		}
		#comment-logout {
			display: inline-block;
			margin-top: 20px;
		}
		.dn {
			display: none;
		}
		.text-field {
			padding: 10px;
			height: 140px;
			overflow: hidden;
		}
		textarea {
			border: none;
			background: none;
			font-family: Ocatava;
			font-size: 16px;
			line-height: 19px;
			height: 180px !important;
		}
		input {
			padding: 3px;
			width: 30px;
			text-align: center;
		}
		textarea {
			width: 100%;
			height: 60px;
		}
		button {
			width: 100%;
			height: 100%;
			font-size: 21px;
		}
		textarea:focus, input:focus {
			outline: none;
			border-color: #aaa;
		}
		.block.user {
			border-bottom: 1px solid #c1c1c1;
			
			img {
				display: block;
			}
		}
		.block.ans {
			position: relative;
			text-align: right;
			padding: 20px 0;
			
			.upload-image {
				position: absolute;
				left: 15px;
				top: 22px;
				width: 32px;
				height: 25px;
				opacity: 0.4;
				background: url(../images/upload-image.png) no-repeat center center;
				
				&:hover {
					opacity: 0.8;
				}
				.file-uploader {
					position: absolute;
					top: 0px;
					width: 100%;
					height: 100%;
				}
				.qq-uploader {
					background: none;
					width: 100%;
					height: 100%;
					.qq-upload-list {display: none;}
				}
				.qq-upload-button {
					width: 100%;
					height: 100%;
					padding: 0px;
					background: none;
				}
				.qq-drop-processing {
					display: none;
				}
				.qq-upload-drop-area {
					display: none !important;
				}
			}
			.spinner {
				display: none;
				position: absolute;
				left: 35px;
				top: 5px;
				width: 16px;
				height: 16px;
				background: url(../images/spinner.gif);
			}
			.thumb {
				display: none;
				position: absolute;
				top: -4px;
				left: 44px;
				border-radius: 2px;
				width: 32px;
				height: 32px;
				background-size: cover;
				background-position: center center;
				
				.del {
					width: 100%;
					height: 100%;
					display: none;
					line-height: 32px;
					text-align: center;
					background: rgba(0,0,0,0.6);
					color: #fff;
					font-weight: bold;
					font-size: 20px;
					cursor: pointer;
				}
				&:hover {
					.del {
						display:block;
					}
				}
			}
		}
		.block.user:empty {
			display: none;
		}
		.file-uploader-drop-zone {
			display: none;
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.2);
			line-height: 260px;
			text-align: center;
			font-size: 24px;
			color: #fff;
			
			.after {
				display: none;
			}
			
			&.active {
				background: rgba(0, 0, 0, 0.4);
				.after {
					display: block;
				}
				.before {
					display: none;
				}
			}
		}
	}
	.no-comments {
		font-family: 'PTSerif-Regular';
		font-size: 16px;
		padding: 0 0 20px 0;
	}
}