.scroll {
    color:#fff;
    font-size:.8em;

    position:relative;
    height:40px;
    width:200px;
    display:block;
    overflow:visible;
    overflow:hidden;
}

.scroll ul {
    position:absolute;
    margin:0;
    padding:0;
    list-style:none;
    background-color:#000;
    background-color:transparent;
}

.scroll ul li {
    height:40px;
    width:150px;
    padding-left:25px;
    border:1px solid #000;
    border:0;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.scroll ul li a {
    color:#fff;
    border:1px solid #000;
    border:0;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


    .scroll li.rank1:before {
        content:'1';
        width:15px;
        position:absolute;
        text-align:center;
        background-color:#34495e;
        border:0;
        padding:2px 0 1px 0;
        margin:12px 0 0 -25px;
        /*-webkit-border-radius:1em;
        -moz-border-radius:1em;
        border-radius:1em;*/
    }

    .scroll li.rank2:before {
        content:'2';
        width:15px;
        position:absolute;
        text-align:center;
        background-color:#34495e;
        border:0;
        padding:2px 0 1px 0;
        margin:12px 0 0 -25px;
        /*-webkit-border-radius:1em;
        -moz-border-radius:1em;
        border-radius:1em;*/
    }

    .scroll li.rank3:before {
        content:'3';
        width:15px;
        position:absolute;
        text-align:center;
        background-color:#34495e;
        border:0;
        padding:2px 0 1px 0;
        margin:12px 0 0 -25px;
        /*-webkit-border-radius:1em;
        -moz-border-radius:1em;
        border-radius:1em;*/
    }

    .scroll li.rank4:before {
        content:'4';
        width:15px;
        position:absolute;
        text-align:center;
        background-color:#34495e;
        border:0;
        padding:2px 0 1px 0;
        margin:12px 0 0 -25px;
        /*-webkit-border-radius:1em;
        -moz-border-radius:1em;
        border-radius:1em;*/
    }

    .scroll li.rank5:before {
        content:'5';
        width:15px;
        position:absolute;
        text-align:center;
        background-color:#34495e;
        border:0;
        padding:2px 0 1px 0;
        margin:12px 0 0 -25px;
        /*-webkit-border-radius:1em;
        -moz-border-radius:1em;
        border-radius:1em;*/
    }

    .scroll li.rank6:before {
        content:'6';
        width:15px;
        position:absolute;
        text-align:center;
        background-color:#34495e;
        border:0;
        padding:2px 0 1px 0;
        margin:12px 0 0 -25px;
        /*-webkit-border-radius:1em;
        -moz-border-radius:1em;
        border-radius:1em;*/
    }

    .scroll li.rank7:before {
        content:'7';
        width:15px;
        position:absolute;
        text-align:center;
        background-color:#34495e;
        border:0;
        padding:2px 0 1px 0;
        margin:12px 0 0 -25px;
        /*-webkit-border-radius:1em;
        -moz-border-radius:1em;
        border-radius:1em;*/
    }

    .scroll li.rank8:before {
        content:'8';
        width:15px;
        position:absolute;
        text-align:center;
        background-color:#34495e;
        border:0;
        padding:2px 0 1px 0;
        margin:12px 0 0 -25px;
        /*-webkit-border-radius:1em;
        -moz-border-radius:1em;
        border-radius:1em;*/
    }

    .scroll li.rank9:before {
        content:'9';
        width:15px;
        position:absolute;
        text-align:center;
        background-color:#34495e;
        border:0;
        padding:2px 0 1px 0;
        margin:12px 0 0 -25px;
        /*-webkit-border-radius:1em;
        -moz-border-radius:1em;
        border-radius:1em;*/
    }

    .scroll li.rank10:before {
        content:'10';
        width:15px;
        position:absolute;
        text-align:center;
        background-color:#34495e;
        border:0;
        padding:2px 0 1px 0;
        margin:12px 0 0 -25px;
        /*-webkit-border-radius:1em;
        -moz-border-radius:1em;
        border-radius:1em;*/
    }

.scroll ul li .arrow {
    position:absolute;
    margin-top:15px;
    right:0;
}

.scroll ul li .arrow.anew:before {
    font-family:FontAwesome;
    content:"\f072";
    margin-right:5px;
}

.scroll ul li .arrow.up:before {
    font-family:FontAwesome;
    content:"\f062";
    margin-right:5px;
}

.scroll ul li .arrow.down:before {
    font-family:FontAwesome;
    content:"\f063";
    margin-right:5px;
}

.scroll ul li .arrow.nogap:before {
    font-family:FontAwesome;
    content:"\f068";
    margin-right:5px;
}

.popular-hover {
    color:#fff;
    font-size:.8em;

    position:absolute;
    height:220px;
    width:200px;
    display:block;
    background-color:#fff;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    border:2px solid #aaa;
    /*box-shadow:1px 1px 10px #444;*/

    left:0;
    top:0;

    z-index:999;

    display:none;
}

.popular-hover ul {
    position:absolute;
    margin:10px 0 0 0;
    padding:0 0 0 10px;
    list-style:none;
}

.popular-hover ul li {
    height:20px;
    width:170px;
    padding:0 0 0 25px;
    border:0;
    margin:0;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.popular-hover ul li:hover {
    background-color:#efefef;
}

.popular-hover ul li a:visited,
.popular-hover ul li a:hover,
.popular-hover ul li a:link,
.popular-hover ul li a:active {
    color:#000;
    margin:0;
    padding:0;
    line-height:20px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


    .popular-hover li.rank1:before {
        content:'1';
        width:15px;
        position:absolute;
        text-align:center;
        background-color:#34495e;
        border:0;
        padding:2px 0 1px 0;
        margin:2px 0 0 -25px;
        /*-webkit-border-radius:1em;
        -moz-border-radius:1em;
        border-radius:1em;*/
    }

    .popular-hover li.rank2:before {
        content:'2';
        width:15px;
        position:absolute;
        text-align:center;
        background-color:#34495e;
        border:0;
        padding:2px 0 1px 0;
        margin:2px 0 0 -25px;
        /*-webkit-border-radius:1em;
        -moz-border-radius:1em;
        border-radius:1em;*/
    }

    .popular-hover li.rank3:before {
        content:'3';
        width:15px;
        position:absolute;
        text-align:center;
        background-color:#34495e;
        border:0;
        padding:2px 0 1px 0;
        margin:2px 0 0 -25px;
        /*-webkit-border-radius:1em;
        -moz-border-radius:1em;
        border-radius:1em;*/
    }

    .popular-hover li.rank4:before {
        content:'4';
        width:15px;
        position:absolute;
        text-align:center;
        background-color:#34495e;
        border:0;
        padding:2px 0 1px 0;
        margin:2px 0 0 -25px;
        /*-webkit-border-radius:1em;
        -moz-border-radius:1em;
        border-radius:1em;*/
    }

    .popular-hover li.rank5:before {
        content:'5';
        width:15px;
        position:absolute;
        text-align:center;
        background-color:#34495e;
        border:0;
        padding:2px 0 1px 0;
        margin:2px 0 0 -25px;
        /*-webkit-border-radius:1em;
        -moz-border-radius:1em;
        border-radius:1em;*/
    }

    .popular-hover li.rank6:before {
        content:'6';
        width:15px;
        position:absolute;
        text-align:center;
        background-color:#34495e;
        border:0;
        padding:2px 0 1px 0;
        margin:2px 0 0 -25px;
        /*-webkit-border-radius:1em;
        -moz-border-radius:1em;
        border-radius:1em;*/
    }

    .popular-hover li.rank7:before {
        content:'7';
        width:15px;
        position:absolute;
        text-align:center;
        background-color:#34495e;
        border:0;
        padding:2px 0 1px 0;
        margin:2px 0 0 -25px;
        /*-webkit-border-radius:1em;
        -moz-border-radius:1em;
        border-radius:1em;*/
    }

    .popular-hover li.rank8:before {
        content:'8';
        width:15px;
        position:absolute;
        text-align:center;
        background-color:#34495e;
        border:0;
        padding:2px 0 1px 0;
        margin:2px 0 0 -25px;
        /*-webkit-border-radius:1em;
        -moz-border-radius:1em;
        border-radius:1em;*/
    }

    .popular-hover li.rank9:before {
        content:'9';
        width:15px;
        position:absolute;
        text-align:center;
        background-color:#34495e;
        border:0;
        padding:2px 0 1px 0;
        margin:2px 0 0 -25px;
        /*-webkit-border-radius:1em;
        -moz-border-radius:1em;
        border-radius:1em;*/
    }

    .popular-hover li.rank10:before {
        content:'10';
        width:15px;
        position:absolute;
        text-align:center;
        background-color:#34495e;
        border:0;
        padding:2px 0 1px 0;
        margin:2px 0 0 -25px;
        /*-webkit-border-radius:1em;
        -moz-border-radius:1em;
        border-radius:1em;*/
    }

.popular-hover ul li .arrow {
    color:#000;
    position:absolute;
    margin-top:5px;
    right:5px;
    width:18px;
}

.popular-hover ul li .arrow.anew:before {
    font-family:FontAwesome;
    content:"\f072";
    margin-right:5px;
    position:absolute;
    right:20px;
}

.popular-hover ul li .arrow.up:before {
    font-family:FontAwesome;
    content:"\f062";
    position:absolute;
    right:20px;
}

.popular-hover ul li .arrow.down:before {
    font-family:FontAwesome;
    content:"\f063";
    position:absolute;
    right:20px;
}

.popular-hover ul li .arrow.nogap:before {
    font-family:FontAwesome;
    content:"\f068";
    position:absolute;
    right:20px;
}