Post Notes

/* into style */

.postnotes { margin-top:30px; }
ol.notes {padding: 0px; margin: 5px 0 100px 0px; list-style-type: none;}
ol.notes a {text-decoration: none;}
ol.notes li.note {display: inline-block; margin:0; padding: 0;}
ol.notes li.note img.avatar {width: 34px; height: 34px;margin-bottom: -4px; padding: 2px;}
aside.permalink_page {margin-top:30px; margin-bottom: 60px;}
span.action {display:none;}
ol.notes li.note:hover span.action {display: block;}
ol.notes li.note blockquote {display:none;}
ol.notes li.note:hover blockquote{display: block;}
span.action {position: absolute; width: 150px; margin-left: -60px; margin-top: -6px; padding: 5px; padding-left:10px; padding-right:10px; font-size:12px; color:#fff; background-color:#333; text-align: center; z-index: 4;}
span.action:after {content: ""; position: absolute; width: 0; height: 0; border-width: 7px; border-style: solid; border-color: transparent transparent #333 transparent; top: -14px; left: 70px;}
ol.notes li.note blockquote {position: absolute; width: 150px; background-color: #333; z-index: 1; padding: 40px 5px 5px 5px; margin-left: -60px; border:0; }
ol.notes li.note.more_notes_link_container {display:block; margin-top: 20px; text-align: center;}
ol.notes li.note.more_notes_link_container a {color:#000; font-weight:bold; text-transform:uppercase;}
span.action a {color:#ff9999;}

--------------------------------------------------------------------

<!-- into body -->
{block:PostNotes}
<div class="postnotes">{PostNotes-64}</div>
{/block:PostNotes}