Template:Sandbox/Aurelain/HeroClassSkills/styles.css

.hcs-box {
    margin: 1em;
    width: max-content;
}

@media (max-width: 600px) {
    .hcs-box {
        width: 100%;
        margin: 1em 0 0 0;
    }
}

.hcs-box table {
    width: 100%;
}

.hcs-box th {
    text-align: center;
    padding-right: 0.5em !important; /* suppress the space allotted to the sortable markers */
}

.hcs-box td {
    text-align: right;
}

.hcs-box td:first-child {
    text-align: left;
}

.hcs-box tr > *:nth-child(3),
.hcs-box tr > *:nth-child(4),
.hcs-box tr > *:nth-child(5) {
    font-style: italic;
    opacity: 0.5;
}


/* FACTION COLORS */
.hcs-box.faction-human .band {
    background-color: #8b7e47;
    border-top: solid 1px #bcb096;
}

.hcs-box.faction-human .band td {
    color: #fff;
}

.hcs-box.faction-undead .band {
    background-color: #122c29;
}

.hcs-box.faction-nature .band {
    background-color: #3d0c21;
}

.hcs-box.faction-demon .band {
    background-color: #400f08;
}

.hcs-box.faction-unfrozen .band {
    background-color: #1f3756;
}

.hcs-box.faction-dungeon .band {
    background-color: #2d143c;
}

.hcs-box.faction-neutral .band {
    background-color: #3e3e3e;
}