Nested Tabs

I'm having an issue with some nested tabs. The following renders the outer tabs, and allows you to select them as you would expect, the interior tabs show up, with no formatting (they look like normal radio buttons), but selecting them changes nothing...  Here's the meat of what I'm talking about (I think): html [code] <input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" title="Outer1" checked="checked" /> <input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2" title="Outer2" /> <input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3" title="Outer3" /> <input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4" title="Outer4" /> <div class="sheet-tab-content sheet-tab1"> <input type="radio" name="attr_tab2" class="character-tab character-tab1" value="1" title="Inner1" checked="checked" /> <input type="radio" name="attr_tab2" class="character-tab character-tab2" value="2" title="Inner2" /> <input type="radio" name="attr_tab2" class="character-tab character-tab3" value="3" title="Inner3" /> <input type="radio" name="attr_tab2" class="character-tab character-tab4" value="4" title="Inner4" /> <input type="radio" name="attr_tab2" class="character-tab character-tab5" value="5" title="Inner5" /> <div class="character-tab-content character-tab1">Stuff 1</div> <div class="character-tab-content character-tab2">Stuff 2</div> <div class="character-tab-content character-tab3">Stuff 3</div> <div class="character-tab-content character-tab4">Stuff 4</div> <div class="character-tab-content character-tab5">Stuff 5</div> <div> <div class="sheet-tab-content sheet-tab2">Outer2</div> <div class="sheet-tab-content sheet-tab3">Outer3</div> <div class="sheet-tab-content sheet-tab4">Outer4</div> [/code] css [code] /* Sheet tabs */ div.sheet-tab-content { display: none; } input.sheet-tab1:checked ~ div.sheet-tab1, input.sheet-tab2:checked ~ div.sheet-tab2, input.sheet-tab3:checked ~ div.sheet-tab3, input.sheet-tab4:checked ~ div.sheet-tab4, input.sheet-tab5:checked ~ div.sheet-tab5, input.sheet-tab6:checked ~ div.sheet-tab6, input.sheet-tab7:checked ~ div.sheet-tab7, { display: block; } input.sheet-tab { color: #E0E0E0; } input.sheet-tab::before { content: attr(title); } input.sheet-tab:checked::before { background-size: 100%; } div.character-tab-content { display: none; } input.character-tab1:checked ~ div.character-tab1, input.character-tab2:checked ~ div.character-tab2, input.character-tab3:checked ~ div.character-tab3, input.character-tab4:checked ~ div.character-tab4, input.character-tab5:checked ~ div.character-tab5, { display: block; } input.character-tab { color: #E0E0E0; } input.character-tab::before { content: attr(title); } input.character-tab:checked::before { background-size: 100%; } div.character-tab-content { margin: 2px 0 0 5px; padding: 5px; } div.sheet-tab-content { margin: 2px 0 0 5px; padding: 5px; } [/code] Thoughts?

You need to put "sheet-" before all your class names in the CSS (and optionally, in the HTML to match the CSS and avoid confusion) From the wiki documentation : Note that by default, any HTML classes defined in your HTML layout which don't begin with "attr_", "roll_" or "repeating_" will be prefixed with "sheet-". So for example, if you want to style some of your input tags to be shorter than others and you define the HTML as "<input class='shortfield'>", when processing your layout it will be changed to "<input class='sheet-shortfield'>". So basically, you should probably prefix your classes in your HTML and CSS with "sheet-" to avoid confusion.

...well I feel silly. Thanks!