:root {
    --main-colour: #c7d0c7;
    --background-colour: #232;
    --href-colour: #d0d0e0;
    --href-visited-colour: #b0b0c0;
    --gold-colour: #551;
    --th-header-background-colour: #506050;
    --th-background-colour: #343;
    --cell-border-colour: #010;
    --tbody-background-colour: #405040;
    --explain-background-colour: #556555;
    --legend-header-background-colour: #273727;
    --legend-cell-background-colour: #2c3c2c;
    --input-focus-background-colour: #708070;
}

[data-theme="orange"] {
    --main-colour: #e7c7a0;
    --background-colour: #432;
    --href-colour: #e0d0d0;
    --href-visited-colour: #d0c0b0;
    --gold-colour: #551;
    --th-header-background-colour: #706050;
    --th-background-colour: #643;
    --cell-border-colour: #310;
    --tbody-background-colour: #705040;
    --explain-background-colour: #856555;
    --legend-header-background-colour: #573727;
    --legend-cell-background-colour: #5c3c2c;
    --input-focus-background-colour: #a08070;
}

body {  font-family: Roboto, Helvetica, sans-serif; font-size: 10pt; background-color: var(--background-colour); padding: 10px 20px; color: var(--main-colour); }
body a { color: var(--href-colour); }
body a:visited { color: var(--href-visited-colour); }
/* .gold { background-color: var(--gold-colour) !important; } */
table.main tr.header th.uber-title { text-transform: full-width; font-variant: small-caps; background-color: var(--th-header-background-colour); height: 2em; line-height: 2em;}
table.main, table.legend { border-collapse: collapse; }
table.main th { background-color: var(--th-background-colour); padding-left: 4px; }
table.main th, td { border: 1px solid var(--cell-border-colour); text-align: center; }
table.main td { position: relative; }
table.main tbody th { text-align: left; width: 160px; }
table.main tr.header th { width: 120px; padding: 4px 2px; font-size: 11pt; }
table.main tr.header th.category { width: 120px; }
table.main tbody.builds tr:nth-child(even) { background-color: var(--tbody-background-colour); }
table.main tr.explain td { font-size: 8pt; font-style: italic; padding: 3px 5px; }
table.main tr.explain td.legend { font-style: normal; padding-left: 10px; text-align: center; margin-left: auto; margin-right: auto; }
table.main tr.explain td.category-explanation { background-color: var(--explain-background-colour); }
table.main td.important-element { opacity: 0.01; }
table.legend tbody th, table.legend tbody td { padding: 3px 8px; }
table.legend tbody th { width: auto; background-color: var(--legend-header-background-colour); text-align: center; }
table.legend tbody td { background-color: var(--legend-cell-background-colour); font-style: normal !important; text-align: left; }
.biweave:after { content: " ≈"; }
.prismatic:after { content: " ⎔"; }
.noshield:after { content: " ∅"; }
input.filter { margin: 0 4px; background:url(../img/icons8-search-in-list-16.png) no-repeat scroll; padding-left: 20px; border: 0; border-bottom: 1px solid black; }
input.filter:focus { outline: none; background-color: var(--input-focus-background-colour); }
div.wrapper { height: 100vh; }
table.theme { border-collapse: collapse; float: right; margin-right: 8px;}
table.theme th, table.theme td { padding: 2px 3px; text-transform: none; font-variant: none; border: 0; font-size: 8pt;}
table.commit { border-collapse: collapse; float: left; margin-left: 8px; }
table.commit td { padding: 2px 3px; text-transform: none; font-variant: none; border: 0; font-size: 8pt; cursor: help; }