.message-from-vendor,
.message-from-member,
.message-from-user {
    position: relative;
    margin: 15px;
}

.message-from-vendor a[name=unread],
.message-from-member a[name=unread],
.message-from-user  a[name=unread] {
    position: absolute;
    top: -200px;
}

.message-from-vendor .blinder,
.message-from-member .blinder,
.message-from-user .blinder {
    opacity: 0.0;
}
.message-item-container:hover .message-from-vendor .blinder,
.message-item-container:hover .message-from-member .blinder,
.message-item-container:hover .message-from-user .blinder {
    opacity: 1.0;
}

.message-from-vendor .balloon,
.message-from-member .balloon,
.message-from-user .balloon {
    position: relative;
    padding: 20px;
    border-radius: 0.5em;
    display: inline-block;
    text-align: left;
}

.message-from-vendor .balloon::before,
.message-from-member .balloon::before,
.message-from-user .balloon::before {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    top: 20px;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}

.message-from-vendor .read-flag,
.message-from-member .read-flag,
.message-from-user .read-flag {
    display: block;
}

.message-from-vendor,
.message-from-member {
    text-align: left;
}
.message-from-vendor .balloon,
.message-from-member .balloon {
    background-color: #CFC5A2;
}
.message-from-vendor .balloon::before,
.message-from-member .balloon::before {
    left: -15px;
    border-right: 15px solid #CFC5A2;
}

.message-from-user {
    text-align: right;
}
.message-from-user .balloon {
    background-color: silver;
}
.message-from-user .balloon::before {
    right: -15px;
    border-left: 15px solid silver;
}