Battlestations

sheet.css

.charsheet div.container input[type="number"],
.charsheet div.container input[type="text"]{
    width: auto;
}
.charsheet h3 {
    background-color: darkblue;
    color: white;
    text-transform:uppercase;
    padding-left: 5px;
    text-align: center;
}
.charsheet h3.roll {
    margin-left: -5px;
}
.charsheet h4 {
    background-color: lightgray;
    text-transform:uppercase;
    padding-left: 5px;
}
.charsheet span {
    margin-top: 5px;
    font-weight: bold;
}
.charsheet span.hearts {
    margin-top: 0;
    font-size: 150%;
}
div.container {
    display:grid;
    grid-template-columns: 300px 100px 100px 300px;
    column-gap: 5px;
}
div.basic-information,
div.skills,
div.stats,
div.middle-row,
div.special-abilities, 
div.personal-equipment {
    border: 3pt solid black;
}
div.basic-information {
    grid-column: 1;
    display:grid;
    grid-template-columns: 65px 1fr;
}
div.basic-information .offset {
    grid-column: 2;
}
div.skills {
    grid-column: 2 / span 2;
    display: grid;
    grid-template-columns: 75px 73px 49px;
}
div.stats {
    display: grid;
    grid-template-columns: repeat(3, 60px) 98px;
    column-gap: 5px;
}
div.middle-row,
div.container h3 {
    grid-column: 1 / -1;
}
div.container div.skills h3 {
    grid-column: span 1;
}
div.middle-row {
    margin-top: 5px;
    margin-bottom: 5px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}
div.special-abilities,
div.personal-equipment {
    grid-column: 1 / span 2;
    display: grid;
    column-gap: 5px;
    grid-template-columns: 100px 123px 80px 80px;
}
div.personal-equipment {
    grid-column: 3 / span 2;
}

sheet.html

<div class="container">
    <!--holding table-->
    <div class="basic-information">
        <!--basic information-->
        <h3>Battlestations Sheet</h3>
        <span>Name</span>
        <input type="text" name="attr_char_name" />
        <span>Profession</span>
        <input type="text" name="attr_char_profession" />
        <span>Species</span>
        <input type="text" name="attr_char_Species" />
        <span>Ability</span>
        <input type="text" name="attr_char_Ability_1" />
        <input class="offset" type="text" name="attr_char_Ability_2" />
    </div>
    <div class="skills">
        <!--skills-->
        <h3>Skills</h3>
        <h3>Level</h3>
        <h3 class="roll">Roll</h3>
        <span>Athletics</span>
        <input type="number" name="attr_char_ath" value="0" />
        <button type='roll' name='roll_Athletics_check' value='[[2d6+@{char_ath}]]'></button>
        <span>Combat</span>
        <input type="number" name="attr_char_com" value="0" />
        <button type='roll' name='roll_Combat_check' value='[[2d6+@{char_com}]]'></button>
        <span>Engineering</span>
        <input type="number" name="attr_char_eng" value="0" />
        <button type='roll' name='roll_Engineering_check' value='[[2d6+@{char_eng}]]'></button>
        <span>Piloting</span>
        <input type="number" name="attr_char_pil" value="0" />
        <button type='roll' name='roll_Pilot_check' value='[[2d6+@{char_pil}]]'></button>
        <span>Science</span>
        <input type="number" name="attr_char_sci" value="0" />
        <button type='roll' name='roll_Science_check' value='[[2d6+@{char_sci}]]'></button>
    </div>
    <div class="stats">
        <!--stats-->
        <h3>Statistics</h3>
        <span>Base &hearts;</span>
        <input type="number" name="attr_char_baseHP" />
        <span class="hearts">&hearts;</span>
        <input type="number" name="attr_char_trueHP" value="(@{char_ath}+@{char_rank}+@{char_baseHP})" disabled="true" />
        <span>Movement</span>
        <input type="number" name="attr_char_move" />
        <span>Wounds</span>
        <input type="number" name="attr_char_wounds" />
        <span>Luck</span>
        <input type="number" name="attr_char_luck" value="(@{char_rank}+5)" disabled="true" />
        <span>Spent</span>
        <input type="number" name="attr_char_lspen" />
        <span>Target</span>
        <input type="number" name="attr_char_target" />
        <span>Rank</span>
        <input type="number" name="attr_char_rank" value="1" />
        <span>Hands</span>
        <input type="number" name="attr_char_hands" />
        <span>Carry</span>
        <input type="number" name="attr_char_carry" value="(@{char_ath}*10)" disabled="true" />
    </div>
    <div class="middle-row">
        <span>Prestige</span>
        <input type="number" name="attr_char_pres" />
        <span>Experience</span>
        <input type="number" name="attr_char_exp" />
        <span>Credits</span>
        <input type="number" name="attr_char_credits" />
    </div>
    <div class="special-abilities">
        <!--Special Abilities-->
        <h3>Special Abilities</h3>
        <h4>Ability</h4>
        <h4>Notes</h4>
        <h4>Pool</h4>
        <h4>Used</h4>
        <input type="text" name="attr_char_special_name_1" />
        <input type="text" name="attr_char_special_note_1" />
        <input type="text" name="attr_char_special_pool_1" />
        <input type="text" name="attr_char_special_used_1" />
        <input type="text" name="attr_char_special_name_2" />
        <input type="text" name="attr_char_special_note_2" />
        <input type="text" name="attr_char_special_pool_2" />
        <input type="text" name="attr_char_special_used_2" />
        <input type="text" name="attr_char_special_name_3" />
        <input type="text" name="attr_char_special_note_3" />
        <input type="text" name="attr_char_special_pool_3" />
        <input type="text" name="attr_char_special_used_3" />
        <input type="text" name="attr_char_special_name_4" />
        <input type="text" name="attr_char_special_note_4" />
        <input type="text" name="attr_char_special_pool_4" />
        <input type="text" name="attr_char_special_used_4" />
        <input type="text" name="attr_char_special_name_5" />
        <input type="text" name="attr_char_special_note_5" />
        <input type="text" name="attr_char_special_pool_5" />
        <input type="text" name="attr_char_special_used_5" />
        <input type="text" name="attr_char_special_name_6" />
        <input type="text" name="attr_char_special_note_6" />
        <input type="text" name="attr_char_special_pool_6" />
        <input type="text" name="attr_char_special_used_6" />
        <input type="text" name="attr_char_special_name_7" />
        <input type="text" name="attr_char_special_note_7" />
        <input type="text" name="attr_char_special_pool_7" />
        <input type="text" name="attr_char_special_used_7" />
        <input type="text" name="attr_char_special_name_8" />
        <input type="text" name="attr_char_special_note_8" />
        <input type="text" name="attr_char_special_pool_8" />
        <input type="text" name="attr_char_special_used_8" />
        <input type="text" name="attr_char_special_name_9" />
        <input type="text" name="attr_char_special_note_9" />
        <input type="text" name="attr_char_special_pool_9" />
        <input type="text" name="attr_char_special_used_9" />
        <input type="text" name="attr_char_special_name_10" />
        <input type="text" name="attr_char_special_note_10" />
        <input type="text" name="attr_char_special_pool_10" />
        <input type="text" name="attr_char_special_used_10" />
    </div>
    <div class="personal-equipment">
        <!--Personal Equipment-->
        <h3>Personal Equipment</h3>
        <h4>Item</h4>
        <h4>Notes</h4>
        <h4>Mass</h4>
        <h4>Status</h4>
        <input type="text" name="attr_char_equip_item_1" />
        <input type="text" name="attr_char_equip_note_1" />
        <input type="text" name="attr_char_equip_mass_1" />
        <input type="text" name="attr_char_equip_status_1" />
        <input type="text" name="attr_char_equip_item_2" />
        <input type="text" name="attr_char_equip_note_2" />
        <input type="text" name="attr_char_equip_mass_2" />
        <input type="text" name="attr_char_equip_status_2" />
        <input type="text" name="attr_char_equip_item_3" />
        <input type="text" name="attr_char_equip_note_3" />
        <input type="text" name="attr_char_equip_mass_3" />
        <input type="text" name="attr_char_equip_status_3" />
        <input type="text" name="attr_char_equip_item_4" />
        <input type="text" name="attr_char_equip_note_4" />
        <input type="text" name="attr_char_equip_mass_4" />
        <input type="text" name="attr_char_equip_status_4" />
        <input type="text" name="attr_char_equip_item_5" />
        <input type="text" name="attr_char_equip_note_5" />
        <input type="text" name="attr_char_equip_mass_5" />
        <input type="text" name="attr_char_equip_status_5" />
        <input type="text" name="attr_char_equip_item_6" />
        <input type="text" name="attr_char_equip_note_6" />
        <input type="text" name="attr_char_equip_mass_6" />
        <input type="text" name="attr_char_equip_status_6" />
        <input type="text" name="attr_char_equip_item_7" />
        <input type="text" name="attr_char_equip_note_7" />
        <input type="text" name="attr_char_equip_mass_7" />
        <input type="text" name="attr_char_equip_status_7" />
        <input type="text" name="attr_char_equip_item_8" />
        <input type="text" name="attr_char_equip_note_8" />
        <input type="text" name="attr_char_equip_mass_8" />
        <input type="text" name="attr_char_equip_status_8" />
        <input type="text" name="attr_char_equip_item_9" />
        <input type="text" name="attr_char_equip_note_9" />
        <input type="text" name="attr_char_equip_mass_9" />
        <input type="text" name="attr_char_equip_status_9" />
        <input type="text" name="attr_char_equip_item_10" />
        <input type="text" name="attr_char_equip_note_10" />
        <input type="text" name="attr_char_equip_mass_10" />
        <input type="text" name="attr_char_equip_status_10" />
    </div>
</div>