XF 1.5 User Group Styling on a Help Page

[Amaury]

Is it possible to style user groups on a per style basis with help pages like you can with the regular setup? Additionally, is it possible to have it pull from the CSS I already have? I also have some additional CSS for 2016 to keep the underlines when hovering on a name since our other links change color when hovered instead, but doesn't affect user groups as their styling overrides the general link color.

This is what it currently has, but that's the user group styling from our upcoming style: http://www.kh-flare.net/help/staff-members/

This is the current code:

This is a list of our staff members.<br /><br />

<b>Administrators:</b>
<ul>
<li><a href="{xen:link 'members/3/'}" class="username"><div style="color: #FFA500; font-weight: bold;">Necro Malice</div></a></li>
<li><a href="{xen:link 'members/5/'}" class="username"><div style="color: #FFA500; font-weight: bold;">Amaury</div></a></li>
<li><a href="{xen:link 'members/2/'}" class="username"><div style="color: #FFA500; font-weight: bold;">Nights☆</div></a></li>
<li><a href="{xen:link 'members/58/'}" class="username"><div style="color: #FFA500; font-weight: bold;">Mike</div></a></li>
</ul>

<b>Moderators:</b>
<ul>
<li><a href="{xen:link 'members/33/'}" class="username"><div style="color: #4169E1;">Jotaro Kujo</div></a></li>
<li><a href="{xen:link 'members/36/'}" class="username"><div style="color: #4169E1;">Abby Sciuto</div></a></li>
<li><a href="{xen:link 'members/65/'}" class="username"><div style="color: #4169E1;">Gexln</div></a></li>
</ul>

And here's the CSS I have for the staff user groups:

/** Administrative **/

.username .style3 {
    color: #FFA500;
    font-weight: bold;
}

.username .style3:hover {
    text-decoration: underline;
}

/** Administrative **/

/** Moderating **/

.username .style4 {
    color: #4169E1;
}

.username .style4:hover {
    text-decoration: underline;
}

/** Moderating **/