<link rel="stylesheet" type="text/css" href="https://interwebstars.github.io/EASUI/versions/1/1.4/easui-1.4.early.css">


<div class="bit-1 conversation">
  <p data-user="Franco">You don't like art ?</p>
  <p data-user="Jay">Hum... I don't know</p>
  <p data-user="Franco">You play video games ? </p>
  <p data-user="Jay">Yeah ? </p>
  <p data-user="Franco">Guess what buddy ? This is art ! </p>
</div>


<footer>
  <small>Dialog inspired from the movie <a href="http://en.wikipedia.org/wiki/This_Is_the_End">" This is the end "</a></small>
</footer>

@import "bourbon";

.bit-1.conversation {
  width:60%;
  margin:1em auto;
  float:inherit;
  p{
  display:block; 
  clear:both;
  padding:0;
   height:2em;
    height:auto;
    margin-bottom:-1em;
  line-height:2;
  margin-top:1em;
  border-bottom:.1em solid rgba(0,0,0,.2);
     &:before{
    content:'';
    display:block;
    width:2em; 
    height:2em;  
    margin:0em -2.6em;
    background:#ccc;
    border-radius:100%;
    box-shadow:inset 0 0 .2em rgba(0,0,0,.2);
    }  
    &:nth-child(even){
     float:left;
     border-bottom:.15em solid #ff8283;
     .name{
    margin-left:-1.65em;
    padding:0 1.4em 0 0; 
    position:absolute;
      font-weight:bold;
      color:rgba(255,255,255,.4);
      font-size:1.2em;
      line-height:2.3;}
      &:before{     
        float:left;
        margin-right:.6em;
        margin-top:.4em;
      background:#ff8283;
    }
  }
 &:nth-child(odd){
     float:right;
     border-bottom:.15em solid #4dd2db;
    .name{
    padding:0 1.4em 0 0;
    margin:-2em -3em 0 -1em;
      font-weight:bold;
      color:rgba(255,255,255,.4);
      font-size:1.2em;
      line-height:2.3;
    float:right;
    }
&:first-child{
  .name{margin-top:-.22em}
}

      &:before{    
        float:right;
        margin-left:.6em;
        background:#4dd2db;
    }
  }
 
  }

&.plain{
  p:after{content:'';display:block;width:100%;height:1em;background:#ccc}
}
}

footer{
  display:block;
  width:100%;
  bottom:0;
  position:absolute;
  padding:.4em;
  text-align:center;
  color:rgba(0,0,0,.15);
  a{color:rgba(0,0,0,.15);}


}

/*$(document).ready(function(){
  var s = $('.bit-1.conversation p:nth-child(even)'),
    b = $('.bit-1.conversation p:nth-child(even):before'),
    n = s.data('user'),
    f = n.substring(0, 1),
    d = $('.bit-1.conversation p:nth-child(odd)'),
    b = $('.bit-1.conversation p:nth-child(odd):before'),
    n = d.data('user'),
    t = n.substring(0, 1);
    s.prepend('<span class="name"></span>');
    d.append('<span class="name"></span>');
    var m = s.find('.name');
    var x = d.find('.name');
  m.append(f);
  x.append(t);
d.css('content','h');
});

*/