.userBanner
{
	font-size: 11px;
	padding: 1px 5px;
	border: 1px solid transparent;
	border-radius: 3px;
	box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
	text-align: center;
}

	.userBanner.wrapped
	{
		border-top-right-radius: 0;
		border-top-left-radius: 0;
		position: relative;
	}
		
.userBanner.wrapped span
        {

            top: -4px;
            width: 5px;
            height: 4px;
            background-color: inherit;
        }
		
		.userBanner.wrapped span.before
		{
			border-top-left-radius: 3px;
			left: -1px;
		}
		
		.userBanner.wrapped span.after
		{
			border-top-right-radius: 3px;
			right: -1px;
		}
		
.userBanner.bannerHidden { background: none; box-shadow: none; border: none; }
.userBanner.bannerHidden.wrapped { margin-left: 0; margin-right: 0; }
.userBanner.bannerHidden.wrapped span { display: none; }

.userBanner.bannerStaff { color: #fff; background-color: rgb(255, 2, 2); border-color: rgb(255, 2, 2); }
.userBanner.bannerStaff.wrapped span { background-color: rgb(255, 2, 2); }

.userBanner.bannerPrimary { color: @primaryMedium; background-color: @primaryLighterStill; border-color: @primaryLighter; }
.userBanner.bannerPrimary.wrapped span { background-color: @primaryLighter; }

.userBanner.bannerSecondary { color: @secondaryDark; background-color: @secondaryLighter; border-color: @secondaryLighter; }
.userBanner.bannerSecondary.wrapped span { background-color: @secondaryLighter; }

.userBanner.bannerRed        { color: white; background-color: red; border-color: #F88; }
.userBanner.bannerRed.wrapped span { background-color: #F88; }

.userBanner.bannerGreen      { color: white; background-color: green; border-color: green; }
.userBanner.bannerGreen.wrapped span { background-color: green; }

.userBanner.bannerOlive      { color: black; background-color: olive; border-color: olive; }
.userBanner.bannerOlive.wrapped span { background-color: olive; }

.userBanner.bannerLightGreen { color: black; background-color: lightgreen; border-color: lightgreen; }
.userBanner.bannerLightGreen.wrapped span { background-color: lightgreen; }

.userBanner.bannerBlue       { color: white; background-color: blue; border-color: #88F; }
.userBanner.bannerBlue.wrapped span { background-color: #88F; }

.userBanner.bannerRoyalBlue  { color: white; background-color: royalblue; border-color: #81A9E1;  }
.userBanner.bannerRoyalBlue.wrapped span { background-color: #81A9E1; }

.userBanner.bannerSkyBlue    { color: black; background-color: skyblue; border-color: skyblue; }
.userBanner.bannerSkyBlue.wrapped span { background-color: skyblue; }

.userBanner.bannerGray       { color: black; background-color: gray; border-color: #AAA; }
.userBanner.bannerGray.wrapped span { background-color: #AAA; }

.userBanner.bannerSilver     { color: black; background-color: silver; border-color: silver; }
.userBanner.bannerSilver.wrapped span { background-color: silver; }

.userBanner.bannerYellow     { color: black; background-color: yellow; border-color: #E0E000; }
.userBanner.bannerYellow.wrapped span { background-color: #E0E000; }

.userBanner.bannerOrange     { color: black; background-color: orange; border-color: #FFC520; }
.userBanner.bannerOrange.wrapped span { background-color: #FFC520; }

.avatar img{
max-width: 148px;
}

.messageUserInfo
{
    @property "messageUserInfo";
    border-right: 3px solid #FFB635;
    border-radius: 14px;
    float: left;
    width: 154px;
    @property "/messageUserInfo";
}

    .messageUserBlock
    {
        @property "messageUserBlock";
        background-color: #fff;
        border-radius: 14px;
        @property "/messageUserBlock";
        
        position: relative;
    }
        
        .messageUserBlock div.avatarHolder
        {
            @property "messageAvatarHolder";
            background-color: #fff;
            padding: 10px;
            border-radius: @fa_borderradiuss;
            text-align: center;
            @property "/messageAvatarHolder";
            
            position: relative;    
        }
        
            .messageUserBlock div.avatarHolder .avatar
            {
                display: block;
                font-size: 0;
            }
            
            .messageUserBlock div.avatarHolder .onlineMarker
            {
                position: absolute;
                top: {xen:calc 'intval(@messageAvatarHolder.padding-top) - 1'}px;
                left: {xen:calc 'intval(@messageAvatarHolder.padding-right) - 1'}px;
                
                @property "messageOnlineMarker";
                border: 7px solid transparent;
                border-top-color: rgb(127, 185, 0);
                border-left-color: rgb(127, 185, 0);
                border-top-left-radius: 5px;
                border-top-right-radius: 3px;
                border-bottom-left-radius: 3px;
                left: 24px;
                @property "/messageOnlineMarker";
            }
            
        .messageUserBlock h3.userText
        {
            @property "messageUserText";
            padding: 6px;
            @property "/messageUserText";
        }
        
.messageUserBlock .userBanner {
    display: block;
    margin-bottom: 5px;
}
        
        .messageUserBlock .userBanner:last-child
        {
            margin-bottom: 0;
        }
    
            .messageUserBlock a.username
        {
            @property "messageUsername";
            font-weight: bold;
            font-size: @fafontsizel;
            color: @facolor2;
            display: block;
            overflow: hidden;
            line-height: 20px;
            text-align: center;
            @property "/messageUsername";
                    
        }
        
        .messageUserBlock .userTitle
        {
            @property "messageUserTitle";
            font-size: @fafontsizes;
            padding-bottom: 3px;
            display: block;
            text-align: center;
            @property "/messageUserTitle";
        }
        
        .messageUserBlock .extraUserInfo
        {
            @property "messageExtraUserInfo";
            font-size: @fafontsizes;
            background-color: #fff;
            padding: 4px 6px;
            border-radius: 14px;
            @property "/messageExtraUserInfo";
        }
        
            .messageUserBlock .extraUserInfo dl
            {
                margin: 2px 0 0;
                border-bottom: 1px #EEE solid;
                                padding: 5px;
            }
                            
            .messageUserBlock .extraUserInfo img
            {
                max-width: 100%;
            }
        
        .messageUserBlock .arrow
        {
            position: absolute;
            top: 10px;
            right: -10px;
            
            display: block;
            width: 0px;
            height: 0px;
            line-height: 0px;
            
            border: 10px solid transparent;
            border-left-color: @messageUserBlock.border-color;
            -moz-border-left-colors: @messageUserBlock.border-color;
            border-right: none;
            
            /* Hide from IE6 */
            _display: none;
        }
        
            .messageUserBlock .arrow span
            {
                position: absolute;
                top: -10px;
                left: -11px;
                
                display: block;
                width: 0px;
                height: 0px;
                line-height: 0px;
                
                border: 10px solid transparent;
                border-left-color: @messageAvatarHolder.background-color;
                -moz-border-left-colors: @messageAvatarHolder.background-color;
                border-right: none;
            }

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
    .Responsive .messageUserInfo
    {
        float: none;
        width: auto; 
    }

    .Responsive .messageUserBlock
    {
        overflow: hidden;
        margin-bottom: 5px;
        position: relative;
    }

    .Responsive .messageUserBlock div.avatarHolder
    {
        float: left;
        padding: 5px;
    }

        .Responsive .messageUserBlock div.avatarHolder .avatar img
        {
            width: 48px;
            height: 48px;
        }
        
        .Responsive .messageUserBlock div.avatarHolder .onlineMarker
        {
            top: 4px;
            left: 4px;
            border-width: 6px;
        }

    .Responsive .messageUserBlock h3.userText
    {
        margin-left: 64px;
    }
    
    .Responsive .messageUserBlock .userBanner
    {
        max-width: 150px;
        margin-left: 0;
        margin-right: 0;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        position: static;
        display: inline-block;
    }
    
        .Responsive .messageUserBlock .userBanner span
        {
            display: none;
        }

    .Responsive .messageUserBlock .extraUserInfo
    {
        display: none;
    }

    .Responsive .messageUserBlock .arrow
    {
        display: none;
    }
}
</xen:if>