.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;
    cursor:pointer
}

div.tab-frame input:checked + label{
    background:#ddddff;
    cursor:default
}

div.tab-frame table.tab {
    display:none;
    padding:5px 10px;
    clear:left
}

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