#comments {
background: rgba(255,255,255,0.95);
color: #333;
list-style: none;
overflow: hidden;
margin: 0;
padding: 2rem;
position: relative;
}
body.pen_drop_shadow #comments {
box-shadow: 0 5px 10px rgba(0,0,0,0.25), 0 0 5px rgba(0,0,0,0.25);
}
body.pen_round_corners #comments {
border-radius: 5px;
}
#comments h2 {
font-weight: bold;
padding: 0 0 1rem;
}
#comments ol.comment-list,
#comments ol.children,
#comments ol.comment-list li {
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
#comments ol.comment-list li {
min-height: 48px;
}
#comments ol.comment-list > li {
background: rgba(170,170,170,0.1);
float: left;
margin: 0 0 2rem;
position: relative;
padding: 2rem;
width: 100%;
}
body.pen_drop_shadow #comments ol.comment-list > li {
box-shadow: 0 0 7px rgba(0,0,0,0.2);
}
body.pen_round_corners #comments ol.comment-list > li {
border-radius: 3px;
}
#comments ol.comment-list > li:last-child {
margin: 0;
}
#comments ol.comment-list ol.children {
margin: 5rem 0 0 1rem;
}
#comments ol.comment-list .comment-body {
position: relative;
}
#comments ol.comment-list div.comment-author {
float: left;
margin: 0;
width: 100%;
}
#comments ol.comment-list div.comment-author .photo {
background: #fff;
float: left;
height: 70px;
margin: -40px 0 1rem;
overflow: hidden;
position: relative;
width: 70px;
}
#comments ol.comment-list div.comment-author .photo {
box-shadow: 0 0 7px rgba(0,0,0,0.2);
}
body.pen_round_corners #comments ol.comment-list div.comment-author .photo {
border-radius: 50%;
}
#comments ol.comment-list div.comment-author cite {
clear: left;
float: left;
font-style: normal;
}
#comments ol.comment-list div.comment-author .says {
margin: 0 0 0 5px;
}
#comments ol.comment-list div.comment-author b {
clear: left;
}
#comments ol.comment-list div.comment-author b,
#comments ol.comment-list div.comment-author .says {
float: left;
}
#comments ol.comment-list div.comment-meta {
float: left;
margin: 0 0 1rem;
padding: 0;
width: 100%;
}
#comments ol.comment-list div.comment-meta a {
float: left;
margin: 0 1rem 0 0;
padding-bottom: 0.25rem;
padding-top: 0.25rem;
}
#comments ol.comment-list > li a.comment-edit-link {
float: none !important;
margin: 0 0 0 5px;
padding-top: 5px !important;
padding-bottom: 5px !important;
text-shadow: none !important;
}
#comments ol.comment-list div.comment-metadata {
font-size: 0.857em !important;
}
#comments ol.comment-list div.comment-content {
float: left;
margin: 1rem 0;
width: 100%;
}
#comments ol.comment-list .reply a {
margin-bottom: 0 !important;
padding-left: 3rem !important;
position: relative;
text-align: left;
text-shadow: none !important;
}
#comments ol.comment-list .reply a:before {
content: '\f075';
font-family: 'Pen_FontAwesome';
font-size: 1.429em;
font-weight: normal;
left: 1em;
margin: 0 1rem 0 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
#comments .no-comments,
#comments .comment-awaiting-moderation {
border: 1px solid rgba(170,170,170,0.3);
float: left;
font-weight: bold;
margin: 1rem 0;
padding: 1rem 1rem 1rem 2rem;
width: 100%;
}
body.pen_round_corners #comments .no-comments,
body.pen_round_corners #comments .comment-awaiting-moderation {
border-radius: 3px;
}
#comments .no-comments:before,
#comments .comment-awaiting-moderation:before {
content: '\f023';
font-family: 'Pen_FontAwesome';
font-weight: normal;
margin: 0 1rem 0 0;
}
#comments .comment-awaiting-moderation:before {
content: '\f017';
}
#pen_respond_wrapper {
float: left;
margin: 0 !important;
width: 100%;
}
#comments ol.comment-list + #pen_respond_wrapper {
margin: 2rem 0 0 !important;
}
#comments #pen_respond_wrapper:first-child:last-child {
margin: 0;
}
#respond {
margin: 0;
position: relative;
}
#respond h3 {
font-size: 1.5em;
padding-left: 2em;
position: relative;
}
#comments #pen_respond_wrapper:first-child:last-child h3 {
margin-top: 0;
}
#respond h3:before {
content: '\f075';
font-family: 'Pen_FontAwesome';
font-size: 1.429em;
font-weight: normal;
left: 0;
line-height: 1;
opacity: 0.5;
position: absolute;
top: 0;
}
#respond h3 #cancel-comment-reply-link {
float: right;
font-size: 0.5em;
margin: 0;
}
#comments .comment #respond {
margin: 1rem 0 0;
padding: 0;
}
#comments .comment-subscription-form,
#comments .comment-form-cookies-consent,
#comments .akismet_comment_form_privacy_notice,
#webmention-form {
float: left;
margin-bottom: 0.5rem;
margin-top: 1rem;
position: relative;
width: 100%;
}
#comments .comment-form-cookies-consent {
padding-left: 1rem;
}
#comments .comment-form-cookies-consent input {
left: 0;
position: absolute;
top: 0;
}
#comments .comment-form-cookies-consent label,
#webmention-form label {
white-space: normal;
}
@media only screen and (min-width:1024px) {
#comments .comment-list a.comment-edit-link,
#comments .comment-list .reply a,
#comments .edit-link a.post-edit-link {
font-size: 0.857em !important;
width: auto !important;
}
#cancel-comment-reply-link,
#respond .form-submit input.submit {
width: auto !important;
}
#comments ol.comment-list div.comment-metadata {
position: absolute;
right: 2em;
top: 2em;
}
#comments .comment-form-author,
#comments .comment-form-email,
#comments .comment-form-url {
float: left;
margin-bottom: 0.5rem;
width: 28%;
}
#comments .comment-form-comment {
float: right;
width: 70%;
}
body.logged-in #comments .comment-form-comment {
clear: both;
width: 100%;
}
#comments .form-submit {
float: left;
margin: 1rem 0 0;
width: 100%;
}
body.pen_width_narrow #comments ol.comment-list div.comment-meta {
width: 100%;
}
body.pen_width_narrow #comments ol.comment-list div.comment-meta a {
padding: 0;
}
body.pen_width_narrow #respond h3 {
float: left;
font-size: 1.5em;
margin-top: 1rem;
padding-left: 0;
padding-top: 5em;
width: 100%;
}
body.pen_width_narrow #respond h3:before {
font-size: 4em;
}
}
@media only screen and (max-width:1024px) {
#comments ol.comment-list div.comment-metadata {
position: static;
}
#comments ol.comment-list > li {
padding: 1.5rem;
}
}
@media only screen and (max-width:728px) {
#comments ol.comment-list a.comment-edit-link {
display: block;
margin: 0.5rem 0 0 !important;
}
#comments ol.comment-list div.comment-meta {
width: 100%;
}
#comments ol.comment-list div.comment-meta a {
padding: 0;
}
#respond h3 {
font-size: 1.5em;
margin-top: 1rem;
padding-left: 0;
padding-top: 5em;
text-align: center;
}
#respond h3:before {
font-size: 4em;
left: 50%;
top: 0;
transform: translateX(-50%);
}
#respond h3 #cancel-comment-reply-link {
margin: 1rem 0;
}
#comments .submit {
float: left !important;
margin: 0 !important;
width: 100% !important;
}
}