.bnf-add {
    background-color: #ddddff;
}

.bnf-add:after {
    content: '+';
    vertical-align: super;
    font-size: 1rem;
    font-family: 'Charter-Racket', serif;
}

.bnf-sub {
    background-color: #ffdddd;
}

.bnf-sub:after {
    content: '–';
    vertical-align: super;
    font-size: 1rem;
    font-family: 'Charter-Racket', serif;
}

div.tab-frame input {
    display: none;
}

div.tab-frame label {
    display: block;
    float: left;
    padding: 5px 10px;
    margin: 0 5px 0 0;
    cursor: pointer;
    color: #07A;
    background: rgba(80, 80, 80, .1);
}

div.tab-frame label:hover {
    color: #07A;
    text-decoration-line: underline;
}

div.tab-frame input:checked + label {
    cursor:default;
    box-shadow: 0px -1px 2px gray;
    background: unset;
}

div.tab-frame table.tab {
    display: none;
    padding: 5px 10px;
    clear: left;
    border: 1px gray;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

/* statically support up to 9 */
div.tab-frame input:nth-of-type(1):checked ~ .tab:nth-of-type(1),
div.tab-frame input:nth-of-type(2):checked ~ .tab:nth-of-type(2),
div.tab-frame input:nth-of-type(3):checked ~ .tab:nth-of-type(3),
div.tab-frame input:nth-of-type(4):checked ~ .tab:nth-of-type(4),
div.tab-frame input:nth-of-type(5):checked ~ .tab:nth-of-type(5),
div.tab-frame input:nth-of-type(6):checked ~ .tab:nth-of-type(6),
div.tab-frame input:nth-of-type(7):checked ~ .tab:nth-of-type(7),
div.tab-frame input:nth-of-type(8):checked ~ .tab:nth-of-type(8),
div.tab-frame input:nth-of-type(9):checked ~ .tab:nth-of-type(9){ display:block; }