div.alphabet{
    position: relative;

    clear: both;

    margin: 1em 0;

    text-align: center;
}

@media screen and (max-width:640px){
    div.alphabet{
        text-align: center;
    }
}

div.alphabet ul{
    display: inline-block;

    margin: 0;
    padding: 0;

    list-style: none;
}

div.alphabet li{
    display: inline-block;
}

div.alphabet li:first-child a{
    margin-right: 10px;
    padding: 5px 10px;

    color: #888;
}

div.alphabet li:first-child a.active{
    color: #0bf !important;
    border: 1px solid transparent;
    background-color: transparent;
}

div.alphabet a{
    font-family: 'fira_sansmedium', Arial, sans-serif;

    display: inline-block;

    box-sizing: content-box;
    min-width: 1.3em;
    padding: .2em .1em;

    cursor: pointer;
    text-align: center;
    text-decoration: none;

    color: #333 !important;
    border: 1px solid transparent;
    border-radius: 2px;
}

div.alphabet a:hover{
    -webkit-transition: 0;
       -moz-transition: 0;
        -ms-transition: 0;
         -o-transition: 0;
            transition: 0;

    color: #fff !important;
    border: 1px solid #0bf;
    background-color: #0bf;
}

div.alphabet a:active{
    outline: none;
    background-color: #0bf;
}

div.alphabet a.empty{
    color: #888 !important;
}

div.alphabet a.active,
div.alphabet a.active.empty{
    color: #fff !important;
    border: 1px solid #0bf;
    background-color: #0bf;
}

div.alphabet .alphabet-info-display{
    margin-right: .5em;
}

div.alphabet div.alphabet-info{
    position: absolute;
    z-index: 9999;

    margin-top: .2em;
    padding: .2em .4em;

    text-align: center;

    opacity: 0;
    color: #fff;
    border: 1px solid #0bf;
    border-radius: 2px;
    background-color: #0bf;
}

tr.alphabet-group,
tr.alphabet-group:hover{
    background-color: rgba(0,0,0,.15) !important;
}