Problem with CSS for a (Unity RPG) Sheet

Hi, after i have found this thread from Ryan <a href="https://app.roll20.net/forum/post/8322202/first-sheet-complete-unity" rel="nofollow">https://app.roll20.net/forum/post/8322202/first-sheet-complete-unity</a> i was very happy and copied the html and css code for my Unity Game. Unfortunately there was a graphic glitch and even Ryan has no idea what happened. He uses the same code and has no problems. So....every time i try and copy the exact code (tried many times) there is this graphic glitch: This is what it should be: I tried to start a complete new game with no API or whatever....same glitch :-(&nbsp; Even Ryan could not reproduce this error! So...the code can't be the problem....at least i think so. Ryan asked me to start thsi thread because he has no idea what is the cause for this. I will post the code again and hopefully, someone has any idea what the hell happened :-)&nbsp; I will be of no real help, because my knowledge of html and css is close to -1

HTML Code: &lt;div class="wrapper"&gt; &nbsp;&nbsp;&nbsp; &lt;div class="full"&gt;&lt;/div&gt; &nbsp;&nbsp;&nbsp; &lt;div class="label"&gt;Character&lt;/div&gt; &nbsp;&nbsp;&nbsp; &lt;div class="character"&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="text" name="attr_character_name" placeholder="Name"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="text" name="attr_title" placeholder="Titles"/&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="text" name="attr_level" placeholder="Level"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;select name="attr_race"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;option value="none" selected&gt;Race?&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;option value="afflicted"&gt;Afflicted&lt;/option&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;option value="furian"&gt;Furian&lt;/option&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;option value="human"&gt;Human&lt;/option&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;option value="vallan"&gt;Vallan&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/select&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;select name="attr_class"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;option value="none" selected&gt;Class?&lt;/option&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;option value="dreadnought"&gt;Dreadnought&lt;/option&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;option value="driftwalker"&gt;Driftwalker&lt;/option&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;option value="fellhunter"&gt;Fell Hunter&lt;/option&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;option value="judge"&gt;Judge&lt;/option&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;option value="mystic"&gt;Mystic&lt;/option&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;option value="phantom"&gt;Phantom&lt;/option&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;option value="priestchaplain"&gt;Priest - Chaplain&lt;/option&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;option value="priestwar"&gt;Priest - War&lt;/option&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;option value="primalist"&gt;Primalist&lt;/option&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;option value="sentinel"&gt;Sentinel&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/select&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="text" name="attr_main" class="sheet-open" placeholder="Main Attribute"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;br/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;div class="recupes"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input class='recupes-control' type='hidden' name='attr_recup_die' value='d10'&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;button class="recupes-display" type="roll" name="roll_recup_die" value="/roll @{recup_die}"/&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;label for="attr_recupes"&gt;RECUPES&lt;/label&gt;&lt;input type="number" name="attr_recupes" class="sheet-open" placeholder="2"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &lt;div class="left"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="hp_max"&gt;&lt;label for="attr_hp_max"&gt;MAX&lt;/label&gt;&lt;input type="number" name="attr_hp_max" class="sheet-open" placeholder="10"/&gt;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="hp"&gt;&lt;input type="number" name="attr_hp" class="sheet-open" placeholder="10"/&gt;&lt;/div&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="fading"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;label for="attr_fading"&gt;FADING&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="checkbox" name="attr_fading1" value="1"&gt;&lt;span&gt;&lt;/span&gt; &lt;br&gt;&lt;br&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="checkbox" name="attr_fading2" value="1"&gt;&lt;span&gt;&lt;/span&gt; &lt;br&gt; &lt;br&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="checkbox" name="attr_fading3" value="1"&gt;&lt;span&gt;&lt;/span&gt;&lt;br&gt; &lt;br&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="checkbox" name="attr_fading4" value="1"&gt;&lt;span&gt;&lt;/span&gt; &lt;br&gt; &lt;br&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="checkbox" name="attr_fading5" value="1"&gt;&lt;span&gt;&lt;/span&gt; &lt;br&gt; &lt;br&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;button type="roll" name="roll_fading" value="/roll 1t[fading]"&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp; &lt;/div&gt;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;div class="attr"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="label"&gt;Attributes&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="row"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; MIGHT &lt;button type="roll" name="roll_might" value="?{Roll Type| Standard, 2d10| Benefit, 3d10k2| Hindrance, 3d10dh1} &amp;{template:default} {{name= @{character_name}: Might Check }} {{STATS= Might @{Might} | Bonus ?{Core Path Points&amp;#124; 0&amp;#125; &amp;#125;&amp;#125; {{RESULT= [[?{Roll Type} + @{Might} + ?{Core Path Points&amp;#124; 0&amp;#125;]] &amp;#125;&amp;#125;"/&gt; &lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; AGILITY &lt;button type="roll" name="roll_agility" value="?{Roll Type| Standard, 2d10| Benefit, 3d10k2| Hindrance, 3d10dh1} &amp;{template:default} {{name= @{character_name}: Agility Check }} {{STATS= Agility @{Agility} | Bonus ?{Core Path Points&amp;#124; 0&amp;#125; &amp;#125;&amp;#125; {{RESULT= [[?{Roll Type} + @{Agility} + ?{Core Path Points&amp;#124; 0&amp;#125;]] &amp;#125;&amp;#125;"/&gt; &lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; MIND &lt;button type="roll" name="roll_mind" value="?{Roll Type| Standard, 2d10| Benefit, 3d10k2| Hindrance, 3d10dh1} &amp;{template:default} {{name= @{character_name}: Mind Check }} {{STATS= Mind @{Mind} | Bonus ?{Core Path Points&amp;#124; 0&amp;#125; &amp;#125;&amp;#125; {{RESULT= [[?{Roll Type} + @{Mind} + ?{Core Path Points&amp;#124; 0&amp;#125;]] &amp;#125;&amp;#125;"/&gt; &lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; PRESENCE &lt;button type="roll" name="roll_presence" value="?{Roll Type| Standard, 2d10| Benefit, 3d10k2| Hindrance, 3d10dh1} &amp;{template:default} {{name= @{character_name}: Presence Check }} {{STATS= Presence @{Presence} | Bonus ?{Core Path Points&amp;#124; 0&amp;#125; &amp;#125;&amp;#125; {{RESULT= [[?{Roll Type} + @{Presence} + ?{Core Path Points&amp;#124; 0&amp;#125;]] &amp;#125;&amp;#125;"/&gt; &lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="attrow"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="number" class="sheet-open" name="attr_might"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="number" class="sheet-open" name="attr_agility"/&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="number" class="sheet-open" name="attr_mind"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="number" class="sheet-open" name="attr_presence"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="row"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;img src= " <a href="https://image.flaticon.com/icons/png/512/112/112255.png" rel="nofollow">https://image.flaticon.com/icons/png/512/112/112255.png</a> " alt="Image" height="30" width="30"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_av" value="0" class="sheet-open"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;img src= " <a href="https://cdn4.iconfinder.com/data/icons/fairy-tale-1/128/2-512.png" rel="nofollow">https://cdn4.iconfinder.com/data/icons/fairy-tale-1/128/2-512.png</a> " alt="Image" height="30" width="30"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_ar" class="sheet-open"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;img src= " <a href="https://cdn4.iconfinder.com/data/icons/eldorado-navigation/40/run_exit_2-512.png" rel="nofollow">https://cdn4.iconfinder.com/data/icons/eldorado-navigation/40/run_exit_2-512.png</a> " alt="Image" height="30" width="30"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_speed" class="sheet-open"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;img src= " <a href="https://static.thenounproject.com/png/1162-200.png" rel="nofollow">https://static.thenounproject.com/png/1162-200.png</a> " alt="Image" height="30" width="30"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_dr" class="sheet-open"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;img src= " <a href="https://ya-webdesign.com/transparent450_/brain-icon-png-10.png" rel="nofollow">https://ya-webdesign.com/transparent450_/brain-icon-png-10.png</a> " alt="Image" height="30" width="30"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_mr" class="sheet-open"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;div style="clear: both;"&gt;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="resource"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input class='recharge-control' type='hidden' name='attr_recharge' value='d4'&gt; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;button class="recharge-display" type="roll" name="roll_recharge" value="/roll @{recharge}"&gt;&lt;/button&gt; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="text" name="attr_resourcetype" placeholder="Resource"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="radio" name="attr_resource" class="sheet-r0" checked="checked" value = "0" /&gt; &lt;span class="sheet-r0"&gt;&lt;/span&gt;&lt;br&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="radio" name="attr_resource" class="sheet-r1" value = "1" /&gt; &lt;span class="sheet-r1"&gt;&lt;/span&gt;&lt;br&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="radio" name="attr_resource" class="sheet-r2" value = "2" /&gt; &lt;span class="sheet-r2"&gt;&lt;/span&gt;&lt;br&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="radio" name="attr_resource" class="sheet-r3" value = "3" /&gt; &lt;span class="sheet-r3"&gt;&lt;/span&gt;&lt;br&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="radio" name="attr_resource" class="sheet-r4" value = "4" /&gt; &lt;span class="sheet-r4"&gt;&lt;/span&gt;&lt;br&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="radio" name="attr_resource" class="sheet-r5" value = "5" /&gt; &lt;span class="sheet-r5"&gt;&lt;/span&gt;&lt;br&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="radio" name="attr_resource" class="sheet-r6" value = "6" /&gt; &lt;span class="sheet-r6"&gt;&lt;/span&gt;&lt;br&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="radio" name="attr_resource" class="sheet-r7" value = "7" /&gt; &lt;span class="sheet-r7"&gt;&lt;/span&gt;&lt;br&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="radio" name="attr_resource" class="sheet-r8" value = "8" /&gt; &lt;span class="sheet-r8"&gt;&lt;/span&gt;&lt;br&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="radio" name="attr_resource" class="sheet-r9" value = "9" /&gt; &lt;span class="sheet-r9"&gt;&lt;/span&gt;&lt;br&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="radio" name="attr_resource" class="sheet-r10" value = "10" /&gt; &lt;span class="sheet-r10"&gt;&lt;/span&gt;&lt;br&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;div class="left"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="label"&gt;Core Paths&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="corepath"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;fieldset class="repeating_corepath"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="text" name="attr_corepath_name"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_corepath_stat"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;br&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/fieldset&gt;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="cf"&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="label"&gt;Class Features&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="row"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="text" name="attr_cf1name" placeholder="Feature Name"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_cf1cost" placeholder="0"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="cfbuttons"&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;button type="roll" name="roll_cf1" value="&amp;{template:default} {{name= @{character_name} }} {{FEATURE= @{cf1name} }} {{COST= @{cf1cost} }} {{DESC.=@{classfeature1} }}"/&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="checkbox" name="attr_cf1poweruse" value="1"/&gt;&lt;span&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;br&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="checkbox" name="attr_cf1standard" class="sheet-standard" value = "1" &gt; &lt;span class="sheet-standard"&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="checkbox" name="attr_cf1passive" class="sheet-passive" value = "1" /&gt; &lt;span class="sheet-passive"&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="checkbox" name="attr_cf1quick" class="sheet-quick" value = "1" /&gt; &lt;span class="sheet-quick"&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="checkbox" name="attr_cf1free" class="sheet-free" value = "1" /&gt; &lt;span class="sheet-free"&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="checkbox" name="attr_cf1movement" class="sheet-movement" value = "1" /&gt; &lt;span class="sheet-movement"&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="checkbox" name="attr_cf1reaction" class="sheet-reaction" value = "1" /&gt; &lt;span class="sheet-reaction"&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="checkbox" name="attr_cf1overdrive" class="sheet-overdrive" value = "1" /&gt; &lt;span class="sheet-overdrive"&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp; &lt;/div&gt;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;br&gt;&nbsp; &lt;br&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="feature"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;textarea name="attr_classfeature1" class="sheet-open" placeholder="Class Feature"/&gt;&lt;/textarea&gt;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;br&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div style="clear: both;"&gt;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="cf"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="row"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="text" name="attr_cf2name" placeholder="Feature Name"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_cf2cost" placeholder="0"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="cfbuttons"&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;button type="roll" name="roll_cf2" value="&amp;{template:default} {{name= @{character_name} }} {{FEATURE= @{cf2name} }} {{COST= @{cf2cost} }} {{DESC.= @{classfeature2} }}"/&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="checkbox" name="attr_cf2poweruse" value="1"/&gt;&lt;span&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;br&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="checkbox" name="attr_cf2standard" class="sheet-standard" value = "1" /&gt; &lt;span class="sheet-standard"&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="checkbox" name="attr_cf2passive" class="sheet-passive" value = "1" /&gt; &lt;span class="sheet-passive"&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="checkbox" name="attr_cf2quick" class="sheet-quick" value = "1" /&gt; &lt;span class="sheet-quick"&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="checkbox" name="attr_cf2free" class="sheet-free" value = "1" /&gt; &lt;span class="sheet-free"&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="checkbox" name="attr_cf2movement" class="sheet-movement" value = "1" /&gt; &lt;span class="sheet-movement"&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="checkbox" name="attr_cf2reaction" class="sheet-reaction" value = "1" /&gt; &lt;span class="sheet-reaction"&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="checkbox" name="attr_cf2overdrive" class="sheet-overdrive" value = "1" /&gt; &lt;span class="sheet-overdrive"&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp; &lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;br&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="feature"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;textarea name="attr_classfeature2" class="sheet-open" placeholder="Class Feature"/&gt;&lt;/textarea&gt;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div style="clear: both;"&gt;&lt;/div&gt; &nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;div class="middle"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="power"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="label"&gt;Racial Feature&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="row"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="text" name="attr_rfname" placeholder="Feature Name"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="powerbuttons"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;button type="roll" name="roll_rf" value="&amp;{template:default} {{name= @{character_name} }} {{FEATURE= @{rfname} }} {{DESC.=@{racefeature}}}"/&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="checkbox" name="attr_rfuse" value="0"/&gt;&lt;span&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="feature"&gt; &lt;textarea name="attr_racefeature" class="sheet-open" placeholder="Racial Feature"/&gt;&lt;/textarea&gt;&lt;/div&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;br&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="perks"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="label"&gt;Perks&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;fieldset class="repeating_perks"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="row"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="text" name="attr_perkname" placeholder="Perk Name"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="perk"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;textarea name="attr_perk"&gt;&lt;/textarea&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/fieldset&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp; &nbsp; &lt;div class="right"&gt; &nbsp;&nbsp;&nbsp; &lt;div class="wallet"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="denerim"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_denerim"/&gt; &lt;label for="attr_denerim"&gt;DENERIM&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;br&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="stuff"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_needs"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_gear"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;br&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;label for= "attr_needs"&gt;NEEDS&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;label for="attr_gear"&gt;GEAR&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&lt;div style="clear: both;"&gt;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;br&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="stuffmax"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="text" name="attr_needs_max"/&gt; &lt;label for="attr_needs_max"/&gt;MAX&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="stuffmax"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="text" name="attr_gear_max"/&gt; &lt;label for="attr_gear_max"/&gt;MAX&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div style="clear: both;"&gt;&lt;/div&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="armor"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="label"&gt;Armor&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="row"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="text" name="attr_armor" placeholder="Armor Types" /&gt;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="armorrow"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;img src= " <a href="https://i.imgur.com/Sv6xERV.png" rel="nofollow">https://i.imgur.com/Sv6xERV.png</a> " alt="Image" height="26" width="26"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="text" name="attr_headarmor"/&gt; &lt;input type="number" name="attr_head"/&gt;&nbsp; &lt;br&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;img src= " <a href="https://i.imgur.com/ihpAJji.png" rel="nofollow">https://i.imgur.com/ihpAJji.png</a> " alt="Image" height="26" width="26"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="text" name="attr_bodyarmor"/&gt; &lt;input type="number" name="attr_body"/&gt; &lt;br&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;img src= " <a href="https://i.imgur.com/MQft85e.png" rel="nofollow">https://i.imgur.com/MQft85e.png</a> " alt="Image" height="26" width="26"/&gt; &nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="text" name="attr_legarmor"/&gt;&nbsp;&nbsp; &lt;input type="number" name="attr_legs"/&gt; &lt;br&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;img src= " <a href="https://i.imgur.com/mALegIU.png" rel="nofollow">https://i.imgur.com/mALegIU.png</a> " alt="Image" height="26" width="26"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="text" name="attr_shieldarmor"/&gt;&nbsp; &lt;input type="number" name="attr_shield"/&gt; &lt;br&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;div class="weapons"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="label"&gt;Weapons&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="row"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;textarea name="attr_proficiency" placeholder="Weapon Types"/&gt;&lt;/textarea&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;fieldset class="repeating_weapons"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="weaponrow"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;button type="roll" name="roll_weapon" value="!fxattack2 --@{character_id} --@{target|character_id} --@{weapon} --@{damagedie} --@{weaponfx} --@{selected|token_id} --@{target|token_id} --?{Roll Type| Standard,2d10| Benefit,3d10k2| Hindrance,3d10dh1} --?{Core Path Points|0}"/&gt; &lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="text" name="attr_weapon" placeholder="Weapon"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="weapondie"&gt;&nbsp; &lt;input type="text" name="attr_weaponfx" placeholder="FX"/&gt; &lt;input type="text" name="attr_damagedie" placeholder="DMG"/&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;br&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/fieldset&gt; &nbsp;&nbsp;&nbsp; &lt;/div&gt; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="label"&gt;Powers&lt;/div&gt; &lt;fieldset class="repeating_powers" data-groupname="repeating_powers"&gt; &nbsp;&nbsp;&nbsp; &lt;div class="power"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="row"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="text" name="attr_powername" placeholder="Power"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_powercost" placeholder="0"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="powerbuttons"&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;button type="roll" name="roll_power" value="!fxpower {{ --@{character_id} --@{target|character_id} --@{powername} --@{powercost} --@{powerfx} --@{selected|token_id} --@{target|token_id} --@{power} }}"/&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="checkbox" name="attr_poweruse" value="1"/&gt;&lt;span&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;br&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="checkbox" name="attr_standard" class="sheet-standard" value = "1" /&gt; &lt;span class="sheet-standard"&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="checkbox" name="attr_passive" class="sheet-passive" value = "1" /&gt; &lt;span class="sheet-passive"&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="checkbox" name="attr_quick" class="sheet-quick" value = "1" /&gt; &lt;span class="sheet-quick"&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="checkbox" name="attr_free" class="sheet-free" value = "1" /&gt; &lt;span class="sheet-free"&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="checkbox" name="attr_movement" class="sheet-movement" value = "1" /&gt; &lt;span class="sheet-movement"&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="checkbox" name="attr_reaction" class="sheet-reaction" value = "1" /&gt; &lt;span class="sheet-reaction"&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="checkbox" name="attr_overdrive" class="sheet-overdrive" value = "1" /&gt; &lt;span class="sheet-overdrive"&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp; &lt;/div&gt;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;br&gt;&nbsp; &lt;br&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="feature"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;textarea name="attr_power" class="sheet-open" placeholder="Description"/&gt;&lt;/textarea&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="text" name="attr_powerfx" placeholder="FX"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;br&gt; &lt;/fieldset&gt; &lt;div class="inventory"&gt; &nbsp;&nbsp;&nbsp; &lt;div class="label"&gt;Inventory&lt;/div&gt; &nbsp;&nbsp;&nbsp; &lt;div class="feature"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;textarea name="attr_inventory1" placeholder="Inventory"/&gt;&lt;/textarea&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;textarea name="attr_inventory2" placeholder="Inventory"/&gt;&lt;/textarea&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp; &lt;div class="resource2"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="text" name="attr_resourcetype2" placeholder="Resource 2"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="radio" name="attr_resource2" class="sheet-r0" checked="checked" value = "0" /&gt; &lt;span class="sheet-r0"&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="radio" name="attr_resource2" class="sheet-r1" value = "1" /&gt; &lt;span class="sheet-r1"&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="radio" name="attr_resource2" class="sheet-r2" value = "2" /&gt; &lt;span class="sheet-r2"&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="radio" name="attr_resource2" class="sheet-r3" value = "3" /&gt; &lt;span class="sheet-r3"&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="radio" name="attr_resource2" class="sheet-r4" value = "4" /&gt; &lt;span class="sheet-r4"&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="radio" name="attr_resource2" class="sheet-r5" value = "5" /&gt; &lt;span class="sheet-r5"&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="radio" name="attr_resource2" class="sheet-r6" value = "6" /&gt; &lt;span class="sheet-r6"&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/div&gt; &lt;div class="relationships"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="label"&gt;Relationships&lt;/div&gt; &nbsp;&nbsp;&nbsp; &lt;div class="feature"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;textarea name="attr_relationships" placeholder="Relationships"/&gt;&lt;/textarea&gt; &nbsp;&nbsp;&nbsp; &lt;/div&gt;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &lt;div style="clear: both;"&gt;&lt;/div&gt; &lt;br&gt; &lt;div class="story"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="label"&gt;Story&lt;/div&gt; &nbsp;&nbsp;&nbsp; &lt;div class="feature"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;textarea name="attr_story" placeholder="Once Upon a Time..."/&gt;&lt;/textarea&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/div&gt; &lt;br&gt; &lt;div class="advancement"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="radio" value="dreadnought" name="attr_class" class="sheet-class sheet-class-1"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="radio" value="driftwalker" name="attr_class" class="sheet-class sheet-class-2"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="radio" value="fellhunter" name="attr_class" class="sheet-class sheet-class-3"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="radio" value="judge" name="attr_class" class="sheet-class sheet-class-4"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="radio" value="mystic" name="attr_class" class="sheet-class sheet-class-5"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="radio" value="phantom" name="attr_class" class="sheet-class sheet-class-6"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="radio" value="priestchaplain" name="attr_class" class="sheet-class sheet-class-7"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="radio" value="priestwar" name="attr_class" class="sheet-class sheet-class-8"&gt; &nbsp;&nbsp;&nbsp; &lt;input type="radio" value="primalist" name="attr_class" class="sheet-class sheet-class-9"&gt;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="radio" value="sentinel" name="attr_class" class="sheet-class sheet-class-10"&gt;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;img class="sheet-class sheet-class-1" src=" <a href="https://i.imgur.com/EQSpV83.png" rel="nofollow">https://i.imgur.com/EQSpV83.png</a> " alt="Image"&gt; &nbsp;&nbsp;&nbsp; &lt;img class="sheet-class sheet-class-2" src=" <a href="https://i.imgur.com/TPchmZc.png" rel="nofollow">https://i.imgur.com/TPchmZc.png</a> " alt="Image"&gt; &nbsp;&nbsp;&nbsp; &lt;img class="sheet-class sheet-class-3" src=" <a href="https://i.imgur.com/XNtNyUd.png" rel="nofollow">https://i.imgur.com/XNtNyUd.png</a> " alt="Image"&gt; &nbsp;&nbsp;&nbsp; &lt;img class="sheet-class sheet-class-4" src=" <a href="https://i.imgur.com/ps0jXmP.png" rel="nofollow">https://i.imgur.com/ps0jXmP.png</a> " alt="Image"&gt; &nbsp;&nbsp;&nbsp; &lt;img class="sheet-class sheet-class-5" src=" <a href="https://i.imgur.com/3MLMg5I.png" rel="nofollow">https://i.imgur.com/3MLMg5I.png</a> " alt="Image"&gt; &nbsp;&nbsp;&nbsp; &lt;img class="sheet-class sheet-class-6" src=" <a href="https://i.imgur.com/umshIx3.png" rel="nofollow">https://i.imgur.com/umshIx3.png</a> " alt="Image"&gt; &nbsp;&nbsp;&nbsp; &lt;img class="sheet-class sheet-class-7" src=" <a href="https://i.imgur.com/X9CtZBM.png" rel="nofollow">https://i.imgur.com/X9CtZBM.png</a> " alt="Image"&gt; &nbsp;&nbsp;&nbsp; &lt;img class="sheet-class sheet-class-8" src=" <a href="https://i.imgur.com/X9CtZBM.png" rel="nofollow">https://i.imgur.com/X9CtZBM.png</a> " alt="Image"&gt; &nbsp;&nbsp;&nbsp; &lt;img class="sheet-class sheet-class-9" src=" <a href="https://i.imgur.com/aeSDorL.png" rel="nofollow">https://i.imgur.com/aeSDorL.png</a> " alt="Image"&gt; &nbsp;&nbsp;&nbsp; &lt;img class="sheet-class sheet-class-10" src=" <a href="https://i.imgur.com/DJ6Uw8L.png" rel="nofollow">https://i.imgur.com/DJ6Uw8L.png</a> " alt="Image"&gt; &nbsp;&nbsp;&nbsp; &lt;/div&gt; &lt;/div&gt; &lt;script type="text/worker"&gt; &nbsp;&nbsp;&nbsp; on("change:race", function () { &nbsp;&nbsp;&nbsp; getAttrs(['race'], function(values) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; const races = { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; none: {might: 0, agility: 0, mind: 0, presence: 0, racefeature: "Racial Feature"}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; human: {might: 1, agility: 1, mind: 1, presence: 1, rfname: "Tenacious", racefeature: "You may re-roll any roll and use the result you prefer. Can be used once per Full Rest"}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; vallan: {might: 0, agility: 2, mind: 1, presence: 1, rfname: "Harmony", racefeature: "You may either spend a Free action to grant an extra HL+1d4 to yourself and all Adjacent Allies on Defense rolls against a single incoming attack, or spend a few moments to form an empathic bond with a single Nearby Ally, granting them a +1d4 bonus on a single skill check. Either effect must be activated before the roll is made. Can be used once per Full Rest"}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; furian: {might: 2, agility: 1, mind: 0, presence: 1, rfname: "Unbound", racefeature: "Deal your highest Attribute score as extra damage on a single attack, or you may add half your Level to your Might score on a skill check. Can be used safely once per Full Rest. You may attempt to use this more than once per Full Rest but risk losing control. Roll 1d10 on subsequent attempts. Rolling below a 6 causes you to perform a single attack (with the Unbound bonus) on an ally of the GM’s choosing or yourself with that attack. The threshold for losing control increases by 1 with each subsequent attempt."}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; afflicted: {might: 1, agility: 1, mind: 2, presence: 0, rfname: "Grisly Triage", racefeature: "If there are fresh corpses after a battle, a quick infusion of their vital fluids or electrical charge invigorates you and heals you for 1d6 + [2×Level] hitpoints. You may spend an additional 5 minutes and 1 Gear to scavenge for parts that will grant you 1 Recuperation. Can be used once per Full Rest."} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; const race = values.race;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (!races.hasOwnProperty( race )) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log("Error: The item " + race + " is not found within the races Object."); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; const scores = races[race]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; setAttrs(scores); &nbsp;&nbsp;&nbsp; }); }); &nbsp; on("change:class", function () { &nbsp;&nbsp;&nbsp; getAttrs(['class','might','mind','presence','agility', 'hp'], function(values) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; const classes = { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; none: {main: "Main Attribute", ar: 0, hp: 10, resourcetype: "Resource", resource: 0, resource_max: 10, recharge: "d4", recup_die: "d10", armor: "Armor Types", proficiency: "Weapon Types"}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dreadnought: {main: "Might", ar: (values.might), hp_max: 14 + Number((values.might)), hp: 14 + Number((values.might)), resourcetype: "Fury (6)" , resource: 6, resource_max: 6, recharge: "d4", recup_die: "d10", armor: "Light, Heavy", proficiency: "Light Melee, Medium Melee", cf1name: "Shieldbreaker", cf1cost: 0, classfeature1: "PASSIVE - Your Melee attacks gain +1 Armour Penetration, allowing you to ignore 1 AV when calculating damage. Shieldbreaker does not provide additional physical damage if the target has no AV; it only ignores what AV the target has. Bonus increases to: • +2 at level 5 • +3 at level 9", cf2name: "Cleave", cf2cost: 1, classfeature2: "STANDARD - Roll your Basic Attack. Roll 1d4 to determine how many ADJACENT enemies are struck by your attack. Success: You deal 1d10+HL damage. Failure. You deal half damage."}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; driftwalker: {main: "Mind", ar: (values.mind), hp_max: 10 + Number((values.mind)), hp: 10 + Number((values.mind)), resourcetype: "Bile (8)" , resource: 8, resource_max: 8, recharge: "d6", recup_die: "d10", armor: "Light", proficiency: "Medium Melee, Heavy Melee", cf1name: "Dark Bargain", cf1cost: 2 + (values.mind), classfeature1: "QUICK - BLOOD - (MIND added as additional Blood cost) Recharge 1 Bile", cf2name: "Siphoning Strike", cf2cost: 2, classfeature2: "STANDARD - BILE COST - ADJACENT&nbsp; - Roll your Basic Attack. Success: You deal basic attack damage and heal for HL + Mind. Failure: You deal half damage and heal for HL."}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fellhunter: {main: "Agility", ar: (values.agility), hp_max: 10 + Number((values.agility)), hp: 10 + Number((values.agility)), resourcetype: "Focus (6)", resource: 6, resource_max: 6, recharge: "d4", recup_die: "d8", armor: "Light", proficiency: "Light Melee, All Ranged", cf1name: "Point Blank Shot", cf1cost: 0, classfeature1: "You do not suffer the usual Hindrance penalty for attacking with a ranged weapon while ADJACENT to an enemy.", cf2name: "Vault", cf2cost: 2, classfeature2: "Use your Movement action to Vault up to a NEARBY distance into or away from danger. While Vaulting you receive Benefit against all Provoked Attacks."}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; judge: {main: "Might", ar: (values.might), hp_max: 12 + Number((values.might)), hp: 12 + Number((values.might)), resourcetype: "Fervor (6)", resource: 6, resource_max: 6, recharge: "d4", recup_die: "d10", armor: "Light, Heavy, Shields", proficiency: "Medium Melee, Heavy Melee", cf1name: "Zealot", cf1cost: 0, classfeature1: "When not wielding a shield: You can choose to re-roll any weapon damage dice that come up as a 1 or 2. You must accept the next roll even if it is a 1 or 2. When wielding a shield: You can choose to re-roll a Defense roll if the 2d10 portion of the roll comes up in the range of 2–5. You must accept the next roll no matter what it is.", cf2name: "Holy Smite", cf2cost: 1, classfeature2: "QUICK -&nbsp; Upon dealing Melee damage, you may add an additional +1d4 Divine damage. Bonus increases to: • +1d6 at level 5 • +1d8 at level 10."}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; mystic: {main: "Mind", ar: (values.mind), hp_max: 10 + Number((values.mind)), hp: 10 + Number((values.mind)), resourcetype: "Mana (10)" , resource: 10, resource_max: 10, recharge: "d8", recup_die: "d8", armor: "None", proficiency: "Light Melee, Light Ranged", cf1name: "Force Bolt", cf1cost: 0, classfeature1:"STANDARD - VERY FAR - Roll your Basic Attack. Success. You deal 1d8+MIND damage. Failure. You miss.", cf2name: "Amplify Magick", cf2cost: 0, classfeature2: "STANDARD - Roll your Basic Attack to determine X. Your next damaging spell will deal an extra X damage in the elemental form of that spell. Amplify Magick does not stack and you must declare which spell you are Amplifying when you activate Amplify Magick. When you use Amplify Magick, roll 1d10. 1–5: Cauterize. Heal for +MIND. 6–10: Arcane Field. Gain +MIND to your AV for 1 round. X = 2-8: 1d6. 9-19: 2d4. 20-24: 2d6. 25+: 2d8."}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; phantom: {main: "Agility", ar: (values.agility), hp_max: 10 + Number((values.agility)), hp: 10 + Number((values.agility)), resourcetype: "Guile (8)", resource: 8, resource_max: 8, recharge: "d4", recup_die: "d8", armor: "Light", proficiency: "Light Melee, Medium Melee, Thrown", cf1name: "Backstab", cf1cost: 0, classfeature1:"BACKSTAB - Anytime you attack an enemy who is ADJACENT to an Ally, add 1d4 damage on a successful attack. Attacking directly from stealth or surprise grants this bonus as well. Bonus increases to: • +2d4 at level 5 • +3d4 at level 10", cf2name: "Tumble", cf2cost: 1, classfeature2: "TUMBLE - You may activate Tumble immediately after taking&nbsp; Physical damage. Expend 1 Guile to reduce the incoming Physical damage by +AGILITY. You can expend multiple Guile for further damage reduction."}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; priestchaplain: {main: "Mind", ar: (values.mind), hp_max: 10 + Number((values.mind)), hp: 10 + Number((values.mind)), resourcetype: "Faith (10)" , resource: 10, resource_max: 10, recharge: "d6", recup_die: "d8", armor: "Light", proficiency: "Light Melee, Medium Melee", cf1name: "Healing Charge", cf1cost: 0, classfeature1:"QUICK - FAR - HOLD 4 - Each Healing Charge heals for 1+HL+MIND. You may expend multiple charges at once on the same target. You start with 1 Healing Charge and every Full Rest grants you 1 Healing Charge.", cf2name: "Sacred Bolt", cf2cost: 3, classfeature2: "STANDARD - FAR - Success. You deal 1d6+HL+MIND Divine damage and gain 1 Healing Charge. Failure. You deal half damage and gain 1 Healing Charge."}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; priestwar: {main: "Mind", ar: (values.mind), hp_max: 10 + Number((values.mind)), hp: 10 + Number((values.mind)), resourcetype: "Faith (6)" , resource: 6, resource_max: 6, recharge: "d4", recup_die: "d8", armor: "Light, Heavy", proficiency: "Light Melee, Medium Melee, Heavy Melee, Shields", cf1name: "Healing Charge", cf1cost: 0, classfeature1:"QUICK - FAR - HOLD 3 - Each Healing Charge heals for 1+HL+MIND. You may expend multiple charges at once on the same target. You start with 1 Healing Charge and every Full Rest grants you 1 Healing Charge.", cf2name: "Holy Strike", cf2cost: 2, classfeature2: "HOLY STRIKE - STANDARD - 2 FAITH - ADJACENT - Success. You deal your basic attack damage and gain 1 Healing Charge. Failure. You deal half of your basic attack damage and gain 1 Healing Charge."}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; primalist: {main: "Mind", ar: (values.mind), hp_max: 10 + Number((values.mind)), hp: 10 + Number((values.mind)), resourcetype: "Spirit (6)" , resource: 6, resource_max: 6, recharge: "d4", recup_die: "d8", armor: "Light", proficiency: "Light Melee, Medium Melee", cf1name: "Aspect of the Boar", cf1cost: 2, classfeature1:"QUICK - FEROCITY- Increase your MIGHT by +HL. Increase your Max HP and current HP by +MIND. The Max HP is lost when you are no longer in the Aspect of the Boar. Gives you access to the Brace for Impact DREADNOUGHT power. This Reaction power costs 2 Ferocity to use.", cf2name: "Aspect of the Tiger", cf2cost: 2, classfeature2: "QUICK - FEROCITY - Increase your AGILITY by +HL. Increase your damage die for your Basic Attack to 1d12. Gives you access to the PHANTOM Tumble power. You spend Ferocity in place of Guile to achieve Tumble’s effects."}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; sentinel: {main: "Might", ar: (values.might), hp_max: 12 + Number((values.might)), hp: 12 + Number((values.might)), resourcetype: "Discipline (6)" , resource: 6, resource_max: 6, recharge: "d4", recup_die: "d10", armor: "Light, Heavy, Shields", proficiency: "Light Melee, Medium Melee", cf1name: "Bastion", cf1cost: 0, classfeature1:"When wielding your shield, add the shield’s AV to your DR.", cf2name: "Vigilance", cf2cost: 1, classfeature2: "QUICK - Select a single enemy anywhere on the battlefield to become your point of focus. Any time that enemy attacks a target that is not you, you may instantly make a Basic Attack as a Free action against that enemy if they are ADJACENT to you at the time they made the attack. Vigilance lasts until the end of battle or if you use it again to change to a different target."} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; const classy = values.class;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (!classes.hasOwnProperty( classy )) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log("Error: The item " + classy + " is not found within the classes Object."); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; const metrics = classes[classy]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; setAttrs(metrics); &nbsp;&nbsp;&nbsp; }); }); on("change:might", function() { &nbsp;&nbsp;&nbsp; getAttrs(["might", "recupes_max", "recupes", "needs_max", "gear_max"], function(values) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; setAttrs({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "recupes_max": 2 + ( Math.floor(values.might / 2)), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "recupes": 2 + ( Math.floor(values.might / 2)) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if (values.might == -2) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; setAttrs({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"needs_max": 1, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"gear_max": 4 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if (values.might == -1) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; setAttrs({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"needs_max": 2, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"gear_max": 5 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if (values.might == 0) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; setAttrs({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"needs_max": 3, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"gear_max": 6 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if (values.might == 1) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; setAttrs({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"needs_max": 4, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"gear_max": 7 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if (values.might == 2) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; setAttrs({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"needs_max": 4, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"gear_max": 8 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if (values.might == 3) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; setAttrs({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"needs_max": 5, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"gear_max": 9 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if (values.might == 4) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; setAttrs({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"needs_max": 5, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"gear_max": 10 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if (values.might == 5) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; setAttrs({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"needs_max": 6, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"gear_max": 11 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if (values.might == 6) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; setAttrs({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"needs_max": 6, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"gear_max": 12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if (values.might == -2) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; setAttrs({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"needs_max": 7, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"gear_max": 13 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp; }); }); on("change:mind", function() {&nbsp; &nbsp;&nbsp;&nbsp; getAttrs(["mind","mr"], function(values) { &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; setAttrs({&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; "mr": parseInt(values["mind"],10) || 0 &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp; }); }); on("change:agility", function() {&nbsp; &nbsp;&nbsp;&nbsp; getAttrs(["agility","speed", "dr"], function(values) { &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; setAttrs({&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; "speed": values.agility, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "dr": values.agility &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp; }); }); &lt;/script&gt;

CSS CODE: select { text-indent: 75px; } .charsheet { &nbsp;&nbsp;&nbsp; width: 850px; &nbsp;&nbsp;&nbsp; color: rgb(150,118,169); } .sheet-wrapper { &nbsp;&nbsp;&nbsp; width: 100%; &nbsp;&nbsp;&nbsp; height: 3000px; &nbsp;&nbsp;&nbsp; background-color: #000; &nbsp;&nbsp;&nbsp; position: relative; &nbsp;&nbsp;&nbsp; font: 14px/15px "Arial Black", Gadget, sans-serif; &nbsp;&nbsp;&nbsp; color: black; } .sheet-full { &nbsp;&nbsp;&nbsp; position: relative; &nbsp;&nbsp;&nbsp; width: 850px; &nbsp;&nbsp;&nbsp; height: 290px; &nbsp;&nbsp;&nbsp; padding: 40px; &nbsp;&nbsp;&nbsp; text-align: center; &nbsp;&nbsp;&nbsp; margin-left: auto; &nbsp;&nbsp;&nbsp; margin-right: auto; &nbsp;&nbsp;&nbsp; background-image: url(" <a href="https://ksr-ugc.imgix.net/assets/012/959/238/7072d904e9636287a5c1b07028e0611c_original.png?ixlib=rb-2.1.0&amp;crop=faces&amp;w=1024&amp;h=576&amp;fit=crop&amp;v=1467948153&amp;auto=format&amp;frame=1&amp;q=92&amp;s=cc4a50a332720265ceffb87f5fed3db9" rel="nofollow">https://ksr-ugc.imgix.net/assets/012/959/238/7072d904e9636287a5c1b07028e0611c_original.png?ixlib=rb-2.1.0&amp;crop=faces&amp;w=1024&amp;h=576&amp;fit=crop&amp;v=1467948153&amp;auto=format&amp;frame=1&amp;q=92&amp;s=cc4a50a332720265ceffb87f5fed3db9</a> "); &nbsp;&nbsp;&nbsp; background-repeat: no-repeat; &nbsp;&nbsp;&nbsp; background-size: 850px; } .sheet-attr { &nbsp;&nbsp;&nbsp; width: 48%; &nbsp;&nbsp;&nbsp; padding: 10px; &nbsp;&nbsp;&nbsp; float: left; &nbsp;&nbsp;&nbsp; position: relative; &nbsp;&nbsp;&nbsp; right: 100px; &nbsp; } .sheet-left { &nbsp;&nbsp;&nbsp; float: left; &nbsp;&nbsp;&nbsp; width: 33%; &nbsp;&nbsp;&nbsp; padding: 10px; } /* Creates the right hand column */ .sheet-right { &nbsp;&nbsp; width: 30%; &nbsp;&nbsp;&nbsp; float: left; &nbsp;&nbsp;&nbsp;&nbsp; padding: 10px; } .sheet-middle { &nbsp;&nbsp; width: 30%; &nbsp;&nbsp;&nbsp; float: left; &nbsp; padding: 10px; } /* steampunk background for headers */ .sheet-label { &nbsp;&nbsp;&nbsp; color: white; &nbsp;&nbsp;&nbsp; font-size: 15px; &nbsp;&nbsp;&nbsp; background-image: url(" <a href="https://image.shutterstock.com/image-vector/seamless-vector-mechanical-pattern-texture-260nw-1112369252.jpg" rel="nofollow">https://image.shutterstock.com/image-vector/seamless-vector-mechanical-pattern-texture-260nw-1112369252.jpg</a> "); &nbsp;&nbsp;&nbsp; padding: 5px; } /* Keeps divs position relative to the div on top, even if the top div expands downwards */ .sheet-clearfix::after{ &nbsp;&nbsp;&nbsp; content: ""; &nbsp;&nbsp;&nbsp; clear: both; &nbsp;&nbsp;&nbsp; display: table; } .sheet-leftCol { &nbsp;&nbsp;&nbsp; float: left; &nbsp;&nbsp;&nbsp; width: 30%; } .sheet-midCol { &nbsp;&nbsp;&nbsp; float: left; &nbsp;&nbsp;&nbsp; width: 30%; } .sheet-rightCol { &nbsp;&nbsp;&nbsp; float: left; &nbsp;&nbsp;&nbsp; width: 30%; } /*div class styling*/ .sheet-character, .sheet-label, .sheet-feature, .sheet-row, .sheet-attrow, .sheet-armorrow, .sheet-weaponrow, .sheet-recupbox, .sheet-corepath, .sheet-perk { &nbsp;&nbsp;&nbsp; background-color: #a0a4e3; &nbsp;&nbsp;&nbsp;&nbsp; width: 100%; &nbsp;&nbsp;&nbsp;&nbsp; padding: 5px; &nbsp;&nbsp;&nbsp; border-style: hidden solid solid solid; &nbsp;&nbsp;&nbsp; border-width: 1px; &nbsp;&nbsp;&nbsp; border-color: black; &nbsp;&nbsp;&nbsp; -webkit-box-shadow: 1px 1px 2px 0px #3d3d29; &nbsp;&nbsp;&nbsp; -moz-box-shadow: 1px 1px 2px 0px #3d3d29; &nbsp;&nbsp;&nbsp; box-shadow: 1px 1px 2px 0px #3d3d29; &nbsp;&nbsp;&nbsp; overflow: hidden; } .sheet-character label, .sheet-feature label, .sheet-row label, .sheet-recupes label, .sheet-power label, .sheet-cf label { &nbsp;&nbsp;&nbsp; margin-right: 5px; &nbsp;&nbsp;&nbsp; font-size: 13px; &nbsp;&nbsp;&nbsp; color: black; &nbsp;&nbsp;&nbsp; margin-bottom: 0px; } .sheet-character input[type=text] { &nbsp;&nbsp;&nbsp; text-align: center; &nbsp;&nbsp;&nbsp; width: 30%; &nbsp;&nbsp;&nbsp; margin-bottom: 5px; &nbsp;&nbsp;&nbsp; background: transparent; &nbsp;&nbsp;&nbsp; display: inline-block; &nbsp;&nbsp;&nbsp; border-color: black; &nbsp;&nbsp;&nbsp; border-style: hidden hidden solid hidden; &nbsp;&nbsp;&nbsp; border-width: 2px; &nbsp;&nbsp;&nbsp; border-bottom-left-radius: 0px; &nbsp;&nbsp;&nbsp; border-bottom-right-radius: 0px; } .sheet-character input[type=number] { &nbsp;&nbsp;&nbsp; text-align: center; &nbsp;&nbsp;&nbsp; width: 15%; &nbsp;&nbsp;&nbsp; margin-bottom: 5px; &nbsp;&nbsp;&nbsp; } .sheet-row input[type=number] , .sheet-corepath input[type=number] { &nbsp;&nbsp;&nbsp;&nbsp; text-align: center; &nbsp;&nbsp;&nbsp; font-family: "Arial Black", Gadget, sans-serif; &nbsp;&nbsp;&nbsp; font-size: 20px; &nbsp;&nbsp;&nbsp; width: 40px; &nbsp;&nbsp;&nbsp; border-color: #3d3d29; &nbsp;&nbsp;&nbsp; border-width: 2px; &nbsp;&nbsp;&nbsp; -webkit-box-shadow: 1px 1px 2px 0px #3d3d29; &nbsp;&nbsp;&nbsp; -moz-box-shadow: 1px 1px 2px 0px #3d3d29; &nbsp;&nbsp;&nbsp; box-shadow: 1px 1px 2px 0px #3d3d29; } .sheet-recupes { &nbsp;&nbsp;&nbsp; float: left; &nbsp;&nbsp;&nbsp; width: 10% } .sheet-recupes label { &nbsp;&nbsp;&nbsp; color: white; &nbsp;&nbsp;&nbsp; text-align: center; &nbsp;&nbsp;&nbsp; margin-left: 10px; &nbsp;&nbsp;&nbsp; margin-top: 10px; &nbsp;&nbsp;&nbsp; padding: 5px; &nbsp;&nbsp;&nbsp; margin-bottom: -15px; }&nbsp;&nbsp;&nbsp; .sheet-recupes button[type=roll] { &nbsp;&nbsp;&nbsp; margin-bottom: 15px; } .sheet-recupes button[type=roll]::before { &nbsp;&nbsp;&nbsp; font-family: dicefontd10; &nbsp;&nbsp;&nbsp; content: "K"; &nbsp;&nbsp;&nbsp; font-size: 5em; &nbsp;&nbsp;&nbsp; color: #a0a4e3; &nbsp;&nbsp;&nbsp; float: left; &nbsp;&nbsp;&nbsp; background-color: transparent; &nbsp;&nbsp;&nbsp; border: none; &nbsp;&nbsp;&nbsp; line-height: 15px; &nbsp;&nbsp;&nbsp; background-image: none; &nbsp;&nbsp;&nbsp; text-shadow: none; &nbsp;&nbsp;&nbsp; box-shadow: none; &nbsp;&nbsp;&nbsp; padding: 5px; &nbsp;&nbsp;&nbsp; margin-left: 20px; &nbsp;&nbsp;&nbsp; margin-top: 10px; &nbsp;&nbsp;&nbsp; font-weight: normal; &nbsp;&nbsp;&nbsp; transition: 0.3s; &nbsp;&nbsp;&nbsp; } .sheet-recupes button[type=roll]:hover::before { &nbsp;&nbsp;&nbsp; color: #dbd879; } .sheet-recupes-control[value="d10"] + .sheet-recupes-display::before { &nbsp;&nbsp;&nbsp; font-family: dicefontd10; } .sheet-recupes-control[value="d8"] + .sheet-recupes-display::before { &nbsp;&nbsp;&nbsp; font-family: dicefontd8; &nbsp;&nbsp;&nbsp; content: "H"; } .sheet-recupes input[type=number] { &nbsp;&nbsp;&nbsp; margin-left: 50%; &nbsp;&nbsp;&nbsp; margin-top: 20px; &nbsp;&nbsp;&nbsp;&nbsp; text-align: center; &nbsp;&nbsp;&nbsp; font-family: "Arial Black", Gadget, sans-serif; &nbsp;&nbsp;&nbsp; font-size: 20px; &nbsp;&nbsp;&nbsp; width: 45px; &nbsp;&nbsp;&nbsp; border-color: #a0a4e3; &nbsp;&nbsp;&nbsp; border-width: 5px; &nbsp;&nbsp;&nbsp; border-style: inset; &nbsp;&nbsp;&nbsp; -webkit-box-shadow: 1px 1px 2px 0px #3d3d29; &nbsp;&nbsp;&nbsp; -moz-box-shadow: 1px 1px 2px 0px #3d3d29; &nbsp;&nbsp;&nbsp; box-shadow: 1px 1px 2px 0px #3d3d29; } .sheet-hp_max { &nbsp;&nbsp;&nbsp; display: inline-block; &nbsp;&nbsp;&nbsp; background-color: white; &nbsp;&nbsp;&nbsp;&nbsp; width: 50px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height: 40px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border: 50px solid transparent; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 18px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-style: inset; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-color: #a0a4e3; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-width: 6px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin-left: 33px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin-top: -10px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text-align: center; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; position: relative; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; resize: vertical; &nbsp;&nbsp;&nbsp;&nbsp; -webkit-box-shadow: 1px 1px 2px 0px #3d3d29; &nbsp;&nbsp;&nbsp; -moz-box-shadow: 1px 1px 2px 0px #3d3d29; &nbsp;&nbsp;&nbsp;&nbsp; box-shadow: 1px 1px 2px 0px #3d3d29; &nbsp;&nbsp;&nbsp;&nbsp; z-index: 1; } &nbsp;&nbsp;&nbsp; .sheet-hp_max input[type=number] { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 20px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: 50px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height: 18px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border: none; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display: block; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; outline: none; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text-align: center; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; position: relative; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin-bottom: 10px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: red; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; z-index: -1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-color: transparent; } .sheet-hp_max label{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display: block; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 10px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height: 5px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text-align: center; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border: none; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-color: black; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; outline: none; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; position: relative; } .sheet-hp { &nbsp;&nbsp;&nbsp; width: 126px; &nbsp;&nbsp;&nbsp; height: 126px; &nbsp;&nbsp;&nbsp; border: outset 2px #8504b8; &nbsp;&nbsp;&nbsp; border-radius: 50%; &nbsp;&nbsp;&nbsp; margin-bottom: -110px; &nbsp;&nbsp;&nbsp; margin-top: -15px; &nbsp;&nbsp;&nbsp; } .sheet-hp input[type=number] { &nbsp;&nbsp;&nbsp; position: relative; &nbsp;&nbsp;&nbsp; top: 3px; &nbsp;&nbsp;&nbsp; width: 120px; &nbsp;&nbsp;&nbsp; height: 120px; &nbsp;&nbsp;&nbsp; text-align: center; &nbsp;&nbsp;&nbsp; resize: vertical; &nbsp;&nbsp;&nbsp; font-size: 30px; &nbsp;&nbsp;&nbsp; margin-left: 3px; &nbsp;&nbsp; vertical-align: center; &nbsp;&nbsp;&nbsp; border-radius: 50%; &nbsp;&nbsp;&nbsp; border-style: outset; &nbsp;&nbsp;&nbsp; border-color: #a0a4e3; &nbsp;&nbsp;&nbsp; border-width: 5px; &nbsp;&nbsp;&nbsp; -webkit-box-shadow: 1px 1px 2px 0px #3d3d29; &nbsp;&nbsp;&nbsp; -moz-box-shadow: 1px 1px 2px 0px #3d3d29; &nbsp;&nbsp;&nbsp; box-shadow: 1px 1px 2px 0px #3d3d29; } .sheet-fading { &nbsp;&nbsp;&nbsp; float: left; &nbsp;&nbsp;&nbsp; margin-bottom: -20px; &nbsp;&nbsp;&nbsp; margin-top: -10px; &nbsp;&nbsp;&nbsp; } .sheet-fading label { &nbsp;&nbsp;&nbsp; color: white; &nbsp;&nbsp;&nbsp; position: absolute; &nbsp;&nbsp;&nbsp; left: 220px; &nbsp;&nbsp;&nbsp; top: 500px; &nbsp;&nbsp;&nbsp; font-size: 14px; &nbsp;&nbsp;&nbsp; margin-top: -15px; &nbsp;&nbsp;&nbsp; } .sheet-fading button[type=roll] { &nbsp;&nbsp;&nbsp; position: absolute; &nbsp;&nbsp;&nbsp; left: 232px; &nbsp;&nbsp;&nbsp; top: 640px; &nbsp;&nbsp;&nbsp; margin-bottom: -40px; &nbsp;&nbsp;&nbsp; color: red; &nbsp;&nbsp;&nbsp; font-size: 2em; &nbsp;&nbsp;&nbsp; line-height: 27px; } .sheet-fading input[type="checkbox"] { &nbsp;&nbsp;&nbsp; opacity: 0; &nbsp;&nbsp;&nbsp; position: absolute; &nbsp;&nbsp;&nbsp; margin-top: -33px; &nbsp;&nbsp;&nbsp;&nbsp; margin-bottom: -50px; &nbsp;&nbsp;&nbsp; left: 245px; &nbsp;&nbsp;&nbsp; width: 16px; &nbsp;&nbsp;&nbsp; height: 16px; &nbsp;&nbsp;&nbsp; cursor: pointer; &nbsp;&nbsp;&nbsp; z-index: 1; } .sheet-fading input[type="checkbox"] + span::before { &nbsp;&nbsp;&nbsp; display: inline-block; &nbsp;&nbsp;&nbsp; content: url(" <a href="https://i.imgur.com/tIfx4pk.png" rel="nofollow">https://i.imgur.com/tIfx4pk.png</a> ") ""; &nbsp;&nbsp;&nbsp; position: absolute; &nbsp;&nbsp;&nbsp; left: 28%; &nbsp;&nbsp;&nbsp; margin-top: -4%; &nbsp;&nbsp;&nbsp;&nbsp; margin-bottom: -50px; &nbsp;&nbsp;&nbsp; zoom: 4%; } .sheet-fading input[type="checkbox"]:checked + span::before { &nbsp;&nbsp;&nbsp; display: inline-block; &nbsp;&nbsp;&nbsp; content: url(" <a href="https://i.imgur.com/16DiRvM.png" rel="nofollow">https://i.imgur.com/16DiRvM.png</a> ") ""; &nbsp;&nbsp;&nbsp; zoom: 4%; } .sheet-corepath { &nbsp;&nbsp;&nbsp; padding: 5px; &nbsp;&nbsp;&nbsp; margin-bottom: 10px; } .sheet-corepath input[type=text] { &nbsp;&nbsp;&nbsp; text-align: center; &nbsp;&nbsp;&nbsp; width: 72%; &nbsp;&nbsp;&nbsp; margin-bottom: -10px; &nbsp;&nbsp;&nbsp; margin-top: -10px; &nbsp;&nbsp;&nbsp; background: transparent; &nbsp;&nbsp;&nbsp; display: inline-block; &nbsp;&nbsp;&nbsp; border-color: black; &nbsp;&nbsp;&nbsp; border-style: hidden hidden solid hidden; &nbsp;&nbsp;&nbsp; border-width: 2px; &nbsp;&nbsp;&nbsp; border-bottom-left-radius: 0px; &nbsp;&nbsp;&nbsp; padding: 0px; &nbsp;&nbsp;&nbsp; border-bottom-right-radius: 0px; } .sheet-outer { &nbsp; display: inline-block; &nbsp; -webkit-border-radius: 10px; &nbsp; -moz-border-radius: 10px; &nbsp; border-radius: 10px; &nbsp; border: 1px solid red; } .sheet-attrow input[type=number] { &nbsp;&nbsp;&nbsp; margin-right: 45px; &nbsp;&nbsp;&nbsp;&nbsp; text-align: center; &nbsp;&nbsp;&nbsp; font-family: "Arial Black", Gadget, sans-serif; &nbsp;&nbsp;&nbsp; font-size: 20px; &nbsp;&nbsp;&nbsp; width: 45px; &nbsp;&nbsp;&nbsp; border-color: #3d3d29; &nbsp;&nbsp;&nbsp; border-width: 2px; &nbsp;&nbsp;&nbsp; -webkit-box-shadow: 1px 1px 2px 0px #3d3d29; &nbsp;&nbsp;&nbsp; -moz-box-shadow: 1px 1px 2px 0px #3d3d29; &nbsp;&nbsp;&nbsp; box-shadow: 1px 1px 2px 0px #3d3d29; } .sheet-character select { &nbsp;&nbsp;&nbsp; border: none; &nbsp;&nbsp;&nbsp; font-family: "Arial Black", Gadget, sans-serif; &nbsp;&nbsp;&nbsp; text-align: center; &nbsp;&nbsp;&nbsp; margin-bottom: 5px; &nbsp;&nbsp;&nbsp; padding: 5px; &nbsp;&nbsp;&nbsp; background: transparent; &nbsp;&nbsp;&nbsp; display: inline-block; &nbsp;&nbsp;&nbsp; border-color: black; &nbsp;&nbsp;&nbsp; border-style: hidden hidden solid hidden; &nbsp;&nbsp;&nbsp; border-width: 2px; &nbsp;&nbsp;&nbsp; border-bottom-left-radius: 0px; &nbsp;&nbsp;&nbsp; border-bottom-right-radius: 0px; &nbsp;&nbsp;&nbsp; } &nbsp;&nbsp; .sheet-character textarea { &nbsp;&nbsp;&nbsp; font-family: "Arial Black", Gadget, sans-serif; &nbsp;&nbsp;&nbsp; font-size: 15px; &nbsp;&nbsp;&nbsp; float: right; &nbsp;&nbsp;&nbsp; width: 30%; &nbsp;&nbsp;&nbsp; height: 20px; &nbsp;&nbsp;&nbsp; padding: 10px; &nbsp;&nbsp;&nbsp; margin-left: 5px; &nbsp;&nbsp;&nbsp; margin-right:5px; &nbsp;&nbsp;&nbsp; margin-bottom: 0px; } .sheet-power, .sheet-cf { &nbsp;&nbsp;&nbsp; float: left; &nbsp;&nbsp;&nbsp; width: 100%; &nbsp;&nbsp;&nbsp; margin: 1px; &nbsp;&nbsp;&nbsp; margin-bottom: 2px; &nbsp;&nbsp;&nbsp; background-color: #a0a4e3; } .sheet-power input[type="text"], .sheet-cf input[type="text"] { &nbsp; text-align: center; &nbsp;&nbsp;&nbsp; width: 50%; &nbsp;&nbsp;&nbsp; margin-bottom: -10px; &nbsp;&nbsp;&nbsp; margin-top: -10px; &nbsp;&nbsp;&nbsp; background: transparent; &nbsp;&nbsp;&nbsp; display: inline-block; &nbsp;&nbsp;&nbsp; border-color: black; &nbsp;&nbsp;&nbsp; border-style: hidden hidden solid hidden; &nbsp;&nbsp;&nbsp; border-width: 2px; &nbsp;&nbsp;&nbsp; border-bottom-left-radius: 0px; &nbsp;&nbsp;&nbsp; padding: 0px; &nbsp;&nbsp;&nbsp; border-bottom-right-radius: 0px; &nbsp;&nbsp;&nbsp; } .sheet-power input[type="number"], .sheet-cf input[type="number"] { &nbsp;&nbsp;&nbsp; border-radius: 50%; &nbsp;&nbsp;&nbsp; text-align: center; &nbsp;&nbsp;&nbsp; margin-top: 3px; &nbsp;&nbsp;&nbsp; margin-bottom: -19px; &nbsp;&nbsp;&nbsp; padding: 0px; &nbsp;&nbsp;&nbsp; width: 45px; &nbsp;&nbsp;&nbsp; height: 45px; &nbsp;&nbsp;&nbsp; font-size: 20px; &nbsp;&nbsp;&nbsp;&nbsp; border-color: #3d3d29; &nbsp;&nbsp;&nbsp; border-width: 2px; &nbsp;&nbsp;&nbsp; -webkit-box-shadow: 1px 1px 2px 0px #3d3d29; &nbsp;&nbsp;&nbsp; -moz-box-shadow: 1px 1px 2px 0px #3d3d29; &nbsp;&nbsp;&nbsp; box-shadow: 1px 1px 2px 0px #3d3d29; } .sheet-power input[type="checkbox"], .sheet-cf input[type="checkbox"] { &nbsp;&nbsp; opacity: 0; &nbsp;&nbsp; position: relative; &nbsp;&nbsp; z-index: 1; &nbsp;&nbsp; width: 15px; } .sheet-cf input[type="checkbox"] + span::before, .sheet-power input[type="checkbox"] + span::before { &nbsp;&nbsp;&nbsp; font-size: 16px; &nbsp;&nbsp;&nbsp; color: black; &nbsp;&nbsp;&nbsp; position: relative; &nbsp;&nbsp;&nbsp; display: inline-block; &nbsp;&nbsp;&nbsp; margin-right: -17px; &nbsp;&nbsp;&nbsp; right: 18px; &nbsp;&nbsp;&nbsp; z-index: 0; &nbsp;&nbsp;&nbsp; cursor: pointer; &nbsp;&nbsp;&nbsp; transition: color 0.3s; } input[type="checkbox"] + span[class="sheet-standard"]::before { &nbsp;&nbsp;&nbsp; content: "S"; } input[type="checkbox"] + span[class="sheet-passive"]::before { &nbsp;&nbsp;&nbsp; content: "P"; } input[type="checkbox"] + span[class="sheet-quick"]::before { &nbsp;&nbsp;&nbsp; content: "Q"; } input[type="checkbox"] + span[class="sheet-free"]::before { &nbsp;&nbsp;&nbsp; content: "F"; } input[type="checkbox"] + span[class="sheet-movement"]::before { &nbsp;&nbsp;&nbsp; content: "M"; } input[type="checkbox"] + span[class="sheet-reaction"]::before { &nbsp;&nbsp;&nbsp; content: "R"; } input[type="checkbox"] + span[class="sheet-overdrive"]::before { &nbsp;&nbsp;&nbsp; content: "O"; } .sheet-power input[type="checkbox"]:hover + span::before, .sheet-cf input[type="checkbox"]:hover + span::before { &nbsp;&nbsp;&nbsp; color: #dbd879; } .sheet-power input[type="checkbox"]:checked + span::before, .sheet-cf input[type="checkbox"]:checked + span::before { &nbsp;&nbsp;&nbsp; color: #dbd879; } .sheet-powerbuttons, .sheet-cfbuttons { &nbsp;&nbsp;&nbsp; border: none; &nbsp;&nbsp;&nbsp; display: inline-block; &nbsp;&nbsp;&nbsp; position: relative; &nbsp;&nbsp;&nbsp; right: 5px; &nbsp;&nbsp;&nbsp; padding-right: 7px; &nbsp;&nbsp;&nbsp; height: 50px; &nbsp;&nbsp;&nbsp; width: 70px; &nbsp;&nbsp;&nbsp; float: right; } .sheet-powerbuttons button[type=roll]::before, .sheet-cfbuttons button[type=roll]::before{ &nbsp;&nbsp;&nbsp; padding: 0px; &nbsp;&nbsp;&nbsp; vertical-align: middle; &nbsp;&nbsp;&nbsp; display: inline-block; &nbsp;&nbsp;&nbsp; line-height: 30px; &nbsp;&nbsp;&nbsp; position: relative; &nbsp;&nbsp;&nbsp; content: url(" <a href="https://i.pinimg.com/originals/4f/2e/cf/4f2ecf3adba21698d5c9ceff510708f7.png" rel="nofollow">https://i.pinimg.com/originals/4f/2e/cf/4f2ecf3adba21698d5c9ceff510708f7.png</a> ") ""; &nbsp;&nbsp;&nbsp; zoom: 14% } .sheet-powerbuttons input[type="checkbox"], .sheet-cfbuttons input[type="checkbox"] { &nbsp;&nbsp;&nbsp; opacity: 0; &nbsp;&nbsp;&nbsp; display: inline-block; &nbsp;&nbsp;&nbsp; border: solid white; &nbsp;&nbsp;&nbsp; width: 16px; &nbsp;&nbsp;&nbsp; height: 18px; &nbsp;&nbsp;&nbsp; line-height: 16px; &nbsp;&nbsp;&nbsp; margin-top: 18px; &nbsp;&nbsp;&nbsp; margin-right: 0px; &nbsp;&nbsp;&nbsp; left: 7px; &nbsp;&nbsp;&nbsp; float: right; &nbsp;&nbsp;&nbsp; position: relative; &nbsp;&nbsp;&nbsp; cursor: pointer; &nbsp;&nbsp;&nbsp; z-index: 2; } .sheet-powerbuttons input[type="checkbox"] + span::before, .sheet-cfbuttons input[type="checkbox"] + span::before { &nbsp;&nbsp;&nbsp; content: "2"; &nbsp;&nbsp;&nbsp; opacity: 1; &nbsp;&nbsp;&nbsp; z-index: 1; &nbsp;&nbsp;&nbsp; font-family: Pictos; &nbsp;&nbsp;&nbsp; float: right; &nbsp;&nbsp;&nbsp; color: #dbd879; &nbsp;&nbsp;&nbsp; width: 16px; &nbsp;&nbsp;&nbsp; height: 16px; &nbsp;&nbsp;&nbsp; font-size: 24px; &nbsp;&nbsp;&nbsp; line-height: 18px; &nbsp;&nbsp;&nbsp; border-radius: 50%; &nbsp;&nbsp;&nbsp; text-align: center; &nbsp;&nbsp;&nbsp; display: inline-block; &nbsp;&nbsp;&nbsp; vertical-align: middle; &nbsp;&nbsp;&nbsp; position: relative; &nbsp;&nbsp;&nbsp; bottom: 37px; &nbsp;&nbsp;&nbsp; left: 4px; &nbsp;&nbsp;&nbsp; margin-right: 0px; } .sheet-powerbuttons input[type="checkbox"]:checked + span::before, .sheet-cfbuttons input[type="checkbox"]:checked + span::before{ &nbsp;&nbsp;&nbsp; content: "D"; &nbsp;&nbsp;&nbsp; font-family: Pictos; &nbsp;&nbsp;&nbsp; color: red; } .sheet-feature textarea { &nbsp;&nbsp;&nbsp; width: 90%; &nbsp;&nbsp;&nbsp; height: 140px; &nbsp;&nbsp;&nbsp; resize: vertical; &nbsp;&nbsp;&nbsp; margin-bottom: 0px; &nbsp;&nbsp;&nbsp; margin-left: 8px; &nbsp;&nbsp;&nbsp; text-align: left; &nbsp;&nbsp;&nbsp; border-color: #3d3d29; &nbsp;&nbsp;&nbsp; border-width: 2px; &nbsp;&nbsp;&nbsp; -webkit-box-shadow: 1px 1px 2px 0px #3d3d29; &nbsp;&nbsp;&nbsp; -moz-box-shadow: 1px 1px 2px 0px #3d3d29; &nbsp;&nbsp;&nbsp; box-shadow: 1px 1px 2px 0px #3d3d29; } .sheet-feature input[type=text] { &nbsp;&nbsp;&nbsp;&nbsp; width: 90%; &nbsp;&nbsp;&nbsp; resize: vertical; &nbsp;&nbsp;&nbsp; margin-bottom: 0px; &nbsp;&nbsp;&nbsp; margin-left: 8px; &nbsp;&nbsp;&nbsp; text-align: center; &nbsp;&nbsp;&nbsp; border-color: #3d3d29; &nbsp;&nbsp;&nbsp; border-width: 2px; &nbsp;&nbsp;&nbsp; -webkit-box-shadow: 1px 1px 2px 0px #3d3d29; &nbsp;&nbsp;&nbsp; -moz-box-shadow: 1px 1px 2px 0px #3d3d29; &nbsp;&nbsp;&nbsp; box-shadow: 1px 1px 2px 0px #3d3d29; } .sheet-perks input[type=text] { &nbsp;&nbsp;&nbsp; text-align: center; &nbsp;&nbsp;&nbsp; width: 72%; &nbsp;&nbsp;&nbsp; margin-bottom: -10px; &nbsp;&nbsp;&nbsp; margin-top: -10px; &nbsp;&nbsp;&nbsp; margin-left: 13%; &nbsp;&nbsp;&nbsp; background: transparent; &nbsp;&nbsp;&nbsp; display: inline-block; &nbsp;&nbsp;&nbsp; border-color: black; &nbsp;&nbsp;&nbsp; border-style: hidden hidden solid hidden; &nbsp;&nbsp;&nbsp; border-width: 2px; &nbsp;&nbsp;&nbsp; border-bottom-left-radius: 0px; &nbsp;&nbsp;&nbsp; padding: 0px; &nbsp;&nbsp;&nbsp; border-bottom-right-radius: 0px; } .sheet-perk textarea { &nbsp;&nbsp;&nbsp; width: 90%; &nbsp;&nbsp;&nbsp; height: 50px; &nbsp;&nbsp;&nbsp; resize: vertical; &nbsp;&nbsp;&nbsp; margin-bottom: 0px; &nbsp;&nbsp;&nbsp; margin-left: 8px; &nbsp;&nbsp;&nbsp; text-align: left; &nbsp;&nbsp;&nbsp; border-color: #3d3d29; &nbsp;&nbsp;&nbsp; border-width: 2px; &nbsp;&nbsp;&nbsp; -webkit-box-shadow: 1px 1px 2px 0px #3d3d29; &nbsp;&nbsp;&nbsp; -moz-box-shadow: 1px 1px 2px 0px #3d3d29; &nbsp;&nbsp;&nbsp; box-shadow: 1px 1px 2px 0px #3d3d29; } .sheet-wallet { &nbsp;&nbsp;&nbsp; float: right; &nbsp;&nbsp;&nbsp; position: absolute; &nbsp;&nbsp;&nbsp; right: 65px; &nbsp;&nbsp;&nbsp; top: 685px; } .sheet-denerim { &nbsp;&nbsp;&nbsp; display: inline-block; &nbsp;&nbsp;&nbsp; background-color: white; &nbsp;&nbsp;&nbsp;&nbsp; width: 100px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height: 40px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border: 3px solid; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 18px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-style: inset; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-color: #dbd879; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-width: 6px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text-align: center; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; position: relative; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; resize: vertical; &nbsp;&nbsp;&nbsp;&nbsp; -webkit-box-shadow: 1px 1px 2px 0px #3d3d29; &nbsp;&nbsp;&nbsp; -moz-box-shadow: 1px 1px 2px 0px #3d3d29; &nbsp;&nbsp;&nbsp;&nbsp; box-shadow: 1px 1px 2px 0px #3d3d29; &nbsp;&nbsp;&nbsp;&nbsp; z-index: 0; } .sheet-denerim input[type=number] { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 18px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: 100px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height: 40px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border: none; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display: block; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin-left: 10px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; outline: none; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text-align: center; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; position: relative; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; z-index: 0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-color: transparent; } .sheet-denerim label { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 13px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: white; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height: 5px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text-align: center; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border: none; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-color: black; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; position: relative; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; bottom: 65px; } .sheet-stuff input[type=number] { &nbsp;&nbsp;&nbsp; display: inline-block; &nbsp;&nbsp;&nbsp; float: left; &nbsp;&nbsp;&nbsp; position: relative; &nbsp;&nbsp;&nbsp; bottom: 30px; &nbsp;&nbsp;&nbsp; right: 12px; &nbsp;&nbsp;&nbsp; width: 52px; &nbsp;&nbsp;&nbsp; height: 52px; &nbsp;&nbsp;&nbsp; text-align: center; &nbsp;&nbsp;&nbsp; resize: vertical; &nbsp;&nbsp;&nbsp; font-size: 20px; &nbsp;&nbsp; vertical-align: center; &nbsp;&nbsp;&nbsp; border-radius: 50%; &nbsp;&nbsp;&nbsp; border-style: outset; &nbsp;&nbsp;&nbsp; border-color: #ca0022; &nbsp;&nbsp;&nbsp; border-width: 5px; &nbsp;&nbsp;&nbsp; margin-right: 35px; &nbsp;&nbsp;&nbsp; -webkit-box-shadow: 1px 1px 2px 0px #3d3d29; &nbsp;&nbsp;&nbsp; -moz-box-shadow: 1px 1px 2px 0px #3d3d29; &nbsp;&nbsp;&nbsp; box-shadow: 1px 1px 2px 0px #3d3d29; &nbsp;&nbsp;&nbsp; z-index: 1; } .sheet-stuff label { &nbsp;&nbsp;&nbsp; color: white; &nbsp;&nbsp;&nbsp; position: relative; &nbsp;&nbsp;&nbsp; bottom: 20px; &nbsp;&nbsp;&nbsp; right: 10px; &nbsp;&nbsp;&nbsp; height: 12px; &nbsp;&nbsp;&nbsp; float: left; &nbsp;&nbsp;&nbsp; width: 55px; &nbsp;&nbsp;&nbsp; margin-right: 25px; &nbsp;&nbsp;&nbsp; font-size: 12px; &nbsp;&nbsp;&nbsp; background-color: transparent; &nbsp;&nbsp;&nbsp; border: none; } .sheet-stuffmax { &nbsp;&nbsp;&nbsp; display: inline-block; &nbsp;&nbsp;&nbsp; background-color: white; &nbsp;&nbsp;&nbsp;&nbsp; width: 25px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height: 25px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; float: left; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin-right: 55px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; bottom: 140px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border: 50px solid transparent; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 18px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-style: inset; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-color: #a0a4e3; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-width: 3px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text-align: center; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; position: relative; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; resize: vertical; &nbsp;&nbsp;&nbsp;&nbsp; -webkit-box-shadow: 1px 1px 2px 0px #3d3d29; &nbsp;&nbsp;&nbsp; -moz-box-shadow: 1px 1px 2px 0px #3d3d29; &nbsp;&nbsp;&nbsp;&nbsp; box-shadow: 1px 1px 2px 0px #3d3d29; &nbsp;&nbsp;&nbsp;&nbsp; z-index: 1; } .sheet-stuffmax input[type=text] { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 12px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; float: left; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: 20px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height: 30px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border: none; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display: inline-block; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; outline: none; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: red; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin-left: 3px;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: 2px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text-align: center; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; position: relative; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; z-index: 0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-color: transparent; } .sheet-stuffmax label { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display: block; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 6px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height: 3px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text-align: center; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border: none; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-color: black; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; outline: none; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; position: relative; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; bottom: 35px; } .sheet-armor { &nbsp;&nbsp;&nbsp; float: right; &nbsp;&nbsp;&nbsp; width: 18%; &nbsp;&nbsp;&nbsp; position: absolute; &nbsp;&nbsp;&nbsp; right: 117px; &nbsp;&nbsp;&nbsp; top: 810px; } .sheet-weapons { &nbsp; float: right; &nbsp;&nbsp;&nbsp; width: 18%; &nbsp;&nbsp;&nbsp; position: absolute; &nbsp;&nbsp;&nbsp; right: 117px; &nbsp;&nbsp;&nbsp; top: 1000px; &nbsp; } .sheet-armor input[type=text], .sheet-weapons input[type=text] { &nbsp;&nbsp;&nbsp;&nbsp; text-align: center; &nbsp;&nbsp;&nbsp;&nbsp; width: 100%; &nbsp;&nbsp;&nbsp; display: inline-block; &nbsp;&nbsp;&nbsp; padding: 3px; &nbsp;&nbsp;&nbsp; background: transparent; &nbsp;&nbsp;&nbsp; border-color: black; &nbsp;&nbsp;&nbsp; border-style: hidden hidden solid hidden; &nbsp;&nbsp;&nbsp; border-width: 2px; &nbsp;&nbsp;&nbsp; border-bottom-left-radius: 0px; &nbsp;&nbsp;&nbsp; padding: 0px; &nbsp;&nbsp;&nbsp; border-bottom-right-radius: 0px; &nbsp; } .sheet-weapons textarea { &nbsp;&nbsp;&nbsp;&nbsp; text-align: center; &nbsp;&nbsp;&nbsp;&nbsp; width: 100%; &nbsp;&nbsp;&nbsp;&nbsp; height: 38px; &nbsp;&nbsp;&nbsp; display: inline-block; &nbsp;&nbsp;&nbsp; padding: 3px; &nbsp;&nbsp;&nbsp; background: transparent; &nbsp;&nbsp;&nbsp; border-color: black; &nbsp;&nbsp;&nbsp; border-style: hidden hidden solid hidden; &nbsp;&nbsp;&nbsp; border-width: 2px; &nbsp;&nbsp;&nbsp; border-bottom-left-radius: 0px; &nbsp;&nbsp;&nbsp; padding: 0px; &nbsp;&nbsp;&nbsp; border-bottom-right-radius: 0px; &nbsp;&nbsp;&nbsp; margin-bottom: 0px; &nbsp; } .sheet-armorrow input[type=text], .sheet-weaponrow input[type=text] { &nbsp;&nbsp;&nbsp;&nbsp; text-align: center; &nbsp;&nbsp;&nbsp;&nbsp; width: 63%; &nbsp;&nbsp;&nbsp; display: inline-block; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-style: solid; &nbsp;&nbsp;&nbsp; background: white; &nbsp;&nbsp;&nbsp; padding: 3px; &nbsp;&nbsp;&nbsp; border-color: #3d3d29; &nbsp;&nbsp;&nbsp; border-width: 2px; &nbsp;&nbsp;&nbsp; -webkit-box-shadow: 1px 1px 2px 0px #3d3d29; &nbsp;&nbsp;&nbsp; -moz-box-shadow: 1px 1px 2px 0px #3d3d29; &nbsp;&nbsp;&nbsp; box-shadow: 1px 1px 2px 0px #3d3d29; &nbsp;&nbsp;&nbsp; z-index: 3; &nbsp; } .sheet-armorrow input[type=number], .sheet-weaponrow input[type=number] { &nbsp;&nbsp;&nbsp; width: 21px; &nbsp;&nbsp;&nbsp; height: 25px; &nbsp;&nbsp;&nbsp; border: none; &nbsp;&nbsp;&nbsp; color: red; &nbsp;&nbsp;&nbsp; font-size: 16px; &nbsp;&nbsp;&nbsp; text-align: center; &nbsp;&nbsp;&nbsp; margin: 0; &nbsp;&nbsp;&nbsp; position: relative; &nbsp;&nbsp;&nbsp; border: solid 1px #3d3d29; &nbsp;&nbsp;&nbsp; -webkit-box-shadow: 1px 1px 1px 0px #3d3d29; &nbsp;&nbsp;&nbsp; -moz-box-shadow: 1px 1px 1px 0px #3d3d29; &nbsp;&nbsp;&nbsp; box-shadow: 1px 1px 1px 0px #3d3d29; &nbsp;&nbsp;&nbsp; z-index: 2; } .sheet-weaponrow input[type=text] { &nbsp;&nbsp;&nbsp; float: right; &nbsp;&nbsp;&nbsp; margin-top: 10px; &nbsp;&nbsp;&nbsp; z-index: 4; &nbsp;&nbsp;&nbsp; width: 75%; } .sheet-weapondie input[type=text] { &nbsp;&nbsp;&nbsp; width: 50px; &nbsp;&nbsp;&nbsp; float: left; &nbsp;&nbsp;&nbsp; margin-top: -10px; &nbsp;&nbsp;&nbsp; bottom: 20px; &nbsp;&nbsp;&nbsp; color: red; &nbsp;&nbsp;&nbsp; border: red solid 2px; } input[type=text][name*="attr_weaponfx"] { &nbsp;&nbsp;&nbsp; color: blue; &nbsp;&nbsp;&nbsp; border: blue solid 2px; &nbsp;&nbsp;&nbsp; width: 87px; &nbsp;&nbsp;&nbsp; margin-right: 15px; } .sheet-weapondie label { &nbsp;&nbsp;&nbsp; color: red; &nbsp;&nbsp;&nbsp; position: relative; &nbsp;&nbsp;&nbsp; margin-bottom: -10px; &nbsp;&nbsp;&nbsp; font-size: 14px; &nbsp;&nbsp;&nbsp; left: 60px; &nbsp;&nbsp;&nbsp; top: 5px; } .sheet-weaponrow button[type=roll]::before { &nbsp;&nbsp;&nbsp; padding: 0px; &nbsp;&nbsp;&nbsp; width: 20px; &nbsp;&nbsp;&nbsp; vertical-align: middle; &nbsp;&nbsp;&nbsp; display: inline-block; &nbsp;&nbsp;&nbsp; line-height: 30px; &nbsp;&nbsp;&nbsp; position: relative; &nbsp;&nbsp;&nbsp; margin-top: -20px; &nbsp;&nbsp;&nbsp; right: 215px; &nbsp;&nbsp;&nbsp; bottom: 5px; &nbsp;&nbsp;&nbsp; content: url(" <a href="https://gbf.wiki/images/1/1f/Weapon_b_1040809500.png" rel="nofollow">https://gbf.wiki/images/1/1f/Weapon_b_1040809500.png</a> ") ""; &nbsp;&nbsp;&nbsp; zoom: 10%; &nbsp;&nbsp;&nbsp; z-index: 2; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { &nbsp; -webkit-appearance: none; &nbsp;&nbsp;&nbsp; -moz-appearance:textfield; } .repcontainer[data-groupname=repeating_powers] .repitem { &nbsp; display: inline-block; &nbsp; width: calc(31% - 3px); &nbsp; margin-right: 20px; } .sheet-resource { &nbsp;&nbsp;&nbsp; width: 18%; &nbsp;&nbsp;&nbsp; float: right; &nbsp;&nbsp;&nbsp; position: relative; &nbsp;&nbsp;&nbsp; bottom: 170px; &nbsp;&nbsp;&nbsp; left: 8px; &nbsp;&nbsp;&nbsp; margin-top: -10px; } .sheet-resource { &nbsp;&nbsp;&nbsp; width: 18%; &nbsp;&nbsp;&nbsp; float: right; &nbsp;&nbsp;&nbsp; position: relative; &nbsp;&nbsp;&nbsp; bottom: 170px; &nbsp;&nbsp;&nbsp; margin-top: -10px; } .sheet-resource input[type="radio"] { opacity: 0; width: 70px; height: 45px; z-index: 1; position: relative; left: 55px; top: 52px; margin-top: -50px; } .sheet-resource2 input[type="radio"] { opacity: 0; width: 60px; height: 50px; z-index: 1; position: relative; left: 40px; bottom: 4px; margin-left: -30px; margin-right: -30px; } .sheet-resource input[type="radio"] + span::before { &nbsp;&nbsp;&nbsp; color: white; &nbsp;&nbsp;&nbsp; cursor: pointer; &nbsp;&nbsp;&nbsp; margin-left: 50px; &nbsp;&nbsp;&nbsp; margin-top: -9px; &nbsp;&nbsp;&nbsp; display: inline-block; &nbsp;&nbsp;&nbsp; border: inset 2px #8504b8; &nbsp;&nbsp;&nbsp; line-height: 47px; &nbsp;&nbsp;&nbsp; text-align: center; &nbsp;&nbsp;&nbsp; display: inline-block; &nbsp;&nbsp;&nbsp; vertical-align: center; &nbsp;&nbsp;&nbsp; box-shadow: 0 0 2px #ccc; &nbsp;&nbsp;&nbsp; background-color: #a0a4e3; &nbsp;&nbsp;&nbsp; width: 65px; &nbsp;&nbsp;&nbsp; height: 45px; &nbsp;&nbsp;&nbsp; font-size: 24px; &nbsp;&nbsp;&nbsp; transition: all 0.3s; &nbsp;&nbsp;&nbsp; content: "0"; } .sheet-resource2 input[type="radio"] + span::before { &nbsp;&nbsp;&nbsp; color: white; &nbsp;&nbsp;&nbsp; cursor: pointer; &nbsp;&nbsp;&nbsp; display: inline-block; &nbsp;&nbsp;&nbsp; border: inset 2px #8504b8; &nbsp;&nbsp;&nbsp; line-height: 35px; &nbsp;&nbsp;&nbsp; text-align: center; &nbsp;&nbsp;&nbsp; display: inline-block; &nbsp;&nbsp;&nbsp; vertical-align: center; &nbsp;&nbsp;&nbsp; box-shadow: 0 0 2px #ccc; &nbsp;&nbsp;&nbsp; background-color: #a0a4e3; &nbsp;&nbsp;&nbsp; width: 60px; &nbsp;&nbsp;&nbsp; height: 35px; &nbsp;&nbsp;&nbsp; font-size: 24px; &nbsp;&nbsp;&nbsp; transition: all 0.3s; &nbsp;&nbsp;&nbsp; content: "0"; } .sheet-resource input[type="radio"] + span[class="sheet-r1"]::before, .sheet-resource2 input[type="radio"] + span[class="sheet-r1"]::before { &nbsp; content: "1"; } .sheet-resource input[type="radio"] + span[class="sheet-r2"]::before, .sheet-resource2 input[type="radio"] + span[class="sheet-r2"]::before{ &nbsp; content: "2"; } .sheet-resource input[type="radio"] + span[class="sheet-r3"]::before, .sheet-resource2 input[type="radio"] + span[class="sheet-r3"]::before { &nbsp; content: "3"; } .sheet-resource input[type="radio"] + span[class="sheet-r4"]::before, .sheet-resource2 input[type="radio"] + span[class="sheet-r4"]::before { &nbsp; content: "4"; } .sheet-resource input[type="radio"] + span[class="sheet-r5"]::before, .sheet-resource2 input[type="radio"] + span[class="sheet-r5"]::before { &nbsp; content: "5"; } .sheet-resource input[type="radio"] + span[class="sheet-r6"]::before, .sheet-resource2 input[type="radio"] + span[class="sheet-r6"]::before { &nbsp; content: "6"; } .sheet-resource input[type="radio"] + span[class="sheet-r7"]::before { &nbsp; content: "7"; } .sheet-resource input[type="radio"] + span[class="sheet-r8"]::before { &nbsp; content: "8"; } .sheet-resource input[type="radio"] + span[class="sheet-r9"]::before { &nbsp; content: "9"; } .sheet-resource input[type="radio"] + span[class="sheet-r10"]::before { &nbsp; content: "10"; } .sheet-resource2 { &nbsp;&nbsp;&nbsp; width: 60%; &nbsp;&nbsp;&nbsp; float: right; &nbsp;&nbsp;&nbsp; position: relative; &nbsp;&nbsp;&nbsp; right: 15px; &nbsp;&nbsp;&nbsp; bottom: 130px; &nbsp;&nbsp;&nbsp; margin-bottom: -60px; &nbsp;&nbsp;&nbsp; margin-top: -140px; } .sheet-resource input[type="radio"]:hover + span::before, .sheet-resource2 input[type="radio"]:hover + span::before { &nbsp;&nbsp;&nbsp; background-color: #dbd879; }&nbsp;&nbsp;&nbsp; .sheet-resource input[type="text"] { &nbsp;&nbsp;&nbsp; width: 80%; &nbsp;&nbsp;&nbsp; color: white; &nbsp;&nbsp;&nbsp; border: none; &nbsp;&nbsp;&nbsp; font-size: 15px; &nbsp;&nbsp;&nbsp; background-image: url(" <a href="https://image.shutterstock.com/image-vector/seamless-vector-mechanical-pattern-texture-260nw-1112369252.jpg" rel="nofollow">https://image.shutterstock.com/image-vector/seamless-vector-mechanical-pattern-texture-260nw-1112369252.jpg</a> "); &nbsp;&nbsp;&nbsp; padding: 0px; &nbsp;&nbsp;&nbsp; margin-left: 50px; &nbsp;&nbsp;&nbsp; } .sheet-resource2 input[type="text"] { &nbsp;&nbsp;&nbsp; width: 100%; &nbsp;&nbsp;&nbsp; color: white; &nbsp;&nbsp;&nbsp; border: none; &nbsp;&nbsp;&nbsp; font-size: 15px; &nbsp;&nbsp;&nbsp; background-image: url(" <a href="https://image.shutterstock.com/image-vector/seamless-vector-mechanical-pattern-texture-260nw-1112369252.jpg" rel="nofollow">https://image.shutterstock.com/image-vector/seamless-vector-mechanical-pattern-texture-260nw-1112369252.jpg</a> "); } .sheet-resource input[type="radio"]:checked + span::before, .sheet-resource2 input[type="radio"]:checked + span::before { &nbsp;&nbsp;&nbsp; background-color: #dbd879; } .sheet-resource button[type=roll] { &nbsp;&nbsp;&nbsp; margin-bottom: 13px; &nbsp;&nbsp;&nbsp; margin-left: 55px; &nbsp;&nbsp;&nbsp; margin-top: 5px; } .sheet-resource button[type=roll]::before { &nbsp;&nbsp;&nbsp; font-family: dicefontd4; &nbsp;&nbsp;&nbsp; content: "H"; &nbsp;&nbsp;&nbsp; font-size: 5em; &nbsp;&nbsp;&nbsp; color: #a0a4e3; &nbsp;&nbsp;&nbsp; background-color: transparent; &nbsp;&nbsp;&nbsp; border: none; &nbsp;&nbsp;&nbsp; line-height: 15px; &nbsp;&nbsp;&nbsp; background-image: none; &nbsp;&nbsp;&nbsp; text-shadow: none; &nbsp;&nbsp;&nbsp; box-shadow: none; &nbsp;&nbsp;&nbsp; font-weight: normal; &nbsp;&nbsp;&nbsp; transition: 0.3s; } .sheet-resource button[type=roll]:hover::before { &nbsp;&nbsp;&nbsp; color: #dbd879; } .sheet-recharge-control[value="d4"] + .sheet-recharge-display::before { &nbsp;&nbsp;&nbsp; font-family: dicefontd4; } .sheet-recharge-control[value="d6"] + .sheet-recharge-display::before { &nbsp;&nbsp;&nbsp; font-family: dicefontd6; &nbsp;&nbsp;&nbsp; content: "F"; } .sheet-recharge-control[value="d8"] + .sheet-recharge-display::before { &nbsp;&nbsp;&nbsp; font-family: dicefontd8; &nbsp;&nbsp;&nbsp; content: "H"; } .sheet-inventory { &nbsp;&nbsp;&nbsp; width: 35%; } .sheet-inventory textarea { width: 40%; height: 220px; } .sheet-relationships { &nbsp;&nbsp;&nbsp; width: 62%; &nbsp;&nbsp;&nbsp; float: right; &nbsp;&nbsp;&nbsp; margin-top: -190px; } .sheet-story { margin-top: 10px; width: 100%; } .sheet-class { &nbsp;&nbsp;&nbsp; display: none; } .sheet-advancement { position: relative; } img.sheet-class { &nbsp;&nbsp;&nbsp; position: absolute; &nbsp;&nbsp;&nbsp; top: 0; &nbsp;&nbsp;&nbsp; left: 0; &nbsp;&nbsp;&nbsp; width: 100%; &nbsp;&nbsp;&nbsp; z-index: 0; } input.sheet-class-1:checked ~ img.sheet-class-1, input.sheet-class-2:checked ~ img.sheet-class-2, input.sheet-class-3:checked ~ img.sheet-class-3, input.sheet-class-4:checked ~ img.sheet-class-4, input.sheet-class-5:checked ~ img.sheet-class-5, input.sheet-class-6:checked ~ img.sheet-class-6, input.sheet-class-7:checked ~ img.sheet-class-7, input.sheet-class-8:checked ~ img.sheet-class-8, input.sheet-class-9:checked ~ img.sheet-class-9, input.sheet-class-10:checked ~ img.sheet-class-10 { display: inline-block; } .charsheet button[type=roll] {&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; background-color: transparent; &nbsp;&nbsp;&nbsp; color: black; &nbsp;&nbsp;&nbsp; border: none; &nbsp;&nbsp;&nbsp; font-family: "Arial Black", Gadget, sans-serif; &nbsp;&nbsp;&nbsp; font-size: 14px; &nbsp;&nbsp;&nbsp; line-height: 15px; &nbsp;&nbsp;&nbsp; background-image: none; &nbsp;&nbsp;&nbsp; text-shadow: none; &nbsp;&nbsp;&nbsp; box-shadow: none; &nbsp;&nbsp;&nbsp; padding: 0px; &nbsp;&nbsp;&nbsp; margin: 0px; &nbsp;&nbsp;&nbsp; font-weight: bold; &nbsp;&nbsp;&nbsp; transition: 0.3s; &nbsp;&nbsp;&nbsp; } .charsheet button[type=roll]:hover { &nbsp;&nbsp;&nbsp; color: #dbd879; }

What browser are you using? I pasted the above code in Chrome and it looks like this: I get something similar when using Firefox...so, I'm going to guess it has something to do with the way Firefox is interpreting some of the CSS. You may need to look at some of the FF specific CSS calls, etc.

What Finderski said. You should look at the css and HTML of the skulls in the "Fading" section, as it seems in your situation they seem to ignore the size- and position-related css in some form.

I am using Firefox 77.0&nbsp; 64 Bit&nbsp; What are "FF specific CSS calls" and how / where can i do something? (sorry but HTML and CSS are not my "favorite skill"....too much negative modifiers on that)

There isn't anything obvious that even a experienced web-dev could guess just like that without checking the code. Edit: Nevermind, I'm mediocre and figured it out anyway. Andreas J. said: [...]You should look at the css and HTML of the skulls in the "Fading" section, as it seems in your situation they seem to ignore the size- and position-related css in some form. So, let me rephrase this as: Use the built-in browser web dev tools to select and inspect the images that seems to be faulty, and look at the css it says that should be applied to them. You'll likely find some code that's crossed out(indicating code that should work, but is overrided or doesn't work for one reason or other), look at the MDN CSS documentation on it of it gives clues why it doesn't work, and share that with us if it wasn't some quick fix. ...is the only thing I would have said, if I didn't have time to look at the code, but I changed my mind and did the troubleshooting steps myself. Maybe seeing my steps will improve your troubleshooting skills. My thought process: 1. Giving a quick look at the code without testing, I see that the relevant css is likely: .sheet-fading input[type="checkbox"]:checked + span::before { &nbsp;&nbsp;&nbsp; display: inline-block; &nbsp;&nbsp;&nbsp; content: url(" <a href="https://i.imgur.com/16DiRvM.png" rel="nofollow">https://i.imgur.com/16DiRvM.png</a> ") ""; &nbsp;&nbsp;&nbsp; zoom: 4%; } The spans are the images used, so it's likely a part of this code doesn't work for one reason or another, or the roll20/browser default stylings, create the trouble, as I mentioned earlier. 2.&nbsp; I've never encountered the "zoom" property before, so figure to check out the it on MDN CSS documentation: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/zoom" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/zoom</a> 3. in the documentation, I see zoom is a working draft, and in the browser compatibility box it says it's not compatible with Firefox, so I've probably found the reason. 4. If that hadn't been clear, I would have run the code and done the inspector thing and looked at other options, likely investigating next the display property or browser defaults. 5. Maybe tried out in Chrome to see if it worked properly there, and looked with the dew tools and see why. Conclusion: Ryan was using Chrome, and that the zoom property(of the relevant span element) is the likely cause. Replace it with some normal size-scaling thing like height , width , and it should be more reliable. I'm too lazy to run the code and confirm this, but I'm reasonably confident this is what's going on. You see that the zoom is at 4% , which would likely mean that if it didn't work, the image would be massive, giving a default 100% zoom.

Thanks very much for rooting that out, Andreas.&nbsp; Now I can finally reproduce the issue, but oddly enough the height/ width seem to have no effect.&nbsp; This is probably why I ended up resorting to zoom now that I think of it.&nbsp; Any ideas as to why I can't shrink my enormous skullboys? .sheet-fading input[type="checkbox"]:checked + span::before { &nbsp;&nbsp;&nbsp; display: inline-block; &nbsp;&nbsp;&nbsp; content: url(" <a href="https://i.imgur.com/16DiRvM.png" rel="nofollow">https://i.imgur.com/16DiRvM.png</a> ") ""; &nbsp; &nbsp; height: 16px; &nbsp; &nbsp; width: 16px; }

If you change the image to be "background-image" instead of "content", it should work. You can look at my Feast of legends sheet as an example in one way you can change size of images. You also gonna need to set the "background-size" or something, along with the height and width.