/* Notifications displayed on receiving user messages. */
#messages-notifier                           { z-index: 99; position: fixed; top: 40px; right: 10px; }

.message-notification {
    position: relative;
    width: 250px;
    min-height: 100px;

    margin-bottom: 5px;
    padding: 5px;

    overflow: hidden;

    color: #FFFFFF;
    font-family: Helvetica, Arial;

    background-color: #464646;
    border-radius: 8px;
    box-shadow: 0 0 6px #000000;
    -moz-box-shadow: 0 0 6px #000000;
    -webkit-box-shadow: 0 0 6px #000000;
}

.message-notification .body                             { font-size: 0.9em; line-height: 18px; }
.message-notification .body:after                       { content: ""; display: table; clear: both; } /* To work as clearfix */
.message-notification .notification-close               { position: absolute; top: 5px; right: 10px; cursor: pointer; }
.message-notification .notification-close:hover         { color: #E93A00; }
.message-notification .sender                           { color: #FFFFFF; }
.message-notification .sender:after                     { content: ""; display: table; clear: both; } /* To work as clearfix */
.message-notification .icon                             { float: left; border-radius: 100px; height: 50px; margin-right: 10px; }
.message-notification .title                            { font-size: 1.2em; }

.message-notification .clickable                        { font-size: 0.9em; cursor: pointer; font-weight: bold; margin-top: 10px; }
.message-notification .clickable:hover                  { color: #E93A00; }
.message-notification .respond                          { float: left; }
.message-notification .mark-as-read                     { float: right; }