@import (reference) "global.less";

/* ------------------------------------------------------------------------ */
/* Statsbar */

#statsbar {
    .left-align;
    .top-align;
    width: 25%;
    padding: 0.5em;
    padding-left: 1em;
    display: table-cell;
    .small;
    h2 {
        .center-align;
        font-size: 1.5em;
    }
    .more-link {
        .center-align;
        .really-small;
        padding: 0 0 1em 0;
    }
}

#content-container {
    width: 74%;
    &.left-statsbar {
        padding-right: 1em;
    }
    &.right-statsbar {
        padding-left: 1em;
    }
}

#rounded-corner {
    width: 1%;
    display: table-cell;
    &.left-statsbar {
        border-top-left-radius: 20px;
    }
    &.right-statsbar {
        border-top-right-radius: 20px;
    }
}

@media only screen and (max-width: 768px) {
    #content-container {
        &.left-statsbar, &.right-statsbar {
            .full-width;
        }
    }

    #statsbar {
        display: block;
        .full-width;
        &.left-statsbar {
            display: block;
            order: 2;
        }
    }

    #rounded-corner {
        display: none;
    }
}

/* ------------------------------------------------------------------------ */
/* Statsbar components */

#statsbar #completed-titles,
#statsbar #recent-titles {
    .plain-list;
    li {
        margin-top: 1em;
        line-height: 1.5em;
    }
    .title-listing {
        .really-small;
    }
}

#completed-projects {
    .center-align;
    table {
        .no-border;
        .no-cellpadding;
        .no-cellspacing;
        .full-width;
        .month {
            width: 60%;
            .right-align;
        }
        .count {
            width: 40%;
            .left-align;
        }
    }
}

#birthdays {
    .center-align;
    .plain-list;
}

#tally-stats {
    margin-top: 1em;
    #server-time {
        .center-align;
        padding: 0;
    }
    .this-user {
        .bold;
    }
}

#key-help-documents, #teams-nav {
    .plain-list;
    li {
        margin-top: 5px;
    }
}

#about-dp {
    .small;
}
