.conversation
  .status-bar
    .fontawesome-bell
    .entypo-chat
    .entypo-battery
    .entypo-signal
    .fontawesome-signal
    .time 12:02
    .entypo-clock
  .heading
    .convn-info Me and Lucas
  .krm Kaushalya:
    .content Hey, How are you?
    .message-time 11:57 
  .luky Lucas:
    .content Yo! I'm fine... What 'bout u?
    .message-time 11:58
  .krm Kaushalya:
    .content I'm great... sup?
    .message-time 11:58
  .luky Lucas:
    .content Not much.
    .message-time 11:59
  .krm Kaushalya:
    .content Btw coming to my home at evening or not?
    .message-time 12:00
  .luky Lucas:
    .content I've to work a lot...I'll call you later bye...
    .message-time 12:00
  .krm Kaushalya:
    .content Ok bye.
    .message-time 12:01
    
    
    
.kaushalya 
  a(href="http://seebeetee.com") By Kaushalya Mandaliya

@import "compass/css3";

@import url(http://weloveiconfonts.com/api/?family=entypo|fontawesome);

/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'fontawesome', sans-serif;
}


$c-1: #3498db;
$c-2: #34495e;
$c-3: #ecf0f1;
$c-4: #95a5a6;
$c-5: #9b59b6;


$message-margin: -2.5em -4.1em;
$message-font-size: 0.7em;


body {
  background: $c-4;
  font-family: 'Nunito', sans-serif;
}

div.conversation {
  background: $c-2;
  // border: 0.2em solid $c-2;
  color: $c-3;
  font-size: 1.3em;
  margin: 2em auto;
  max-width: 21em;
  overflow: hidden;
  
  @include border-radius(0.4em);
  
  .status-bar{
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    text-align: right;
    
    div {
      display: inline-block;
    }
    
    .time {
      font-size: 0.8em;
    }
  }
  
  .heading {
    .convn-info {
      text-align: center;
      font-size: 2em;
    }
  }
  
  .krm {
    background: $c-1;
    float: left;
    padding: 1em;
    text-align: left;    
    
    @include border-radius(0 1em 1em 0);
  }
  
  .luky {
    background: $c-3;
    color: $c-1;
    float: right;
    padding: 1em; 
       
    @include border-radius(1em 0 0 1em);
  }
  
  .krm,
  .luky {
    clear: both;
    margin: 0.2em 0;
    max-width: 80%;
    min-width: 50%;
    
    &:hover {
      .message-time {
        opacity: 1;
      }
    }
  }
  
  .krm .message-time {
    color: rgba($c-3, 0.5);
    float: right;
    font-size: $message-font-size;
    opacity: 0;
    position: relative;
    margin: $message-margin;
    
    @include transform(rotate(90deg));
    @include transition(0.3s all ease-in-out);
  }
  
  .luky .message-time {
    color: rgba($c-3, 0.5);
    float: left;
    font-size: $message-font-size;
    opacity: 0;
    position: relative;
    margin: $message-margin;
    
    @include transform(rotate(-90deg));
    @include transition(0.3s all ease-in-out);
  }
  
  .krm .message-time:before,
  .luky .message-time:before {
    content: ' ' '\1f554' ' ';
    
    font-family: 'entypo', sans-serif;
  }
  
  div:last-child {
    margin-bottom: 0;
  }
  
  ::selection {
    background: $c-2;
  }
  
  ::moz-selection {
    background: $c-2;
  }
}



.kaushalya {
  bottom: 0.4em;
  color: $c-3;
  position: fixed;
  right: 0.4em;
  
  a {
    border-bottom: 0.1em solid;
    color: inherit;
    text-decoration: none;
  }
}

/*
 * Simple Chat UI
 *
 *
 * 2014 By Kaushalya Mandaliya
 * @kmandalwala | http://seebeetee.com
 *
 */