/**/
.message {
    cell-padding:0px;
    width:100%;/*228px*/
    border-collapse: collapse;
    /**/
    color:       #414141;
    font-size:   90%;
    word-wrap:   break-word; /* actually it's CSS3 property, but it works on S60 Webkit also */
}

.message td{
    padding: 0px 0px 4px 0px;
    vertical-align:top;
    border: 0px solid;
}

.message_avatar_td {
    width:32px;
    min-width:32px;
}

.message_avatar_td img{
    padding:3px;
    width:32px;
}

.message_content_td {
    overflow: hidden;
    max-width:150px;
}

/**/
.pointer {
    background-repeat:  no-repeat;
    background-position:top left;
    margin-top:   4px;
    margin-left:-14px;
    min-width:   10px;
    min-height:  10px;
    border:  0px solid;
    position:absolute;
}

.incoming .pointer{
    background-image: url(chat_bubble_green_pointer.png);
}

.outgoing .pointer{
    background-image: url(chat_bubble_grey_pointer.png);
}

.selected .pointer{
    background-image: url(chat_bubble_focused_pointer.png);
}


/**/
.incoming {
    background:
        url(chat_bubble_green_upper_left.png),
        url(chat_bubble_green_upper_right.png),
        url(chat_bubble_green_lower_left.png),
        url(chat_bubble_green_lower_right.png),
        url(chat_bubble_green_top.png),
        url(chat_bubble_green_bottom.png),
        url(chat_bubble_green_left_side.png),
        url(chat_bubble_green_right_side.png);
    background-repeat:
        no-repeat,  no-repeat,
        no-repeat,  no-repeat,
        repeat-x,
        repeat-x,
        repeat-y,
        repeat-y;
    background-position:
        top left,
        top right,
        bottom left,
        bottom right,
        top,
        bottom,
        left,
        right;
    background-color: #F5F5F5;
    padding: 5px 5px 5px 10px;
    margin-left: 4px;
}


.outgoing {
    background:
        url(chat_bubble_grey_upper_left.png),
        url(chat_bubble_grey_upper_right.png),
        url(chat_bubble_grey_lower_left.png),
        url(chat_bubble_grey_lower_right.png),
        url(chat_bubble_grey_top.png),
        url(chat_bubble_grey_bottom.png),
        url(chat_bubble_grey_left_side.png),
        url(chat_bubble_grey_right_side.png);
    background-repeat:
        no-repeat,  no-repeat,
        no-repeat,  no-repeat,
        repeat-x,
        repeat-x,
        repeat-y,
        repeat-y;
    background-position:
        top left,
        top right,
        bottom left,
        bottom right,
        top,
        bottom,
        left,
        right;
    background-color: #F5F5F5;
    padding: 5px 5px 5px 10px;
    margin-left: 4px;
}

.selected {
    background:
        url(chat_bubble_focused_upper_left.png),
        url(chat_bubble_focused_upper_right.png),
        url(chat_bubble_focused_lower_left.png),
        url(chat_bubble_focused_lower_right.png),
        url(chat_bubble_focused_top.png),
        url(chat_bubble_focused_bottom.png),
        url(chat_bubble_focused_left_side.png),
        url(chat_bubble_focused_right_side.png);
    background-repeat:
        no-repeat,  no-repeat,
        no-repeat,  no-repeat,
        repeat-x,
        repeat-x,
        repeat-y,
        repeat-y;
    background-position:
        top left,
        top right,
        bottom left,
        bottom right,
        top,
        bottom,
        left,
        right;
    background-color: #daedda;
    padding: 5px 5px 5px 10px;
    margin-left: 4px;
}

.selected a{
    color: black; outline: none; text-decoration: none;
}
.selected a:focus{
    background-color: transparent;
}


.username {
    font-weight: bold;
    max-width: 55%;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
}
.username a{
    color: black; outline: none; text-decoration: none;
}
.username a:focus{
    background-color: transparent;
}

.time {
    color:#898989;
    position:absolute;
    right:14px;
}

.smiley {
    position: relative;
    bottom:-3;
    width :25;
    height:25;
    border-style: none;
    }

.colon{
    position: relative;
    top:0;
}