Template:Sandbox/Aurelain/HeroClassSkills/styles.css

.hcs-box {
    margin: 1em;
    width: max-content;
    display: flow-root; /* to play nice with the floating infobox */
}

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

@media (max-width: 950px) {
    .hcs-box td span:nth-child(2) a {
        display: none;
    }
}

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

.hcs-box .toggle {
    display: inline-block;
    padding: 4px 8px;
    border: 1px solid #45494e;
    color: dodgerblue;
    border-radius: 4px;
    user-select: none;
}

.hcs-box .toggle:hover {
    background: #2a3347;
}

.hcs-box .toggle:active {
    background: #101622;
}

.hcs-box table {
    width: 100%;
    margin-top: 8px;
}

.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;
    color: #fff;
    padding: 0 4px;
}

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

@media (max-width: 950px) {
    .hcs-box td:first-child {
        text-align: center;
    }
}

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

.hcs-box .separator:first-child,
.hcs-box .separator:last-child,
.hcs-box .separator + .separator {
    display: none;
}

.hcs-box .separator {
    height: 2px;
    background: #c8b36c !important;
}


/* 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;
}