<div class="message-userDetails">
            <h4 class="message-name"><xf:username user="$user" rich="true" defaultname="{$fallbackName}" itemprop="name" /></h4>
            <xf:usertitle user="$user" tag="h5" class="message-userTitle" banner="true" itemprop="jobTitle" />
            <xf:userbanners user="$user" tag="div" class="message-userBanner" itemprop="jobTitle" />
            <xf:if is="{$dateHtml}"><div class="message-date">{$dateHtml}</div></xf:if>

<xf:if is="{$user.Profile.custom_fields.p_banner} AND {$user.Profile.custom_fields.p_banner_color}">                             
            <div class="userBanner userBanner--{$user.Profile.custom_fields.p_banner_color} message-userBanner" dir="auto" itemprop="jobTitle">
                <span class="userBanner-before"></span>
                <strong>{$user.Profile.custom_fields.p_banner}</strong>
                <span class="userBanner-after"></span>
            </div>
        </xf:if>

<xf:if contentcheck="true">
                            <div class="memberHeader-banners">
                                <xf:contentcheck><xf:userbanners user="$user" /></xf:contentcheck>

<xf:if is="{$user.Profile.custom_fields.p_banner} AND {$user.Profile.custom_fields.p_banner_color}">
                                    <em class="userBanner userBanner--{$user.Profile.custom_fields.p_banner_color}" dir="auto">
                                        <span class="userBanner-before"></span>
                                        <strong>{$user.Profile.custom_fields.p_banner}</strong>
                                        <span class="userBanner-after"></span>
                                    </em>
                                </xf:if>

.m-userBannerVariation(@color; @bg; @border: false)
{
    color: @color;
    background: @bg;
    border-color: xf-intensify(@bg, 10%);


    & when (iscolor(@border))
    {
        border-color: @border;
    }
}


.userBanner
{
    font-size: 75%;
    font-weight: @xf-fontWeightNormal;
    font-style: normal;
    padding: 3px @xf-paddingMedium;
    border: 1px solid transparent;
    border-radius: @xf-borderRadiusSmall;
    text-align: center;
    text-transform: uppercase;
    display: inline-block;


    strong
    {
        font-weight: inherit;
    }


    // variations
    &.userBanner--hidden
    {
        background: none;
        border: none;
        box-shadow: none;
    }


    &.userBanner--staff,
    &.userBanner--primary
    {
        .m-userBannerVariation(@xf-linkColor, @xf-contentHighlightBg, @xf-borderColorHighlight);
    }


    &.userBanner--accent
    {
        .m-userBannerVariation(@xf-textColorAccentContent, @xf-contentAccentBg, @xf-borderColorAccentContent);
    }


    &.userBanner--red { .m-userBannerVariation(white, #d80000, transparent); }
    &.userBanner--green { .m-userBannerVariation(white, green, transparent); }
    &.userBanner--olive { .m-userBannerVariation(white, olive, transparent); }
    &.userBanner--lightGreen { .m-userBannerVariation(black, #ccf9c8, #bee8ba); }
    &.userBanner--blue { .m-userBannerVariation(white, #0008e3, transparent); }
    &.userBanner--royalBlue { .m-userBannerVariation(white, royalblue, transparent); }
    &.userBanner--skyBlue { .m-userBannerVariation(white, #7cc3e0, transparent); }
    &.userBanner--gray { .m-userBannerVariation(white, gray, transparent); }
    &.userBanner--silver { .m-userBannerVariation(black, silver, transparent); }
    &.userBanner--yellow { .m-userBannerVariation(black, #ffff91, #e6e687); }
    &.userBanner--orange { .m-userBannerVariation(black, #ffcb00, transparent); }
}

.bbCodeCode {
    background: #272822;
    color: #ccc;
    padding: 15px;
    margin: -5px -10px;
    .prism-token {
        &.prism-comment,
        &.prism-prolog,
        &.prism-doctype,
        &.prism-cdata {
            color: slategray;
        }


        &.prism-punctuation {
            color: #f8f8f2;
        }


        .namespace {
            opacity: .7;
        }


        &.prism-property,
        &.prism-tag,
        &.prism-constant,
        &.prism-symbol,
        &.prism-deleted {
            color: #f92672;
        }


        &.prism-boolean,
        &.prism-number {
            color: #ae81ff;
        }


        &.prism-selector,
        &.prism-attr-name,
        &.prism-string,
        &.prism-char,
        &.prism-builtin,
        &.prism-inserted {
            color: #a6e22e;
        }


        &.prism-operator,
        &.prism-entity,
        &.prism-url,
        .language-css &.prism-string,
        .style &.prism-string,
        &.prism-variable {
            color: #f8f8f2;
        }


        &.prism-atrule,
        &.prism-attr-value,
        &.prism-function {
            color: #e6db74;
        }


        &.prism-keyword {
            color: #66d9ef;
        }


        &.prism-regex,
        &.prism-important {
            color: #fd971f;
        }


        &.prism-important,
        &.prism-bold {
            font-weight: bold;
        }
        &.prism-italic {
            font-style: italic;
        }


        &.prism-entity {
            cursor: help;
        }
    }
}