/* Override Bootstrap .hidden class when applied to html by Modernizr */
/* Modernizr adds 'hidden' class to html when browser supports HTML5 hidden attribute */
/* Bootstrap's .hidden { display: none !important } conflicts with this */
html.hidden {
    display: block !important;
    visibility: visible !important;
}

body {
    padding-bottom: 40px;
    background-color: #1a1a1a;
}

/* Custom container */
.container-narrow {
    margin: 0 auto;
    max-width: 960px;
}

/* Header */
#header {
    position: relative;
    padding: 55px 0 10px 0;
}

#logo {
    font: normal bold 300% "Arial Black", "Helvetica Black", Gadget, sans-serif;
    font-size: 60px;
    letter-spacing: -5px;
    min-height: 60px;
}

#logo a {
    color: #e0e0e0;
    text-decoration: none;
}

#logo .alt { color: #bf1616; }

#logo a:hover span.alt{ color:#d7f205; }

#user-links {
    color: #e0e0e0;
    position: absolute;
    right: 0;
    bottom: 23px;
}

#logged-in {
    margin-right: 8px;
}


/* Content */
#content {
    background: #fff;
    padding: 20px 20px;
}

.users-form {
    max-width: 300px;
}

/* Leaderboard */
.glyphicon-ok {
    color: #5cb85c;
}

.glyphicon-remove {
    color: #d9534f;
}

.glyphicon-star {
    color: #f0ad4e;
}

/* Bootstrap Icons - Leaderboard */
.bi.bi-check-lg {
    color: #5cb85c;
}

.bi.bi-x-lg {
    color: #d9534f;
}

.bi.bi-star-fill {
    color: #f0ad4e;
}

.bi.bi-star {
    color: #ccc;
}

/* Favorite toggle button on leaderboard */
.favorite-toggle {
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    line-height: 1;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
}

.favorite-toggle:hover .bi-star {
    color: #f0ad4e;
}

.favorite-toggle:hover .bi-star-fill {
    color: #d4940e;
}

.favorite-toggle:focus {
    outline: 2px solid #f0ad4e;
    outline-offset: 2px;
    border-radius: 2px;
}

#leaderboard {
    padding:2px;
}

table th, table td {
    overflow: hidden;
    text-align: center;
}

#leaderboard .username {
    text-align: left;
}

.right-caret {
    border-bottom: 4px solid transparent;
    border-top: 4px solid transparent;
    border-left: 4px solid #000000;
    display: inline-block;
    height: 0;
    opacity: 0.3;
    vertical-align: top;
    width: 0;
}

#leaderboard-header {
    display: inline-block;
    width: 100%;
}

#page-header h1 {
    margin-top: 0px;
}

#leaderboard-header h4 {
    margin-top: -50px;
    text-align: left;
}

#leaderboard-legend {
    float: left;
}

#recent-comments {
    float: right;
}

#recent-comments .recent-comment {
    width: auto;
}

/* Comments */
.comment-user {
    font-weight: bold;
    display: inline-block;
    margin-right: 7px;
}

.comment-time {
    font-size: 10px;
    color: grey;
    display: inline-block;
    margin-right: 7px;
}

#recent-comments .comment-body {
    display: inline-block;
}

/* Footer */
#footer {
    background: #cdcdcd;
    padding: 1em 0;
    text-align: center;
}