/************************ messages ************************/

.message {
  padding-top: 2em;
}
.message .bubble-text {
  margin        : auto;
  background    : linear-gradient(to bottom, #505050 0%,#101010 100%);
  color         : #FFFFFF;
  padding       : 7px 15px;
  border-radius : 3px;
  border        : 1px solid #101010;
  max-width     : 500px;
}

.message .bubble-text::after {
  content      : "";
  border-left  : 20px solid transparent;
  border-right : 20px solid transparent;
  border-top   : 20px solid #101010;
  position     : absolute;
}

.message .user {
  margin      : auto;
  max-width   : 500px;
  padding-top : 1em;
}

.message .date {
  font-size   : 0.8em;
  font-style  : italic;
  color       : #A07000;
  text-align  : right;
  padding-top : 0.5em;
}

/************************ comments ************************/

.comment .label {
  display      : block;
  position     : relative;
  background   : linear-gradient(to bottom, #505050 0%,#101010 100%);
  color        : #FFFFFF;
  padding      : 7px 15px;
  border-radius: 3px;
  border       : 1px solid #101010;
}
.comment .label:before {
  content      : "";
  width        : 0px;
  height       : 0px;
  position     : absolute;
  border-right : 10px solid #111;
  border-left  : 5px solid transparent;
  border-top   : 5px solid #111;
  border-bottom: 10px solid transparent;
  left         : 8px;
  bottom       : -15px;
}
.comment .user {
  padding-left : 40px;
  padding-top  : 5px;
}
.comment .user .date {
  display      : inline;
  font-size    : 0.8em;
}