My Little Pony: Roleplaying is Magic, Season 4 edition

css

.charsheet {
    background-image: url("https://sites.google.com/site/roleplayingismagichome/_/rsrc/1385907608270/config/WebsiteBackground_Rough.png.1385907608112.png");
    height: 80%;
    width: 100%;
}

.charsheet .sheet-everything {
    height: 90%;
    margin: 10px 40px;
    width: 80%;
}

.charsheet .sheet-banner {
    display: inline-block;
    height: 50px;
    width: 100%;
}
.charsheet .sheet-banner img.sheet-mlprimLogo {
    float: right;
    width: 20%;
}

.charsheet .sheet-tabsContainer {
    height: 640px;
    position: relative;
    width: 640px;
}
.charsheet .sheet-tab {
    float: left;
    width: 16%;
    height: 32px;
}
.charsheet .sheet-tab .sheet-tabInput {
    position: absolute;
    top: -9999px;
}
.charsheet .sheet-tab > label {
    background: #82c;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    height: 22px;
    margin: 0;
    padding: 10px 0 0 0;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}
.charsheet .sheet-tab > label {
    cursor: pointer;
}
.charsheet .sheet-tab > input:checked + label {
    background: #a5f;
}
.charsheet .sheet-tab .sheet-tabPanel {
    background: #404;
    border: 4px solid #a5f;
    border-radius: 10px;
    color: #fff;
    display: none;
    height: 60%;
    left: -32px;
    max-height: 640px;
    overflow-y: auto;   
    padding: 20px;
    position: absolute;
    top: 32px;
    width: 100%;
}
.charsheet .sheet-tab input:checked + label + .sheet-tabPanel {
    display: inline-block;   
}


.charsheet button {
    background: #a5f;
    border-color: #82c;
    color: #fff; 
    padding: 4px;
}
.charsheet input,select,textarea {
    background: #000;   
    border: none;
    color: #0ff;
}
.charsheet input[type=number]::-webkit-inner-spin-button, 
.charsheet input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
.charsheet textarea {
    height: auto;
    resize: none;
    max-width: 90%;
}

.charsheet .sheet-fraction {
    display: inline;
    font-size: 1.2em;
    font-weight: bold;
    padding-left: 2px;
    padding-right: 2px;
    text-align: center;
}

.charsheet h2 {
    border-bottom: 1px solid #a5f;
    color: #fff;
    line-height: normal;
    margin: 0 0 5px 0;
    width: 100%;   
}

.charsheet .sheet-hLayout > div {
    display: inline;
}
.charsheet .sheet-vLayout > div {
    display: block;   
}

.charsheet .sheet-field label {
    color: white;   
    display: inline-block;
    width: 80px;
}

.charsheet .sheet-column {
    display: inline-block;   
}

.charsheet #sheet-mainPanel input[type=text],select {
    max-width: 150px;   
}
.charsheet #sheet-mainPanel .sheet-attrBox {
    margin: auto;
    width: 150px;   
}
.charsheet #sheet-mainPanel .sheet-attrBox label {
    text-align: right;
    width: 50%;   
}

.charsheet #sheet-skillsPanel .repitem {
    margin-bottom: 5px;   
}
.charsheet #sheet-edgesPanel .repitem {
    margin-bottom: 5px;   
}

.charsheet .sheet-rankBox {
    border: 1px solid #a5f;
    display: inline-block;
    position: relative;
    height: 16px;
    text-align: center;
    width: 16px;
}
.charsheet .sheet-rankBox input{
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.charsheet .sheet-rankBox input + div{
    background: #000;
    color: #a5f;
    height: 100%;
    width: 100%;
}
.charsheet .sheet-rankBox input:checked + div{
    background: #a5f;
    color: #000;
}

.charsheet #sheet-magicPanel .sheet-spellBody{
    border-bottom: 1px solid #a5f;
    margin-bottom: 16px;
}

html

<div class="everything">
    <div class="banner"><div class="space"></div><img class="mlprimLogo" src="https://sites.google.com/site/roleplayingismagichome/_/rsrc/1404003237260/0-0/RiM-Logo-Redesign.png" /></div>
    <div class="tabsContainer">
    
        <div class="tab">
            <input id="sheet-mainRadio" type="radio" class="tabInput" name="tab" checked />
            <label for="sheet-mainRadio">Main</label>
            <div id="mainPanel" class="tabPanel">
                <h2>General</h2>

                <div class='column vLayout' style="width: 50%;">  
                    <div class="field">
                        <label>Name:</label>
                        <input type="text" name="attr_name">
                    </div>
                    <div class="field">
                        <label>Race:</label>
                        <input type="text" name="attr_race">
                    </div>
                    <div class="field">
                        <label>Guiding Element:</label>
                        <select name="attr_guiding_elem">
                            <option value="def">Select</option>
                            <option value="generosity">Generosity</option>
                            <option value="honesty">Honesty</option>
                            <option value="kindness">Kindness</option>
                            <option value="laughter">Laughter</option>
                            <option value="loyalty">Loyalty</option>
                            <option value="magic">Magic</option>
                        </select>
                    </div>
                    <div class="field">
                        <label>Fatal Flaw:</label>
                        <input type="text" name="attr_flaw">
                    </div>
                </div>
                <div class="column vLayout">
                    <div class="field">
                        <label>XP:</label>
                        <input type="number" name="attr_xpUnspent"><div class="fraction">/</div><input type="number" name="attr_xp">    
                    </div>
                    <div class="field">
                        <label>Fortitude:</label>
                        <input type="number" name="attr_fortitude"><div class="fraction">/</div><input type="number" name="attr_fortitude_max" disabled="tr value="0" /""ue" value="@{body}*10 + @{heart}*5 +  @{fortitudeMaxMods}"/>
                        Modifiers: <input type="number" name="attr_fortitudeMaxMods" value="0" />
                    </div>
                    <div class="field">
                        <label>Willpower:</label>
                        <input type="number" name="attr_willpower"><div class="fraction">/</div><input type="number" name="attr_willpower_max" disabled="true" value="@{mind}*10 + @{heart}*5 +  @{willpowerMaxMods}"/>    
                        Modifiers: <input type="number" name="attr_willpowerMaxMods" value="0" />
                    </div>
                    <div class="field">
                        <label>Valor:</label>
                        <input type="number" name="attr_valor"><div class="fraction">/</div><input type="number" name="attr_valor_max" disabled="true" value="@{heart} +  @{valorMaxMods}"/>    
                        Modifiers: <input type="number" name="attr_valorMaxMods" value="0" />
                    </div>            
                </div>
                
                <h2>Attributes</h2>
                <table width="100%">
                    <tr>
                        <td>
                            <div class="attrBox field">
                                <label>MIND</label>
                                <input type="number" name="attr_mind">
                            </div>
                        </td>
                        <td>
                            <div class="attrBox field">
                                <label>BODY</label>
                                <input type="number" name="attr_body">
                            </div>
                        </td>
                        <td>
                            <div class="attrBox field">
                                <label>HEART</label>
                                <input type="number" name="attr_heart">
                            </div>
                        </td>
                    </tr>
                </table>
                
                <h2>Description</h2>
                <textarea rows="3" name="attr_description"></textarea>
            </div>
        </div>
        
        
        
        
        
        <div class="tab">
            <input id="skillsRadio" type="radio" class="tabInput" name="tab" />
            <label for="skillsRadio">Skills</label>
            <div id="skillsPanel" class="tabPanel scrollingY">
                <h2>MIND Skills</h2>
                <fieldset name="skillsMind" class="repeating_skillsMind">
                    Name: <input type="text" name="attr_skillM">
                    Skill Training: <div class="rankBox trained" title="Trained">
                        <input type="checkbox" name="attr_skillMT" value="1">
                        <div>T</div>
                    </div>
                    <div class="rankBox improved" title="Improved">
                        <input type="checkbox" name="attr_skillMI" value="1">
                        <div>I</div>
                    </div>
                    <div class="rankBox greater" title="Greater">
                        <input type="checkbox" name="attr_skillMG" value="1">
                        <div>G</div>
                    </div>
                    Modifier: <input class="skillMod" type="number" name="attr_skillMMisc" value="0" title="Misc. Modifier"/>
                </fieldset>
                
                <h2>BODY Skills</h2>
                <fieldset name="skillsBody" class="repeating_skillsBody">
                    Name: <input type="text" name="attr_skillB">
                    Skill Training: <div class="rankBox trained" title="Trained">
                        <input type="checkbox" name="attr_skillBT" value="1">
                        <div>T</div>
                    </div>
                    <div class="rankBox improved" title="Improved">
                        <input type="checkbox" name="attr_skillBI value="1"">
                        <div>I</div>
                    </div>
                    <div class="rankBox greater" title="Greater">
                        <input type="checkbox" name="attr_skillBG" value="1">
                        <div>G</div>
                    </div>
                    Modifier: <input class="skillMod" type="number" name="attr_skillBMisc" value="0" title="Misc. Modifier"/>
                </fieldset>
                
                <h2>HEART Skills</h2>
                <fieldset name="skillsHeart" class="repeating_skillsHeart">
                    Name: <input type="text" name="attr_skillH">
                    Skill Training: <div class="rankBox trained" title="Trained">
                        <input type="checkbox" name="attr_skillHT" value="1">
                        <div>T</div>
                    </div>
                    <div class="rankBox improved" title="Improved">
                        <input type="checkbox" name="attr_skillHI" value="1">
                        <div>I</div>
                    </div>
                    <div class="rankBox greater" title="Greater">
                        <input type="checkbox" name="attr_skillHG" value="1">
                        <div>G</div>
                    </div>
                    Modifier: <input class="skillMod" type="number" name="attr_skillHMisc" value="0" title="Misc. Modifier"/>
                </fieldset>
            </div>
        </div>
        
        
        
        
        
        <div class="tab">
            <input id="edgesRadio" type="radio" class="tabInput" name="tab" />
            <label for="edgesRadio">Edges</label>
            <div id="edgesPanel" class="tabPanel">
                <p>
                    This section is for all edges other than Skill Training. Those go over in the Skills section.
                </p>
                <fieldset name="edges" class="repeating_edges">
                    Name: <input type="text" name="attr_edgeName" style="width: 100px;"/>
                    Effect: <input type="text" name="attr_edgeEffect" />
                    Edge rank: 
                    <div class="rankBox trained" title="Trained">
                        <input type="checkbox" name="attr_edgeT" value="1">
                        <div>T</div>
                    </div>
                    <div class="rankBox trained" title="Improved">
                        <input type="checkbox" name="attr_edgeI" value="1">
                        <div>I</div>
                    </div>
                    <div class="rankBox trained" title="Greater">
                        <input type="checkbox" name="attr_edgeG" value="1">
                        <div>G</div>
                    </div>
                </fieldset>
            </div>
        </div>
        
        
        
        
        
        <div class="tab">
            <input id="magicRadio" type="radio" class="tabInput" name="tab" />
            <label for="magicRadio">Magic</label>
            <div id="magicPanel" class="tabPanel">
                <fieldset name="spells" class="repeating_spells">
                    <div class="panel">
                        <div style="display: inline-block;">
                            <div class="rankBox" title="Prepared?">
                                <input type="checkbox" name="attr_spellPrepared"/>
                                <div>P</div>
                            </div>
                        </div>
                        <div style="display: inline-block; vertical-align: text-top; width: 90%;">
                            <h2>
                                <input type="text" name="attr_spellName" placeholder="Spell name"/> 
                                Lv. <input type="number" name="attr_spellLevel" disabled="true" 
                                        value="(@{spellTarget} + @{spellRange} + @{spellDuration} + @{spellEffectsTotal} + @{spellSubjectsTotal})"/>
                            </h2>
                            <div class="spellBody">
                                Target: <select name="attr_spellTarget" style="width: 100px;">
                                        <option value=1>Individual</option>
                                        <option value=2>Group</option>
                                        <option value=4>Area</option>
                                        <option value=8>Mass</option>
                                    </select>
                                Range: <select name="attr_spellRange" style="width: 100px;">
                                        <option value=1>Contact</option>
                                        <option value=2>Seen</option>
                                        <option value=4>Known</option>
                                        <option value=8>Unknown</option>
                                    </select>
                                Duration: <select name="attr_spellDuration" style="width: 100px;">
                                        <option value=1>Immediate</option>
                                        <option value=2>Sustained</option>
                                        <option value=4>Temporary</option>
                                        <option value=8>Persistent</option>
                                    </select> <br/>
                                <div style="display: inline-block;">
                                    Effects: 
                                </div>
                                <div style="display: inline-block; margin-bottom: 10px; vertical-align: text-top;">
                                    <input type="hidden" name="attr_spellEffectsTotal" disabled="true" 
                                        value="(@{spellAnimate} + @{spellCombine} + @{spellDeceive} + @{spellDiminish} + 
                                                @{spellForge} + @{spellModify} + @{spellReveal} + @{spellSeparate})"/>
                                    <table class="layoutTable">
                                        <tr>
                                            <td>
                                                <div class="rankBox">
                                                    <input type="checkbox" name="attr_spellAnimate" value="1"/>
                                                    <div>&nbsp;</div>
                                                </div> Animate
                                            </td>
                                            <td>
                                                <div class="rankBox">
                                                    <input type="checkbox" name="attr_spellCombine" value="1"/>
                                                    <div>&nbsp;</div>
                                                </div> Combine
                                            </td>
                                            <td>
                                                <div class="rankBox">
                                                    <input type="checkbox" name="attr_spellDeceive" value="1"/>
                                                    <div>&nbsp;</div>
                                                </div> Deceive
                                            </td>
                                            <td>
                                                <div class="rankBox">
                                                    <input type="checkbox" name="attr_spellDiminish" value="1"/>
                                                    <div>&nbsp;</div>
                                                </div> Diminish
                                            </td>
                                            <td>
                                                <div class="rankBox">
                                                    <input type="checkbox" name="attr_spellForge" value="1"/>
                                                    <div>&nbsp;</div>
                                                </div> Forge
                                            </td>
                                            <td>
                                                <div class="rankBox">
                                                    <input type="checkbox" name="attr_spellModify" value="1"/>
                                                    <div>&nbsp;</div>
                                                </div> Modify
                                            </td>
                                            <td>
                                                <div class="rankBox">
                                                    <input type="checkbox" name="attr_spellReveal" value="1"/>
                                                    <div>&nbsp;</div>
                                                </div> Reveal
                                            </td>
                                            <td>
                                                <div class="rankBox">
                                                    <input type="checkbox" name="attr_spellSeparate" value="1"/>
                                                    <div>&nbsp;</div>
                                                </div> Separate
                                            </td>
                                        </tr>
                                    </table>
                                </div> <br/>
                                <div style="display: inline-block;">
                                    Subjects: 
                                </div>
                                <div style="display: inline-block; margin-bottom: 10px; vertical-align: text-top;">
                                    <input type="hidden" name="attr_spellSubjectsTotal" disabled="true" 
                                        value="(@{spellAir} + @{spellAnimal} + @{spellBody} + @{spellConstruct} + @{spellEarth} + 
                                                @{spellEnergy} + @{spellForce} + @{spellHeat} + @{spellLight} + @{spellMagic} +
                                                @{spellMind} + @{spellPlant} + @{spellShadow} + @{spellSound} + @{spellSpace} +
                                                @{spellTime} + @{spellWater} + @{spellWeather})"/>
                                    <table class="layoutTable">
                                        <tr>
                                            <td>
                                                <div class="rankBox">
                                                    <input type="checkbox" name="attr_spellAir" value="1"/>
                                                    <div>&nbsp;</div>
                                                </div> Air
                                            </td>
                                            <td>
                                                <div class="rankBox">
                                                    <input type="checkbox" name="attr_spellAnimal" value="1"/>
                                                    <div>&nbsp;</div>
                                                </div> Animal
                                            </td>
                                            <td>
                                                <div class="rankBox">
                                                    <input type="checkbox" name="attr_spellBody" value="1"/>
                                                    <div>&nbsp;</div>
                                                </div> Body
                                            </td>
                                            <td>
                                                <div class="rankBox">
                                                    <input type="checkbox" name="attr_spellConstruct" value="1"/>
                                                    <div>&nbsp;</div>
                                                </div> Construct
                                            </td>
                                            <td>
                                                <div class="rankBox">
                                                    <input type="checkbox" name="attr_spellEarth" value="1"/>
                                                    <div>&nbsp;</div>
                                                </div> Earth
                                            </td>    
                                            <td>
                                                <div class="rankBox">
                                                    <input type="checkbox" name="attr_spellEnergy" value="1"/>
                                                    <div>&nbsp;</div>
                                                </div> Energy
                                            </td>    
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="rankBox">
                                                    <input type="checkbox" name="attr_spellForce" value="1"/>
                                                    <div>&nbsp;</div>
                                                </div> Force
                                            </td>    
                                            <td>
                                                <div class="rankBox">
                                                    <input type="checkbox" name="attr_spellHeat" value="1"/>
                                                    <div>&nbsp;</div>
                                                </div> Heat
                                            </td>
                                            <td>
                                                <div class="rankBox">
                                                    <input type="checkbox" name="attr_spellLight" value="1"/>
                                                    <div>&nbsp;</div>
                                                </div> Light
                                            </td>       
                                            <td>
                                                <div class="rankBox">
                                                    <input type="checkbox" name="attr_spellMagic" value="1"/>
                                                    <div>&nbsp;</div>
                                                </div> Magic
                                            </td>
                                            <td>
                                                <div class="rankBox">
                                                    <input type="checkbox" name="attr_spellMind" value="1"/>
                                                    <div>&nbsp;</div>
                                                </div> Mind
                                            </td>
                                            <td>
                                                <div class="rankBox">
                                                    <input type="checkbox" name="attr_spellPlant" value="1"/>
                                                    <div>&nbsp;</div>
                                                </div> Plant
                                            </td>     
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="rankBox">
                                                    <input type="checkbox" name="attr_spellShadow" value="1"/>
                                                    <div>&nbsp;</div>
                                                </div> Shadow
                                            </td>    
                                            <td>
                                                <div class="rankBox">
                                                    <input type="checkbox" name="attr_spellSound" value="1"/>
                                                    <div>&nbsp;</div>
                                                </div> Sound
                                            </td>    
                                            <td>
                                                <div class="rankBox">
                                                    <input type="checkbox" name="attr_spellSpace" value="1"/>
                                                    <div>&nbsp;</div>
                                                </div> Space
                                            </td>    
                                            <td>
                                                <div class="rankBox">
                                                    <input type="checkbox" name="attr_spellTime" value="1"/>
                                                    <div>&nbsp;</div>
                                                </div> Time
                                            </td>    
                                            <td>
                                                <div class="rankBox">
                                                    <input type="checkbox" name="attr_spellWater" value="1"/>
                                                    <div>&nbsp;</div>
                                                </div> Water
                                            </td>    
                                            <td>
                                                <div class="rankBox">
                                                    <input type="checkbox" name="attr_spellWeather" value="1"/>
                                                    <div>&nbsp;</div>
                                                </div> Weather
                                            </td>
                                        </tr>
                                    </table>
                                </div> <!-- End effects and subjects -->
                                    
                                <textarea name="attr_spellDescription" rows="3" placeholder="Spell description"></textarea>
                            </div> <!-- End spellBody -->
                        </div>
                    </div> <!-- End panel -->
                </fieldset>
            </div>
        </div>
        
        
        
        
        
        <div class="tab">
            <input id="lootRadio" type="radio" class="tabInput" name="tab" />
            <label for="lootRadio">Loot</label>
            <div id="lootPanel" class="tabPanel">
                <div class="field money">
                    <label>Bits</label>
                    <input type="number" name="attr_money">
                </div>
                <div class="field">
                    <label>Equipped</label>
                    <textarea rows="5" name="attr_equipped"></textarea>    
                </div>
                <div class="field">
                    <label>Inventory</label>
                    <textarea rows="9" name="attr_inventory"></textarea>    
                </div>
            </div>
        </div>
        
        <div class="tab">
            <input id="notesRadio" type="radio" class="tabInput" name="tab" />
            <label for="notesRadio">Notes</label>
            <div id="notesPanel" class="tabPanel">
                <textarea rows="20" name="attr_notes"></textarea>
            </div>
        </div>

    </div>
</div>