House of Memories Memberlist

<script>
$(document).ready(function(){
$('.mb4 img[src*="contact_pm"]').parent().attr('title', 'Mensaje Privado').html('<em class="fas fa-envelope"></em>');
$('.mb4 img[src*="contact_www"]').parent().attr('title', 'Expediente de Personaje').html('<em class="fas fa-id-badge"></em>');
$('.member .mbname span').each(function(){
var memberColour = $(this).css('color');
$(this).parents('.member').attr('style', '--membercolour:' + memberColour + ';');
});
$('.mbfield span:empty').parents('.mbfield').remove();
});
</script>
<style>
#memberlist {
    --bckg1: #eaeaea;
    --bckg2: #ececec;
    --bckg3: #efefef;
    --bckg4: #f2f2f2;
    --bckg5: #f4f4f4;
    --border1: 1px solid #ccc;
    --accent1: #8a4040;
    --shadow-w: 1px 1px white, -1px -1px white, -1px 1px white, 1px -1px white;
}

#memberlist {
    background: var(--bckg3);
    border: var(--border1);
}

#memberlist h4 {
    background: var(--bckg1);
    border-bottom: var(--border1);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#memberlist h {
    font: 18px 'Montserrat';
    color: var(--accent1);
}

#memberlist .mbform {
    background: var(--bckg2);
    border-bottom: var(--border1);
    padding: 5px;
    text-align: center;
    text-transform: uppercase;
    color: #555;
    font: 11px 'Roboto';
}

#memberlist .mbform input, #memberlist .mbform select {
    margin: 0 3px;
    font: 11px 'Roboto';
    color: #555;
}

.mbbody {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px 0 0 20px;
    flex-wrap: wrap;
}

.member {
    margin: 0 20px 20px 0;
    padding: 15px;
    border: var(--border1);
    background: var(--bckg1);
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    align-self:stretch;
}
.mb1, .mb2, .mb3 { flex-shrink:0;align-self:stretch; }

.mb1 {
    background: var(--bckg5);
    border: var(--border1);
    border-bottom: 0;
    display: flex;
    justify-content: space-between;
    padding: 15px;
    align-items: center;
    height: 40px;
}

.mbname {
    font: 15px 'Montserrat';
    font-style: italic;
}

.mbnumber {
    margin-bottom: -70px;
    background: var(--bckg3);
    border: var(--border1);
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font: 14px 'Montserrat';
    font-weight: 700;
    color: var(--membercolour);
    border-radius: 100%;
    z-index: 1;
}

.mb2 {
    padding: 3px;
    border: var(--border1);
    background: var(--bckg4);
}

.mbavatar {
    outline: var(--border1);
    border: 1px solid #fff;
}

.mb3 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: var(--border1);
    border-top: 0;
    background: var(--bckg3);
    padding: 5px 5px 0;
    align-self:stretch;
}

.mbfield {
    margin-bottom: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: stretch;
}

.mbfield em {
    background: var(--bckg1);
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: var(--border1);
    border-radius: 5px;
    text-shadow: var(--shadow-w);
    margin-right: 5px;
    flex-shrink: 0;
    color: var(--membercolour);
}

.mbfield span {
    background:var(--bckg2);
    border: var(--border1);
    height: 30px;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #555;
    font: 11px 'Roboto';
    font-weight: 700;
    flex-grow: 1;
}

.mb4 {
    text-align: center;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 10px;
    flex-grow:1;
    align-self:stretch;
}
.mb4 a {
    background: var(--bckg5);
    border-radius: 5px;
    flex-grow:1;
    margin-right:10px;
    align-self:stretch;
    border:var(--border1);
    display: flex;
    justify-content: center;
    align-items: center;
    padding:5px;
    color:var(--membercolour);
}
.mb4 a img {
    display:none;
}
.mb4 a:last-of-type {
    margin-right:0;
}
</style>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"/>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;1,700&family=Roboto:wght@400;700&display=swap" rel="stylesheet"/>
<div id="memberlist">
<h4>
<h>{PAGE_TITLE}</h>
<!-- BEGIN switch_pagination -->
<div class="pagination">{PAGINATION}</div>
<!-- END switch_pagination -->
</h4>
<form action="{S_MODE_ACTION}" method="get">
<div class="mbform">
{L_USER_SELECT}
<input type="text" class="inputbox tiny" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" />
{L_SELECT_SORT_METHOD}
{S_MODE_SELECT}
{L_ORDER}
{S_ORDER_SELECT}
<input class="button2" type="submit" name="submit" value="{L_SUBMIT}" />
</div>
</form>
<div class="mbbody">
<!-- BEGIN memberrow -->
<div class="member">
<div class="mb1">
<div class="mbnumber">{memberrow.ROW_NUMBER}</div>
<div class="mbname">{memberrow.USERNAME}</div>
</div>
<div class="mb2">
<div class="mbavatar">{memberrow.AVATAR_IMG}</div>
</div>
<div class="mb3">
<div class="mbfield"><em class="fas fa-calendar-alt" title="{L_JOINED}"></em><span>{memberrow.JOINED}</span></div>
<div class="mbfield"><em class="fas fa-power-off" title="{L_VISITED}"></em><span>{memberrow.LASTVISIT}</span></div>
<div class="mbfield"><em class="fas fa-comments" title="{L_POSTS}"></em><span>{memberrow.POSTS} MENSAJES</span></div>
<div class="mbfield"><em class="fas fa-heart" title="{L_INTERESTS}"></em><span>{memberrow.INTERESTS}</span></div>
</div>
<div class="mb4">
<a href="{memberrow.U_VIEWPROFILE}"><em class="fas fa-user"></em></a>
{memberrow.PM_IMG}
{memberrow.WWW_IMG}
</div>
</div>
<!-- END memberrow -->
</div>
</div>