/* -----------------------------------------
   Messages layout
----------------------------------------- */
.messages {
    position: relative; 
    list-style: none; 
    margin-left:0; 
    padding-bottom: 0;
    margin-bottom: -7px;
    padding-left: 0;

    li {
        position: relative;
        padding: 10px 0 15px 0; 
        width: 100%;
        &.sendMsg {
            border: 1px solid #c4c4c4; 
            padding-top:15px; 
            background: #f0f0f0;
            border-radius: @border-radius-base;
            form {
                margin-left:15px; 
                margin-right: 15px; 
                margin-bottom: 0;
            }
        }

        a {
            &.avatar { 
                float: left; 
                margin:0 15px 0 15px;
                img { width: 40px; height: 40px;}
            }
        }

        .message {
            position: relative;
            margin-right: 15px;
            margin-left:75px;
            border: 1px solid #d8d8d8;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            padding:10px;
            #gradient.vertical(#ffffff;#f3f3f3;0%;100%);

            .head {
                float: left; 
                width: 100%; 
                margin-bottom: 10px;
                span.name {
                    float: left; 
                    color:#999999;
                    strong {color:#ED7A53;}
                }
                span.time {float: right; font-size: 11px; margin-right: 15px; color:#999999;}
            }
        }

        &.user {
            .message {
                &:after{
                    float: left;
                    content:"";
                    position: absolute;
                    top:10px;
                    left:-10px;
                    width: 10px;
                    height: 17px;
                    background: url(../img/icons/arrow-left.png) no-repeat;
                }
            }
        }

        &.admin {
            a {
                &.avatar { float: right;}
            }
            .message {
                margin-left:15px; 
                margin-right: 75px;
                .head {
                    span.name {float: right;}
                    span.time {float: left; margin-right: 15px;}
                }

                &:after{
                    float: left;
                    content:"";
                    position: absolute;
                    top:10px;
                    right:-10px;
                    width: 10px;
                    height: 17px;
                    background: url(../img/icons/arrow-right.png) no-repeat;
                }       
            }
        }
    }
}