﻿:root {
	--comment-colour:#b21f2d;
}

p.comment_title {
	position:relative;
	display:table;
	margin:20px 0 0 22px;
	padding:7px 16px;
	background-color:var(--comment-colour);
	border-radius:12px 12px 0 0;
	color:white;
	font-size:15px;
	font-weight:bold;
	letter-spacing:0.2px;
	box-shadow:0 3px 8px rgba(0,0,0,0.14);
}

p.comment_title::before {
	content:"Comment from ";
	font-weight:normal;
	opacity:0.85;
}

p.comment_body {
	position:relative;
	margin:0;
	padding:24px 28px 24px 58px;
	color:#26364a;
	font-family:Arial, Helvetica, sans-serif;
	font-size:17px;
	line-height:1.6;
	background-color:#f7f9fc;
	border:1px solid #d8e0ea;
	border-top:4px solid #b21f2d;
	border-radius:0 14px 14px 14px;
	box-shadow:0 5px 16px rgba(31,50,75,0.12);
	border-top-color:var(--comment-colour);
	text-align:left;
}

p.comment_body::before {
	content:"“";
	position:absolute;
	top:5px;
	left:17px;
	color:var(--comment-colour);
	font-family:Georgia, serif;
	font-size:54px;
	font-weight:bold;
	line-height:1;
	opacity:0.75;
}

p.comment_body::after {
	content:"";
	position:absolute;
	left:28px;
	bottom:-13px;
	width:24px;
	height:24px;
	background-color:#f7f9fc;
	border-right:1px solid #d8e0ea;
	border-bottom:1px solid #d8e0ea;
	transform:rotate(45deg);
}

/* A subtle lift when the pointer passes over a comment */
p.comment_body:hover {
	background-color:#ffffff;
	box-shadow:0 7px 20px rgba(31,50,75,0.18);
	transform:translateY(-1px);
	transition:all 0.2s ease;
}

/* Prevent very long names or comments causing problems */
p.comment_title,
p.comment_body {
	box-sizing:border-box;
	max-width:100%;
}  	
.comment_date {
	display:none;
}

.QuotationMarks {
	display:none;
}
