#comments { background: rgba(255,255,255,0.95); color: #333; font-size: 0.857em; list-style: none; overflow: hidden; margin: 0; padding: 2em; position: relative; } body.pen_drop_shadow #comments { box-shadow: 0 5px 10px rgba(0,0,0,0.4), 0 0 5px rgba(0,0,0,0.4); } body.pen_round_corners #comments { border-radius: 5px; } #comments h2 { font-weight: bold; padding: 0 0 1em; } #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); box-shadow: 0 0 7px rgba(0,0,0,0.2); float: left; margin: 0 0 2em; position: relative; padding: 2em; width: 100%; } 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: 3em 0 0; } #comments ol.comment-list div.comment-author { float: left; margin: 0; width: 100%; } #comments ol.comment-list div.comment-author .photo { background: #fff; box-shadow: 0 0 7px rgba(0,0,0,0.2); float: left; height: 70px; margin: -40px 1em 1em; overflow: hidden; position: relative; width: 70px; } 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 1em; padding: 0; width: 100%; } #comments ol.comment-list div.comment-meta a { float: left; margin: 0 1em 0 0; padding-bottom: 0.25em; padding-top: 0.25em; } #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; } #comments ol.comment-list div.comment-content { float: left; margin: 1em 0; width: 100%; } #comments ol.comment-list .reply a { margin-bottom: 0 !important; padding-left: 4em !important; position: relative; text-align: left; } #comments ol.comment-list .reply a:before { content: "\f075"; font-family: "FontAwesome"; font-size: 1.429em; font-weight: normal; left: 1em; margin: 0 1em 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; margin: 1em 0; padding: 1em 1em 1em 2em; 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: "FontAwesome"; font-weight: normal; margin: 0 1em 0 0; } #comments .comment-awaiting-moderation:before { content: "\f017"; } #pen_respond_wrapper { float: left; margin: 2em 0 0 !important; width: 100%; } #comments #pen_respond_wrapper:first-child:last-child { margin: 0; } #respond { margin: 0; position: relative; } #respond h3 { padding-left: 2em; position: relative; } #comments #pen_respond_wrapper:first-child:last-child h3 { margin-top: 0; } #respond h3:before { content: "\f075"; font-family: "FontAwesome"; font-size: 1.429em; font-weight: normal; left: 0; line-height: 1; position: absolute; top: 0; } #respond h3 #cancel-comment-reply-link { float: right; margin: 0; } #comments .comment-form-cookies-consent { float: left; margin-top: 1em; width: 100%; } @media only screen and (min-width:728px) { #comments a.post-edit-link, #comments .comment-list a.comment-edit-link, #comments .comment-list .reply a, #cancel-comment-reply-link { font-size: 0.857em !important; width: auto !important; } #respond .form-submit input { 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.5em; 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: 1em 0 0; width: 100%; } } @media only screen and (max-width:728px) { #comments ol.comment-list div.comment-meta { width: 100%; } #comments ol.comment-list div.comment-meta a { padding: 0; } #respond h3 { font-size: 1.286em; padding-left: 0; padding-top: 2em; text-align: center; } #respond h3:before { left: 50%; top: 0; transform: translateX(-50%); } #respond h3 #cancel-comment-reply-link { margin: 1em 0; } }