roll20-character-sheets/Agon/agon.html

<div class="container">
   <div class="column">
      <div class="logo"><img alt="Logo" class="logo" src="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Agon/images/agon.jpg" title="grayscale"></div>
      <div class="invasive">
         <label class="invasive">Quests</label>
      </div>
      <div class="checkboxes">
         <div class="row">
            <label class="checkbox">
               <input name="attr_quests_1" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="checkbox">
               <input name="attr_quests_2" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="checkbox">
               <input name="attr_quests_3" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="checkbox">
               <input name="attr_quests_4" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="checkbox">
               <input name="attr_quests_5" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="checkbox">
               <input name="attr_quests_6" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="checkbox">
               <input name="attr_quests_7" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="checkbox">
               <input name="attr_quests_8" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
         </div>
         <div class="row">
            <label class="checkbox">
               <input name="attr_quests_9" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="checkbox">
               <input name="attr_quests_10" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="checkbox">
               <input name="attr_quests_11" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="checkbox">
               <input name="attr_quests_12" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="checkbox">
               <input name="attr_quests_13" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="checkbox">
               <input name="attr_quests_14" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="checkbox">
               <input name="attr_quests_15" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="checkbox">
               <input name="attr_quests_16" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
         </div>
      </div>
      <div class="notes">
         <label>Divine favor costs</label>
         <ul>
            <li>1: Open-end die</li>
            <li>1: +1d6 for 1 roll</li>
            <li>2: Re-roll one die</li>
            <li>2: Attack again</li>
            <li>2: move hero 1 range</li>
            <li>2: no dmg pen for 1 ex</li>
            <li>3: +1d8 for 1 roll</li>
            <li>4: Re-roll any/all dice</li>
            <li>5: divine weapon</li>
         </ul>
      </div>
      <div class="notes">
         <label>earning fate</label>
         <ul>
            <li>1: avoid wounds from 1 attack</li>
            <li>1: Remove 4 impair levels</li>
            <li>1: Completed quest</li>
            <li>1: defeated</li>
            <li>1: Challenge a god</li>
         </ul>
      </div>
      <div class="notes">
         <label>rewards</label>
         <ul>
            <li>Completed quest: 1 divine favor</li>
            <li>Win contest: 1 glory</li>
            <li>highest hero roll: 1-7 glory</li>
            <li>defeat minion: 1 glory</li>
            <li>defeat NPC: glory = highest wound done</li>
         </ul>
      </div>
   </div>
   <div class="column">
      <div class="field">
         <label>Heroic Trait</label>
         <input class="character-heroic-trait" name="attr_character_heroic_trait" type="text"/>
      </div>
      <div class="field">
         <label>Heroic Trait Bonus</label>
         <textarea class="character-heroic-trait-bonus" name="attr_character_heroic_trait_bonus"></textarea>
      </div>
      <div class="repeating-field">
         <div class="invasive">
            <label>Oaths</label>
         </div>
         <fieldset class="repeating_oaths">
            <input class="oathgiver" name="attr_oathgiver" type="text"/>
            <input class="oathcount" name="attr_oathcount" type="number"/>
         </fieldset>
      </div>
      <div class="repeating-field">
         <div class="invasive">
            <label class="advantage-dice">Advantage Die</label>
         </div>
         <fieldset class="repeating_advantage">
            <input class="advantage" name="attr_advantage" type="text"/>
            <select class="advantage die" name="attr_advantage_die">
               <option value="d0"></option>
               <option value="d4">d4</option>
               <option value="d6">d6</option>
               <option value="d8">d8</option>
               <option value="d10">d10</option>
               <option value="d12">d12</option>
            </select>
         </fieldset>
      </div>
   </div>
   <div class="column">
      <div class="field">
         <label>Name</label>
         <input class="character-name" name="attr_character_name" type="text"/>
      </div>
   </div>
   <div class="column">
      <div class="field">
         <label>Lineage</label>
         <input class="character-lineage" name="attr_character_lineage" type="text"/>
      </div>
   </div>
   <div class="column narrow">
      <div class="spacer" style="height: 4px;"></div>
      <div class="element">
         <label>Name Die</label>
         <div class="impairment">
            <select class="die" name="attr_character_name_dtype">
               <option class="center" value="d4">d4</option>
               <option class="center" selected value="d6">d6</option>
               <option class="center" value="d8">d8</option>
            </select>
            <div class="top left corner">
               <label class="checkbox top left corner">
                  <input class="impairment" name="attr_character_name_dtype_tlc" type="checkbox"/>
                  <span class="impairment checkmark"></span>
               </label>
            </div>
            <div class="top right corner">
               <label class="checkbox top right corner">
                  <input class="impairment" name="attr_character_name_dtype_trc" type="checkbox"/>
                  <span class="impairment checkmark"></span>
               </label>
            </div>
            <div class="bottom left corner">
               <label class="checkbox bottom left corner">
                  <input class="impairment" name="attr_character_name_dtype_blc" type="checkbox"/>
                  <span class="impairment checkmark"></span>
               </label>
            </div>
            <div class="bottom right corner">
               <label class="checkbox bottom right corner">
                  <input class="impairment" name="attr_character_name_dtype_brc" type="checkbox"/>
                  <span class="impairment checkmark"></span>
               </label>
            </div>
         </div>
      </div>
   </div>
   <div class="column wide">
      <div class="invasive">
         <label>Arete</label>
      </div>
      <div class="row">
         <div class="element">
            <label>Insight</label>
            <div class="impairment">
               <select class="die" name="attr_character_insight_dtype">
                  <option class="center" value="d0"></option>
                  <option class="center" value="d4">d4</option> 
                  <option class="center" value="d6">d6</option>
                  <option class="center" value="d8">d8</option>
                  <option class="center" value="d10">d10</option>
                  <option class="center" value="d12">d12</option>
               </select>
               <div class="top left corner">
                  <label class="checkbox top left corner">
                     <input class="impairment" name="attr_character_insight_dtype_tlc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="top right corner">
                  <label class="checkbox top right corner">
                     <input class="impairment" name="attr_character_insight_dtype_trc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="bottom left corner">
                  <label class="checkbox bottom left corner">
                     <input class="impairment" name="attr_character_insight_dtype_blc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="bottom right corner">
                  <label class="checkbox bottom right corner">
                     <input class="impairment" name="attr_character_insight_dtype_brc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
            </div>
         </div>
         <div class="element">
            <label>Grace</label>
            <div class="impairment">
               <select class="die" name="attr_character_grace_dtype">
                  <option class="center" value="d0">
                  </option>
                  <option class="center" value="d4">
                  d4
                  </option>
                  <option class="center" value="d6">
                  d6
                  </option>
                  <option class="center" value="d8">
                  d8
                  </option>
                  <option class="center" value="d10">
                  d10
                  </option>
                  <option class="center" value="d12">
                  d12
                  </option>
               </select>
               <div class="top left corner">
                  <label class="checkbox top left corner">
                     <input class="impairment" name="attr_character_grace_dtype_tlc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="top right corner">
                  <label class="checkbox top right corner">
                     <input class="impairment" name="attr_character_grace_dtype_trc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="bottom left corner">
                  <label class="checkbox bottom left corner">
                     <input class="impairment" name="attr_character_grace_dtype_blc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="bottom right corner">
                  <label class="checkbox bottom right corner">
                     <input class="impairment" name="attr_character_grace_dtype_brc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
            </div>
         </div>
         <div class="element">
            <label>Might</label>
            <div class="impairment">
               <select class="die" name="attr_character_might_dtype">
                  <option class="center" value="d0">
                  </option>
                  <option class="center" value="d4">
                  d4
                  </option>
                  <option class="center" value="d6">
                  d6
                  </option>
                  <option class="center" value="d8">
                  d8
                  </option>
                  <option class="center" value="d10">
                  d10
                  </option>
                  <option class="center" value="d12">
                  d12
                  </option>
               </select>
               <div class="top left corner">
                  <label class="checkbox top left corner">
                     <input class="impairment" name="attr_character_might_dtype_tlc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="top right corner">
                  <label class="checkbox top right corner">
                     <input class="impairment" name="attr_character_might_dtype_trc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="bottom left corner">
                  <label class="checkbox bottom left corner">
                     <input class="impairment" name="attr_character_might_dtype_blc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="bottom right corner">
                  <label class="checkbox bottom right corner">
                     <input class="impairment" name="attr_character_might_dtype_brc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
            </div>
         </div>
         <div class="element">
            <label>Spirit</label>
            <div class="impairment">
               <select class="die" name="attr_character_spirit_dtype">
                  <option class="center" value="d0">
                  </option>
                  <option class="center" value="d4">
                  d4
                  </option>
                  <option class="center" value="d6">
                  d6
                  </option>
                  <option class="center" value="d8">
                  d8
                  </option>
                  <option class="center" value="d10">
                  d10
                  </option>
                  <option class="center" value="d12">
                  d12
                  </option>
               </select>
               <div class="top left corner">
                  <label class="checkbox top left corner">
                     <input class="impairment" name="attr_character_spirit_dtype_tlc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="top right corner">
                  <label class="checkbox top right corner">
                     <input class="impairment" name="attr_character_spirit_dtype_trc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="bottom left corner">
                  <label class="checkbox bottom left corner">
                     <input class="impairment" name="attr_character_spirit_dtype_blc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="bottom right corner">
                  <label class="checkbox bottom right corner">
                     <input class="impairment" name="attr_character_spirit_dtype_brc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
            </div>
         </div>
      </div>
      <div class="invasive">
         <label>Craft</label>
      </div>
      <div class="row">
         <div class="element">
            <label>Heal</label>
            <div class="impairment">
               <select class="die" name="attr_character_heal_dtype">
                  <option class="center" value="d0">
                  </option>
                  <option class="center" value="d4">
                  d4
                  </option>
                  <option class="center" value="d6">
                  d6
                  </option>
                  <option class="center" value="d8">
                  d8
                  </option>
                  <option class="center" value="d10">
                  d10
                  </option>
                  <option class="center" value="d12">
                  d12
                  </option>
               </select>
               <div class="top left corner">
                  <label class="checkbox top left corner">
                     <input class="impairment" name="attr_character_heal_dtype_tlc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="top right corner">
                  <label class="checkbox top right corner">
                     <input class="impairment" name="attr_character_heal_dtype_trc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="bottom left corner">
                  <label class="checkbox bottom left corner">
                     <input class="impairment" name="attr_character_heal_dtype_blc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="bottom right corner">
                  <label class="checkbox bottom right corner">
                     <input class="impairment" name="attr_character_heal_dtype_brc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
            </div>
         </div>
         <div class="element">
            <label>Lore</label>
            <div class="impairment">
               <select class="die" name="attr_character_lore_dtype">
                  <option class="center" value="d0">
                  </option>
                  <option class="center" value="d4">
                  d4
                  </option>
                  <option class="center" value="d6">
                  d6
                  </option>
                  <option class="center" value="d8">
                  d8
                  </option>
                  <option class="center" value="d10">
                  d10
                  </option>
                  <option class="center" value="d12">
                  d12
                  </option>
               </select>
               <div class="top left corner">
                  <label class="checkbox top left corner">
                     <input class="impairment" name="attr_character_lore_dtype_tlc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="top right corner">
                  <label class="checkbox top right corner">
                     <input class="impairment" name="attr_character_lore_dtype_trc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="bottom left corner">
                  <label class="checkbox bottom left corner">
                     <input class="impairment" name="attr_character_lore_dtype_blc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="bottom right corner">
                  <label class="checkbox bottom right corner">
                     <input class="impairment" name="attr_character_lore_dtype_brc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
            </div>
         </div>
         <div class="element">
            <label>Music</label>
            <div class="impairment">
               <select class="die" name="attr_character_music_dtype">
                  <option class="center" value="d0">
                  </option>
                  <option class="center" value="d4">
                  d4
                  </option>
                  <option class="center" value="d6">
                  d6
                  </option>
                  <option class="center" value="d8">
                  d8
                  </option>
                  <option class="center" value="d10">
                  d10
                  </option>
                  <option class="center" value="d12">
                  d12
                  </option>
               </select>
               <div class="top left corner">
                  <label class="checkbox top left corner">
                     <input class="impairment" name="attr_character_music_dtype_tlc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="top right corner">
                  <label class="checkbox top right corner">
                     <input class="impairment" name="attr_character_music_dtype_trc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="bottom left corner">
                  <label class="checkbox bottom left corner">
                     <input class="impairment" name="attr_character_music_dtype_blc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="bottom right corner">
                  <label class="checkbox bottom right corner">
                     <input class="impairment" name="attr_character_music_dtype_brc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
            </div>
         </div>
         <div class="element">
            <label>Orate</label>
            <div class="impairment">
               <select class="die" name="attr_character_orate_dtype">
                  <option class="center" value="d0">
                  </option>
                  <option class="center" value="d4">
                  d4
                  </option>
                  <option class="center" value="d6">
                  d6
                  </option>
                  <option class="center" value="d8">
                  d8
                  </option>
                  <option class="center" value="d10">
                  d10
                  </option>
                  <option class="center" value="d12">
                  d12
                  </option>
               </select>
               <div class="top left corner">
                  <label class="checkbox top left corner">
                     <input class="impairment" name="attr_character_orate_dtype_tlc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="top right corner">
                  <label class="checkbox top right corner">
                     <input class="impairment" name="attr_character_orate_dtype_trc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="bottom left corner">
                  <label class="checkbox bottom left corner">
                     <input class="impairment" name="attr_character_orate_dtype_blc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="bottom right corner">
                  <label class="checkbox bottom right corner">
                     <input class="impairment" name="attr_character_orate_dtype_brc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
            </div>
         </div>
      </div>
      <div class="invasive">
         <label>Sport</label>
      </div>
      <div class="row">
         <div class="element">
            <label>Athletics</label>
            <div class="impairment">
               <select class="die" name="attr_character_athletics_dtype">
                  <option class="center" value="d0">
                  </option>
                  <option class="center" value="d4">
                  d4
                  </option>
                  <option class="center" value="d6">
                  d6
                  </option>
                  <option class="center" value="d8">
                  d8
                  </option>
                  <option class="center" value="d10">
                  d10
                  </option>
                  <option class="center" value="d12">
                  d12
                  </option>
               </select>
               <div class="top left corner">
                  <label class="checkbox top left corner">
                     <input class="impairment" name="attr_character_athletics_dtype_tlc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="top right corner">
                  <label class="checkbox top right corner">
                     <input class="impairment" name="attr_character_athletics_dtype_trc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="bottom left corner">
                  <label class="checkbox bottom left corner">
                     <input class="impairment" name="attr_character_athletics_dtype_blc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="bottom right corner">
                  <label class="checkbox bottom right corner">
                     <input class="impairment" name="attr_character_athletics_dtype_brc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
            </div>
         </div>
         <div class="element">
            <label>Cunning</label>
            <div class="impairment">
               <select class="die" name="attr_character_cunning_dtype">
                  <option class="center" value="d0">
                  </option>
                  <option class="center" value="d4">
                  d4
                  </option>
                  <option class="center" value="d6">
                  d6
                  </option>
                  <option class="center" value="d8">
                  d8
                  </option>
                  <option class="center" value="d10">
                  d10
                  </option>
                  <option class="center" value="d12">
                  d12
                  </option>
               </select>
               <div class="top left corner">
                  <label class="checkbox top left corner">
                     <input class="impairment" name="attr_character_cunning_dtype_tlc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="top right corner">
                  <label class="checkbox top right corner">
                     <input class="impairment" name="attr_character_cunning_dtype_trc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="bottom left corner">
                  <label class="checkbox bottom left corner">
                     <input class="impairment" name="attr_character_cunning_dtype_blc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="bottom right corner">
                  <label class="checkbox bottom right corner">
                     <input class="impairment" name="attr_character_cunning_dtype_brc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
            </div>
         </div>
         <div class="element">
            <label>Hunt</label>
            <div class="impairment">
               <select class="die" name="attr_character_hunt_dtype">
                  <option class="center" value="d0">
                  </option>
                  <option class="center" value="d4">
                  d4
                  </option>
                  <option class="center" value="d6">
                  d6
                  </option>
                  <option class="center" value="d8">
                  d8
                  </option>
                  <option class="center" value="d10">
                  d10
                  </option>
                  <option class="center" value="d12">
                  d12
                  </option>
               </select>
               <div class="top left corner">
                  <label class="checkbox top left corner">
                     <input class="impairment" name="attr_character_hunt_dtype_tlc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="top right corner">
                  <label class="checkbox top right corner">
                     <input class="impairment" name="attr_character_hunt_dtype_trc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="bottom left corner">
                  <label class="checkbox bottom left corner">
                     <input class="impairment" name="attr_character_hunt_dtype_blc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="bottom right corner">
                  <label class="checkbox bottom right corner">
                     <input class="impairment" name="attr_character_hunt_dtype_brc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
            </div>
         </div>
         <div class="element">
            <label>Wrestle</label>
            <div class="impairment">
               <select class="die" name="attr_character_wrestle_dtype">
                  <option class="center" value="d0">
                  </option>
                  <option class="center" value="d4">
                  d4
                  </option>
                  <option class="center" value="d6">
                  d6
                  </option>
                  <option class="center" value="d8">
                  d8
                  </option>
                  <option class="center" value="d10">
                  d10
                  </option>
                  <option class="center" value="d12">
                  d12
                  </option>
               </select>
               <div class="top left corner">
                  <label class="checkbox top left corner">
                     <input class="impairment" name="attr_character_wrestle_dtype_tlc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="top right corner">
                  <label class="checkbox top right corner">
                     <input class="impairment" name="attr_character_wrestle_dtype_trc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="bottom left corner">
                  <label class="checkbox bottom left corner">
                     <input class="impairment" name="attr_character_wrestle_dtype_blc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="bottom right corner">
                  <label class="checkbox bottom right corner">
                     <input class="impairment" name="attr_character_wrestle_dtype_brc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
            </div>
         </div>
      </div>
      <div class="invasive">
         <label>Battle</label>
      </div>
      <div class="row">
         <div class="element">
            <label>Aim</label>
            <div class="impairment">
               <select class="die" name="attr_character_aim_dtype">
                  <option class="center" value="d0">
                  </option>
                  <option class="center" value="d4">
                  d4
                  </option>
                  <option class="center" value="d6">
                  d6
                  </option>
                  <option class="center" value="d8">
                  d8
                  </option>
                  <option class="center" value="d10">
                  d10
                  </option>
                  <option class="center" value="d12">
                  d12
                  </option>
               </select>
               <div class="top left corner">
                  <label class="checkbox top left corner">
                     <input class="impairment" name="attr_character_aim_dtype_tlc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="top right corner">
                  <label class="checkbox top right corner">
                     <input class="impairment" name="attr_character_aim_dtype_trc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="bottom left corner">
                  <label class="checkbox bottom left corner">
                     <input class="impairment" name="attr_character_aim_dtype_blc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="bottom right corner">
                  <label class="checkbox bottom right corner">
                     <input class="impairment" name="attr_character_aim_dtype_brc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
            </div>
         </div>
         <div class="element">
            <label>Shield</label>
            <div class="impairment">
               <select class="die" name="attr_character_shield_dtype">
                  <option class="center" value="d0">
                  </option>
                  <option class="center" value="d4">
                  d4
                  </option>
                  <option class="center" value="d6">
                  d6
                  </option>
                  <option class="center" value="d8">
                  d8
                  </option>
                  <option class="center" value="d10">
                  d10
                  </option>
                  <option class="center" value="d12">
                  d12
                  </option>
               </select>
               <div class="top left corner">
                  <label class="checkbox top left corner">
                     <input class="impairment" name="attr_character_shield_dtype_tlc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="top right corner">
                  <label class="checkbox top right corner">
                     <input class="impairment" name="attr_character_shield_dtype_trc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="bottom left corner">
                  <label class="checkbox bottom left corner">
                     <input class="impairment" name="attr_character_shield_dtype_blc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="bottom right corner">
                  <label class="checkbox bottom right corner">
                     <input class="impairment" name="attr_character_shield_dtype_brc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
            </div>
         </div>
         <div class="element">
            <label>Spear</label>
            <div class="impairment">
               <select class="die" name="attr_character_spear_dtype">
                  <option class="center" value="d0">
                  </option>
                  <option class="center" value="d4">
                  d4
                  </option>
                  <option class="center" value="d6">
                  d6
                  </option>
                  <option class="center" value="d8">
                  d8
                  </option>
                  <option class="center" value="d10">
                  d10
                  </option>
                  <option class="center" value="d12">
                  d12
                  </option>
               </select>
               <div class="top left corner">
                  <label class="checkbox top left corner">
                     <input class="impairment" name="attr_character_spear_dtype_tlc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="top right corner">
                  <label class="checkbox top right corner">
                     <input class="impairment" name="attr_character_spear_dtype_trc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="bottom left corner">
                  <label class="checkbox bottom left corner">
                     <input class="impairment" name="attr_character_spear_dtype_blc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="bottom right corner">
                  <label class="checkbox bottom right corner">
                     <input class="impairment" name="attr_character_spear_dtype_brc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
            </div>
         </div>
         <div class="element">
            <label>Sword</label>
            <div class="impairment">
               <select class="die" name="attr_character_sword_dtype">
                  <option class="center" value="d0">
                  </option>
                  <option class="center" value="d4">
                  d4
                  </option>
                  <option class="center" value="d6">
                  d6
                  </option>
                  <option class="center" value="d8">
                  d8
                  </option>
                  <option class="center" value="d10">
                  d10
                  </option>
                  <option class="center" value="d12">
                  d12
                  </option>
               </select>
               <div class="top left corner">
                  <label class="checkbox top left corner">
                     <input class="impairment" name="attr_character_sword_dtype_tlc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="top right corner">
                  <label class="checkbox top right corner">
                     <input class="impairment" name="attr_character_sword_dtype_trc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="bottom left corner">
                  <label class="checkbox bottom left corner">
                     <input class="impairment" name="attr_character_sword_dtype_blc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="bottom right corner">
                  <label class="checkbox bottom right corner">
                     <input class="impairment" name="attr_character_sword_dtype_brc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
            </div>
         </div>
      </div>
      <hr>
      <div class="row">
         <div class="element">
            <label>Bow Dice</label>
            <input name="attr_weapon_bow_dice" type="text"/>
         </div>
         <div class="element">
            <label>Shield Dice</label>
            <input name="attr_weapon_shield_dice" type="text"/>
         </div>
         <div class="element">
            <label>Spear Dice</label>
            <input name="attr_weapon_spear_dice" type="text"/>
         </div>
         <div class="element">
            <label>Sword Dice</label>
            <input name="attr_weapon_sword_dice" type="text"/>
         </div>
      </div>
      <div class="row">
         <div class="element">
            <label>Range</label>
            <input name="attr_weapon_bow_range" type="text"/>
         </div>
         <div class="element">
            <label>Armor Die</label>
            <div class="impairment">
               <select class="die" name="attr_character_armor_dtype">
                  <option class="center" value="d0">
                  </option>
                  <option class="center" value="d4">
                  d4
                  </option>
                  <option class="center" value="d6">
                  d6
                  </option>
                  <option class="center" value="d8">
                  d8
                  </option>
                  <option class="center" value="d10">
                  d10
                  </option>
                  <option class="center" value="d12">
                  d12
                  </option>
               </select>
               <div class="top left corner">
                  <label class="checkbox top left corner">
                     <input class="impairment" name="attr_character_armor_dtype_tlc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="top right corner">
                  <label class="checkbox top right corner">
                     <input class="impairment" name="attr_character_armor_dtype_trc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="bottom left corner">
                  <label class="checkbox bottom left corner">
                     <input class="impairment" name="attr_character_armor_dtype_blc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
               <div class="bottom right corner">
                  <label class="checkbox bottom right corner">
                     <input class="impairment" name="attr_character_armor_dtype_brc" type="checkbox"/>
                     <span class="impairment checkmark"></span>
                  </label>
               </div>
            </div>
         </div>
         <div class="element">
            <label>Range</label>
            <input name="attr_weapon_spear_range" type="text"/>
         </div>
         <div class="element">
            <label>Range</label>
            <input name="attr_weapon_sword_range" type="text"/>
         </div>
      </div>
      <div class="row">
         <div class="element">
            <label>Javelin Dice</label>
            <input name="attr_weapon_javelin_dice" type="text"/>
            <label>Range</label>
            <input name="attr_weapon_javelin_range" type="text"/>
         </div>
         <div class="element">
            <div class="armor checklist">
               <div class="row">
                  <label class="checkbox small">
                     <input name="attr_character_armor_helmet" type="checkbox"/>
                     <span class="checkmark"></span>
                  </label>
                  <span>Helmet</span><br>
                  <span>(-1 Missile)</span>
               </div>
               <div class="row">
                  <label class="checkbox small">
                     <input name="attr_character_armor_breastplate" type="checkbox"/>
                     <span class="checkmark"></span>
                  </label>
                  <span>Breastplate</span><br>
                  <span>(-1 Melee)</span>
               </div>
               <div class="row">
                  <label class="checkbox small">
                     <input name="attr_character_armor_greaves" type="checkbox"/>
                     <span class="checkmark"></span>
                  </label>
                  <span>Greaves</span><br>
                  <span>(-1 Position)</span>
               </div>
            </div>
         </div>
         <div class="element">
            <label>Special Items</label>
            <textarea></textarea>
         </div>
      </div>
   </div>
   <div class="column">
      <div class="invasive">
         <label>Fate</label>
      </div>
      <div class="fate checkboxes">
         <div class="row">
            <label class="fate checkbox">
               <input name="attr_fate_1" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="fate checkbox">
               <input name="attr_fate_2" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="fate checkbox">
               <input name="attr_fate_3" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="fate checkbox">
               <input name="attr_fate_4" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="fate checkbox">
               <input name="attr_fate_5" type="checkbox"/>
               <span class="checkmark">8</span>
            </label>
            <label class="fate checkbox">
               <input name="attr_fate_6" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="fate checkbox">
               <input name="attr_fate_7" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="fate checkbox">
               <input name="attr_fate_8" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
         </div>
         <div class="row">
            <label class="fate checkbox">
               <input name="attr_fate_9" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="fate checkbox">
               <input name="attr_fate_10" type="checkbox"/>
               <span class="checkmark">10</span>
            </label>
            <label class="fate checkbox">
               <input name="attr_fate_11" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="fate checkbox">
               <input name="attr_fate_12" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="fate checkbox">
               <input name="attr_fate_13" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="fate checkbox">
               <input name="attr_fate_14" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="fate checkbox">
               <input name="attr_fate_15" type="checkbox"/>
               <span class="checkmark">12</span>
            </label>
            <label class="fate checkbox">
               <input name="attr_fate_16" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
         </div>
      </div>
      <div class="gods">
         <label>God</label>
         <input name="attr_god" type="text"/>
      </div>
      <div class="fabs">
         <label>Favored Abilities</label>
         <input name="attr_favored_abilities" type="text"/>
      </div>
      <div class="favor checkboxes">
         <div class="invasive">
            <label class="divine-favor">Divine Favor</label>
         </div>
         <div class="row">
            <label class="favor checkbox">
               <input name="attr_favor_1" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="favor checkbox">
               <input name="attr_favor_2" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="favor checkbox">
               <input name="attr_favor_3" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="favor checkbox">
               <input name="attr_favor_4" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="favor checkbox">
               <input name="attr_favor_5" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="favor checkbox">
               <input name="attr_favor_6" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="favor checkbox">
               <input name="attr_favor_7" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
         </div>
         <div class="row">
            <label class="favor checkbox">
               <input name="attr_favor_8" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="favor checkbox">
               <input name="attr_favor_9" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="favor checkbox">
               <input name="attr_favor_10" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="favor checkbox">
               <input name="attr_favor_11" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="favor checkbox">
               <input name="attr_favor_12" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="favor checkbox">
               <input name="attr_favor_13" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="favor checkbox">
               <input name="attr_favor_14" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
         </div>
      </div>
      <div class="invasive">
         <label>Glory</label>
      </div>
      <div class="divine checkboxes">
         <div class="row">
            <label class="glory checkbox">
               <input name="attr_glory_1" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="glory checkbox">
               <input name="attr_glory_2" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="glory checkbox">
               <input name="attr_glory_3" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="glory checkbox">
               <input name="attr_glory_4" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="glory checkbox">
               <input name="attr_glory_5" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="glory checkbox">
               <input name="attr_glory_6" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="glory checkbox">
               <input name="attr_glory_7" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="glory checkbox">
               <input name="attr_glory_8" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="glory checkbox">
               <input name="attr_glory_9" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
            <label class="glory checkbox">
               <input name="attr_glory_10" type="checkbox"/>
               <span class="checkmark"></span>
            </label>
         </div>
      </div>
      <div class="advances">
         <label>Advances (Unspent)</label>
         <input name="attr_unspent_advances" type="text"/>
      </div>
      <div class="wound-container">
         <label>Wounds</label>
         <div class="wounds">
            <div class="wound row">
               <label class="wound checkbox">
                  <input name="attr_wound_1" type="checkbox"/>
                  <span class="checkmark"></span>
               </label>
               <span class="wound value">1</span>
               <span class="consequence">-1 to next roll</span>
            </div>
            <div class="wound row">
               <label class="wound checkbox">
                  <input name="attr_wound_2" type="checkbox"/>
                  <span class="checkmark"></span>
               </label>
               <span class="wound value">2</span>
               <span class="consequence">-1 to next roll</span>
            </div>
            <div class="wound row">
               <label class="wound checkbox">
                  <input name="attr_wound_3" type="checkbox"/>
                  <span class="checkmark"></span>
               </label>
               <span class="wound value">3</span>
               <span class="consequence">-2 to next roll</span>
            </div>
            <div class="wound row">
               <label class="wound checkbox">
                  <input name="attr_wound_4" type="checkbox"/>
                  <span class="checkmark"></span>
               </label>
               <span class="wound value">4</span>
               <span class="consequence">-1 to all rolls</span>
            </div>
            <div class="wound row">
               <label class="wound checkbox">
                  <input name="attr_wound_5" type="checkbox"/>
                  <span class="checkmark"></span>
               </label>
               <span class="wound value">5</span>
               <span class="consequence">-2 to all rolls</span>
            </div>
            <div class="wound row">
               <label class="wound checkbox">
                  <input name="attr_wound_6" type="checkbox"/>
                  <span class="checkmark"></span>
               </label>
               <span class="wound value">6</span>
               <span class="consequence">-4 to all rolls (defeated)</span>
            </div>
         </div>
      </div>
   </div>
   <div style="clear: both; width: 100%; height: 100px; padding: 0px; margin: 0px; text-align: center;">
      <div style="display: inline-block; padding-right: 15%; margin: 0 5px; width: 30%; height: 100%;">
         <div style="border: 1px solid #595959; height: 90%;">
            <span>Left Hand</span>
         </div>
      </div>
      <div style="display: inline-block; padding-left: 15%; margin: 0 5px; width: 30%; height: 100%;">
         <div style="border: 1px solid #595959; height: 90%;">
            <span>Right Hand</span>
         </div>
      </div>
   </div>
</div>