Timeline style blog comments revamp

DEMO 







Hello, this is an example comment
by Joe Bloggs at 2:20pm, 4th Dec 2012






This is a much longer one that will go on for a few lines.
It has multiple paragraphs and is full of waffle to pad out the comment. Usually, you just wish these sorts of comments would come to an end.
by Joe Bloggs at 2:23pm, 4th Dec 2012






Originally from cssdeck.com this presentation has been updated 
to looks more precisely to the facebook timeline
by Luky Vj at 2:44pm, 14th Apr 2012
​  

CSS
article, aside, figure, footer, header, hgroup, menu, nav, section { display: block }

a {
    color: #6d84b4;
    text-decoration: none;
}

body {
    width: 100%;
    height: 100%;
    margin: 20px auto;
    font: 16px/1.4 Arial, sans-serif;
    background: #3b5998;
}

section {
    background: rgba(255,255,255,0.9);
    padding-right: 85px;
    padding-top: 20px;
    padding-bottom: 20px;
    height: 100%;
    width: 60%;
    margin: auto;
    margin-top: -20px;
    border-radius: 5px;
    border: 1px solid #666;
}

.comment {
    overflow: hidden;
    padding: 0 0 1em;
    border-bottom: 1px solid #ddd;
    margin: 0 0 1em;
    margin-left: 40px;
    *zoom: 1;
    width: 100%;
}

.comment-img {
    float: left;
    margin-right: 33px;
    border-radius: 5px;
    overflow: hidden;
}

.comment-img img { display: block }

.comment-body { overflow: hidden }

.comment .text {
    padding: 10px;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    background: #fff;
}

.comment .text p:last-child { margin: 0 }

.comment .attribution {
    margin: 0.5em 0 0;
    font-size: 14px;
    color: #666;
}

/* Decoration */

.comments, .comment { position: relative }

.comments:before, .comment:before, .comment .text:before {
    content: "";
    position: absolute;
    top: 0;
    left: 65px;
}

.comments:before {
    width: 3px;
    left: 105px;
    bottom: 0px;
    background: rgba(0,0,0,0.1);
}

.comment:before {
    width: 9px;
    height: 9px;
    border: 3px solid #fff;
    border-radius: 100px;
    margin: 16px 0 0 -6px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.2), inset 0 1px 1px rgba(0,0,0,0.1);
    background: #ccc;
}

.comment:hover {
    /*  cursor: url('../images/FB_CUR.cur');  See the result on http://lab.web-gate.fr/timeline/ */ 
    cursor: cell; /* This line is for the cursor */
}

.comment:hover:before { background: #3b5998 }

.comment .text:before {
    top: 18px;
    left: 78px;
    width: 9px;
    height: 9px;
    border-width: 0 0 1px 1px;
    border-style: solid;
    border-color: #e5e5e5;
    background: #fff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}

HTML<section class="comments">
 <article class="comment">
  <a class="comment-img" href="#non">
   <img src="http://lorempixum.com/50/50/people/1" alt="" width="50" height="50" />
  </a>
   
  <div class="comment-body">
   <div class="text">
     <p>Hello, this is an example comment</p>
   </div>
   <p class="attribution">by <a href="#non">Joe Bloggs</a> at 2:20pm, 4th Dec 2012</p>
  </div>
 </article>
 
 <article class="comment">
  <a class="comment-img" href="#non">
  <img src="http://lorempixum.com/50/50/people/7" alt="" width="50" height="50">
  </a>
   
  <div class="comment-body">
   <div class="text">
     <p>This is a much longer one that will go on for a few lines.</p>
     <p>It has multiple paragraphs and is full of waffle to pad out the comment. Usually, you just wish these sorts of comments would come to an end.</p>
   </div>
  <p class="attribution">by <a href="#non">Joe Bloggs</a> at 2:23pm, 4th Dec 2012</p>
  </div>
 </article>
  
 <article class="comment">
  <a class="comment-img" href="#non">
  <img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/572942_100000672487970_422966851_q.jpg" alt="" width="50" height="50">
  </a>
   
  <div class="comment-body">
   <div class="text">
    <p>Originally from <a href="http://cssdeck.com/item/301/timeline-style-blog-comments#comment_289">cssdeck.com</a> this presentation has been updated 
    to looks more precisely to the facebook timeline</p>
   </div>
  <p class="attribution">by <a href="http://www.facebook.com/luky.TikTek">Luky Vj</a> at 2:44pm, 14th Apr 2012</p>
  </div>
 </article>
</section>