Files
dashinginventor bbfeedb477 Simple System Character Sheet
Here is the Simple System Character Sheet.  Please let me know if I need
to make any changes.  Thanks!

Derek
2014-10-06 09:14:49 -07:00

398 lines
36 KiB
HTML

<div class="bg bluebg" style="width: 620px; height: 390px; margin: 20px; display: block">
<div style="display: block; margin-left: 5px; margin-bottom: 3px;">
<div style="display: inline-block; margin-top: 5px;">
<img src="http://i.imgur.com/ugZNqCg.png" style="width: 75px; height: 60px;" />
</div>
<div class="bg white" style="display: inline-block; margin-top: 5px; width: 530px; height: 60px;">
<div style="inline-block; margin-left: 5px; margin-top: 5px;">
<table align="left">
<tbody>
<tr>
<td class="td">
<h1 >Name:</h1>
</td>
<td class="td">
<input class="whiteinput" style="width: 182px;" type="text" name="attr_Name">
</td>
<td>
<h1 >Vitals:</h1>
</td>
<td class="td">
<input class="whiteinput" style="width: 204px;" type="text" name="attr_Vitals">
</td>
</tr>
</tbody>
</table>
<table align="left" style="margin-top: 10px;">
<tbody>
<tr>
<td class="td">
<h1 >Profession:</h1>
</td>
<td class="td">
<input class="whiteinput" style="width: 137px;" type="text" name="attr_Profession">
</td>
<td class="td">
<h1 >Goals:</h1>
</td>
<td class="td">
<input class="whiteinput" style="width: 202px;" type="text" name="attr_Goals">
</td>
</tr>
</tbody>
</table>
</div>
<div style="width: 20px; height: 24px;margin-right: 5px; position: relative;">
<input type="radio" id="malesex" name="attr_Sex" value="male"><img src="http://i.imgur.com/C1cPHjs.png" class="bglevel" style="display: block; width: 20px; height: 24px; position: absolute; top: 0px; left: 502px;" /><label for="malesex" style="position: absolute; top: 0px; left: 502px; width: 20px; height: 24px;"></label></input>
<input type="radio" id="femalesex" name="attr_Sex" value="female"><img src="http://i.imgur.com/Qpbz6o0.png" class="bglevel" style="display: block; margin-top:2px; width: 20px; height: 24px; position: absolute; top: 25px; left: 502px;" /><label for="femalesex" style="position: absolute; top: 25px; left: 502px; width: 20px; height: 24px;"></label></input>
</div>
</div>
</div>
<div style="display: block; margin-left: 6px;">
<div class="bg white" style="display: inline-block; width: 200px; height: 290px;">
<table align="center" style="margin-left: 5px;">
<thead>
<tr>
<th><h2 style="width: 190px;">Skills</h2></th>
</tr>
</thead>
<tbody>
<tr>
<td class="td"><input class="whiteinput stripeinput" type="text" name="attr_Skills0"></td>
</tr>
<tr>
<td class="td"><input class="grayinput stripeinput" type="text" name="attr_Skills1"></td>
</tr>
<tr>
<td class="td"><input class="whiteinput stripeinput" type="text" name="attr_Skills2"></td>
</tr>
<tr>
<td class="td"><input class="grayinput stripeinput" type="text" name="attr_Skills3"></td>
</tr>
<tr>
<td class="td"><input class="whiteinput stripeinput" type="text" name="attr_Skills4"></td>
</tr>
<tr>
<td class="td"><input class="grayinput stripeinput" type="text" name="attr_Skills5"></td>
</tr>
<tr>
<td class="td"><input class="whiteinput stripeinput" type="text" name="attr_Skills6"></td>
</tr>
<tr>
<td class="td"><input class="grayinput stripeinput" type="text" name="attr_Skills7"></td>
</tr>
<tr>
<td class="td"><input class="whiteinput stripeinput" type="text" name="attr_Skills8"></td>
</tr>
<tr>
<td class="td"><input class="grayinput stripeinput" type="text" name="attr_Skills9"></td>
</tr>
<tr>
<td class="td"><input class="whiteinput stripeinput" type="text" name="attr_Skills10"></td>
</tr>
<tr>
<td class="td"><input class="grayinput stripeinput" type="text" name="attr_Skills11"></td>
</tr>
<tr>
<td class="td"><input class="whiteinput stripeinput" type="text" name="attr_Skills12"></td>
</tr>
<tr>
<td class="td"><input class="grayinput stripeinput" type="text" name="attr_Skills13"></td>
</tr>
</tbody>
</table>
</div>
<div style="display: inline-block; width: 200px; height: 290px;">
<div class="bg white" style="display: block; height: 142px; margin-bottom: 5px;">
<table align="center" style="margin-left: 5px;">
<thead>
<tr>
<th><h2 style="width: 190px;">Traits</h2></th>
</tr>
</thead>
<tbody>
<tr>
<td class="td"><input class="whiteinput stripeinput" type="text" name="attr_Traits0"></td>
</tr>
<tr>
<td class="td"><input class="grayinput stripeinput" type="text" name="attr_Traits1"></td>
</tr>
<tr>
<td class="td"><input class="whiteinput stripeinput" type="text" name="attr_Traits2"></td>
</tr>
<tr>
<td class="td"><input class="grayinput stripeinput" type="text" name="attr_Traits3"></td>
</tr>
<tr>
<td class="td"><input class="whiteinput stripeinput" type="text" name="attr_Traits4"></td>
</tr>
<tr>
<td class="td"><input class="grayinput stripeinput" type="text" name="attr_Traits5"></td>
</tr>
</tbody>
</table>
</div>
<div class="bg white" style="display: block; height: 142px; margin-top: 5px;">
<table align="center" style="margin-left: 5px;">
<thead>
<tr>
<th><h2 style="width: 190px;">Powers</h2></th>
</tr>
</thead>
<tbody>
<tr>
<td class="td"><input class="whiteinput stripeinput" type="text" name="attr_Powers0"></td>
</tr>
<tr>
<td class="td"><input class="grayinput stripeinput" type="text" name="attr_Powers1"></td>
</tr>
<tr>
<td class="td"><input class="whiteinput stripeinput" type="text" name="attr_Powers2"></td>
</tr>
<tr>
<td class="td"><input class="grayinput stripeinput" type="text" name="attr_Powers3"></td>
</tr>
<tr>
<td class="td"><input class="whiteinput stripeinput" type="text" name="attr_Powers4"></td>
</tr>
<tr>
<td class="td"><input class="grayinput stripeinput" type="text" name="attr_Powers5"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="bg white" style="display: inline-block; width: 200px; height: 290px;">
<table align="center" style="margin-left: 5px;">
<thead>
<tr>
<th><h2 style="width: 190px;">Inventory</h2></th>
</tr>
</thead>
<tbody>
<tr>
<td class="td"><input class="whiteinput stripeinput" type="text" name="attr_Inventory0"></td>
</tr>
<tr>
<td class="td"><input class="grayinput stripeinput" type="text" name="attr_Inventory1"></td>
</tr>
<tr>
<td class="td"><input class="whiteinput stripeinput" type="text" name="attr_Inventory2"></td>
</tr>
<tr>
<td class="td"><input class="grayinput stripeinput" type="text" name="attr_Inventory3"></td>
</tr>
<tr>
<td class="td"><input class="whiteinput stripeinput" type="text" name="attr_Inventory4"></td>
</tr>
<tr>
<td class="td"><input class="grayinput stripeinput" type="text" name="attr_Inventory5"></td>
</tr>
<tr>
<td class="td"><input class="whiteinput stripeinput" type="text" name="attr_Inventory6"></td>
</tr>
<tr>
<td class="td"><input class="grayinput stripeinput" type="text" name="attr_Inventory7"></td>
</tr>
<tr>
<td class="td"><input class="whiteinput stripeinput" type="text" name="attr_Inventory8"></td>
</tr>
<tr>
<td class="td"><input class="grayinput stripeinput" type="text" name="attr_Inventory9"></td>
</tr>
<tr>
<td class="td"><input class="whiteinput stripeinput" type="text" name="attr_Inventory10"></td>
</tr>
<tr>
<td class="td"><input class="grayinput stripeinput" type="text" name="attr_Inventory11"></td>
</tr>
<tr>
<td class="td"><input class="whiteinput stripeinput" type="text" name="attr_Inventory12"></td>
</tr>
<tr>
<td class="td"><input class="grayinput stripeinput" type="text" name="attr_Inventory13"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="leveldiv">
<h3 class="whitetextoutline">Level</h3>
<div class="bglevel blackoutline white"><input id="level1-1" name="attr_Level" type="radio" value="1-1"/><label for="level1-1">X</label></div>
<div class="bglevel blackoutline white"><input id="level1-2" name="attr_Level" type="radio" value="1-2"/><label for="level1-2">X</label></div>
<div class="bglevel blackoutline white"><input id="level1-3" name="attr_Level" type="radio" value="1-3"/><label for="level1-3">X</label></div>
<div class="bglevel blackoutline white"><input id="level1-4" name="attr_Level" type="radio" value="1-4"/><label for="level1-4">X</label></div>
<div class="bglevel blackoutline white"><input id="level1-5" name="attr_Level" type="radio" value="1-5"/><label for="level1-5">X</label></div>
<div class="bglevel blackoutline white"><input id="level1-6" name="attr_Level" type="radio" value="1-6"/><label for="level1-6">X</label></div>
<h3 class="whitetextoutline">2</h3>
<div class="bglevel blackoutline levelblue"><input id="level2-1" name="attr_Level" type="radio" value="2-1"/><label for="level2-1">X</label></div>
<div class="bglevel blackoutline levelblue"><input id="level2-2" name="attr_Level" type="radio" value="2-2"/><label for="level2-2">X</label></div>
<div class="bglevel blackoutline levelblue"><input id="level2-3" name="attr_Level" type="radio" value="2-3"/><label for="level2-3">X</label></div>
<div class="bglevel blackoutline levelblue"><input id="level2-4" name="attr_Level" type="radio" value="2-4"/><label for="level2-4">X</label></div>
<div class="bglevel blackoutline levelblue"><input id="level2-5" name="attr_Level" type="radio" value="2-5"/><label for="level2-5">X</label></div>
<div class="bglevel blackoutline levelblue"><input id="level2-6" name="attr_Level" type="radio" value="2-6"/><label for="level2-6">X</label></div>
<h3 class="whitetextoutline">3</h3>
<div class="bglevel blackoutline levelgreen"><input id="level3-1" name="attr_Level" type="radio" value="3-1"/><label for="level3-1">X</label></div>
<div class="bglevel blackoutline levelgreen"><input id="level3-2" name="attr_Level" type="radio" value="3-2"/><label for="level3-2">X</label></div>
<div class="bglevel blackoutline levelgreen"><input id="level3-3" name="attr_Level" type="radio" value="3-3"/><label for="level3-3">X</label></div>
<div class="bglevel blackoutline levelgreen"><input id="level3-4" name="attr_Level" type="radio" value="3-4"/><label for="level3-4">X</label></div>
<div class="bglevel blackoutline levelgreen"><input id="level3-5" name="attr_Level" type="radio" value="3-5"/><label for="level3-5">X</label></div>
<div class="bglevel blackoutline levelgreen"><input id="level3-6" name="attr_Level" type="radio" value="3-6"/><label for="level3-6">X</label></div>
<h3 class="whitetextoutline">4</h3>
<div class="bglevel blackoutline levelyellow"><input id="level4-1" name="attr_Level" type="radio" value="4-1"/><label for="level4-1">X</label></div>
<div class="bglevel blackoutline levelyellow"><input id="level4-2" name="attr_Level" type="radio" value="4-2"/><label for="level4-2">X</label></div>
<div class="bglevel blackoutline levelyellow"><input id="level4-3" name="attr_Level" type="radio" value="4-3"/><label for="level4-3">X</label></div>
<div class="bglevel blackoutline levelyellow"><input id="level4-4" name="attr_Level" type="radio" value="4-4"/><label for="level4-4">X</label></div>
<div class="bglevel blackoutline levelyellow"><input id="level4-5" name="attr_Level" type="radio" value="4-5"/><label for="level4-5">X</label></div>
<div class="bglevel blackoutline levelyellow"><input id="level4-6" name="attr_Level" type="radio" value="4-6"/><label for="level4-6">X</label></div>
<h3 class="whitetextoutline">5</h3>
<div class="bglevel blackoutline levelred"><input id="level5-1" name="attr_Level" type="radio" value="5-1"/><label for="level5-1">X</label></div>
<div class="bglevel blackoutline levelred"><input id="level5-2" name="attr_Level" type="radio" value="5-2"/><label for="level5-2">X</label></div>
<div class="bglevel blackoutline levelred"><input id="level5-3" name="attr_Level" type="radio" value="5-3"/><label for="level5-3">X</label></div>
<div class="bglevel blackoutline levelred"><input id="level5-4" name="attr_Level" type="radio" value="5-4"/><label for="level5-4">X</label></div>
<div class="bglevel blackoutline levelred"><input id="level5-5" name="attr_Level" type="radio" value="5-5"/><label for="level5-5">X</label></div>
<div class="bglevel blackoutline levelred"><input id="level5-6" name="attr_Level" type="radio" value="5-6"/><label for="level5-6">X</label></div>
<h3 class="whitetextoutline">6</h3>
</div>
</div>
<div class="bg bluebg" style="width: 620px; height: 390px; margin: 20px; display: block">
<div class="bg white" style="display: inline-block; margin-left: 5px; margin-top: 5px; width: 610px; height: 70px;">
<div style="display: inline-block; position: relative; width: 80px; height: 70px;">
<h5 style="position: absolute; top: 35px; left: 15px;">Ability</h5>
<h5 style="position: absolute; top: 50px; left: 15px;">Points</h5>
<h5 style="position: absolute; top: 50px; left: 70px;">Ability</h5>
</div>
<img src="http://i.imgur.com/ZiaIGSo.png" style="display: inline-block; margin: auto; width: 440px; height: 70px;"/>
<div style="display: inline-block; position: relative; width: 80px; height: 70px;">
<h5 style="position: absolute; top: 35px;">Derived</h5>
<h5 style="position: absolute; top: 50px; left: 10px;">Stats</h5>
</div>
</div>
<div style="height: 304px; margin-top: 2px;">
<div class="bg white" style="display: inline-block; margin-left: 5px; width: 495px; height: 304px; vertical-align: top;">
<div style="display: block; margin-left: 19px; margin-top: 2px; width: 475px;">
<div class="bg white blackoutline" style="display: inline-block; width: 30px; height: 30px; margin-top: 3px; vertical-align: top;"><input class="bg boxinput" style="background-color: white; width:30px;" type="number" min="-2" max="5" value="@{Str}" name="attr_Str" /></div>
<img src="http://i.imgur.com/yiMf8BR.png" style="display: inline-block; width: 38px; height: 38px; margin-left: -2px;" />
<div style="display: inline-block; height: 28px; vertical-align: bottom;"><h4 class="whitetextoutline" style="width: 30px;">STR</h4></div>
<div class="bg statsred" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="strminus2" name="attr_Str" type="radio" value="-2"/><label for="strminus2">X</label></div>
<div class="bg statsred" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="strminus1" name="attr_Str" type="radio" value="-1"/><label for="strminus1">X</label></div>
<div class="bg statsred" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="str0" name="attr_Str" type="radio" value="0"/><label for="str0">X</label></div>
<div class="bg statsyellow" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="strplus1" name="attr_Str" type="radio" value="1"/><label for="strplus1">X</label></div>
<div class="bg statsgreen" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="strplus2" name="attr_Str" type="radio" value="2"/><label for="strplus2">X</label></div>
<div class="bg statsblue" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="strplus3" name="attr_Str" type="radio" value="3"/><label for="strplus3">X</label></div>
<div class="bg statsblue" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="strplus4" name="attr_Str" type="radio" value="4"/><label for="strplus4">X</label></div>
<div class="bg statsblue" style="display: inline-block; width: 34px; height: 34px; margin-top: 3px; vertical-align: top;"><input id="strplus5" name="attr_Str" type="radio" value="5"/><label for="strplus5">X</label></div>
</div>
<div class="round gray" style="display: block; margin-left: 5px; width: 485px;">
<div class="bg white blackoutline" style="display: inline-block; width: 30px; height: 30px; margin-left: 14px; margin-top: 3px; vertical-align: top;"><input class="bg boxinput" style="background-color: white; width:30px;" type="number" min="-2" max="5" value="@{Agi}" name="attr_Agi" /></div>
<img src="http://i.imgur.com/c6gINlQ.png" style="display: inline-block; width: 38px; height: 38px; margin-left: -2px;" />
<div style="display: inline-block; height: 28px; vertical-align: bottom;"><h4 class="whitetextoutline" style="width: 30px;">AGI</h4></div>
<div class="bg statsred" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="agiminus2" name="attr_Agi" type="radio" value="-2"/><label for="agiminus2">X</label></div>
<div class="bg statsred" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="agiminus1" name="attr_Agi" type="radio" value="-1"/><label for="agiminus1">X</label></div>
<div class="bg statsred" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="agi0" name="attr_Agi" type="radio" value="0"/><label for="agi0">X</label></div>
<div class="bg statsyellow" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="agiplus1" name="attr_Agi" type="radio" value="1"/><label for="agiplus1">X</label></div>
<div class="bg statsgreen" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="agiplus2" name="attr_Agi" type="radio" value="2"/><label for="agiplus2">X</label></div>
<div class="bg statsblue" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="agiplus3" name="attr_Agi" type="radio" value="3"/><label for="agiplus3">X</label></div>
<div class="bg statsblue" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="agiplus4" name="attr_Agi" type="radio" value="4"/><label for="agiplus4">X</label></div>
<div class="bg statsblue" style="display: inline-block; width: 34px; height: 34px; margin-top: 3px; vertical-align: top;"><input id="agiplus5" name="attr_Agi" type="radio" value="5"/><label for="agiplus5">X</label></div>
</div>
<div style="display: block; margin-left: 19px; width: 475px;">
<div class="bg white blackoutline" style="display: inline-block; width: 30px; height: 30px; margin-top: 3px; vertical-align: top;"><input class="bg boxinput" style="background-color: white; width:30px;" type="number" min="-2" max="5" value="@{Per}" name="attr_Per" /></div>
<img src="http://i.imgur.com/9Dvzdik.png" style="display: inline-block; width: 38px; height: 38px; margin-left: -2px;" />
<div style="display: inline-block; height: 28px; vertical-align: bottom;"><h4 class="whitetextoutline" style="width: 30px;">PER</h4></div>
<div class="bg statsred" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="perminus2" name="attr_Per" type="radio" value="-2"/><label for="perminus2">X</label></div>
<div class="bg statsred" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="perminus1" name="attr_Per" type="radio" value="-1"/><label for="perminus1">X</label></div>
<div class="bg statsred" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="per0" name="attr_Per" type="radio" value="0"/><label for="per0">X</label></div>
<div class="bg statsyellow" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="perplus1" name="attr_Per" type="radio" value="1"/><label for="perplus1">X</label></div>
<div class="bg statsgreen" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="perplus2" name="attr_Per" type="radio" value="2"/><label for="perplus2">X</label></div>
<div class="bg statsblue" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="perplus3" name="attr_Per" type="radio" value="3"/><label for="perplus3">X</label></div>
<div class="bg statsblue" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="perplus4" name="attr_Per" type="radio" value="4"/><label for="perplus4">X</label></div>
<div class="bg statsblue" style="display: inline-block; width: 34px; height: 34px; margin-top: 3px; vertical-align: top;"><input id="perplus5" name="attr_Per" type="radio" value="5"/><label for="perplus5">X</label></div>
</div>
<div class="round gray" style="display: block; margin-left: 5px; width: 485px;">
<div class="bg white blackoutline" style="display: inline-block; width: 30px; height: 30px; margin-left: 14px; margin-top: 3px; vertical-align: top;"><input class="bg boxinput" style="background-color: white; width:30px;" type="number" min="-2" max="5" value="@{Bui}" name="attr_Bui" /></div>
<img src="http://i.imgur.com/0vpA6Qd.png" style="display: inline-block; width: 38px; height: 38px; margin-left: -2px;" />
<div style="display: inline-block; height: 28px; vertical-align: bottom;"><h4 class="whitetextoutline" style="width: 30px;">BUI</h4></div>
<div class="bg statsred" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="buiminus2" name="attr_Bui" type="radio" value="-2"/><label for="buiminus2">X</label></div>
<div class="bg statsred" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="buiminus1" name="attr_Bui" type="radio" value="-1"/><label for="buiminus1">X</label></div>
<div class="bg statsred" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="bui0" name="attr_Bui" type="radio" value="0"/><label for="bui0">X</label></div>
<div class="bg statsyellow" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="buiplus1" name="attr_Bui" type="radio" value="1"/><label for="buiplus1">X</label></div>
<div class="bg statsgreen" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="buiplus2" name="attr_Bui" type="radio" value="2"/><label for="buiplus2">X</label></div>
<div class="bg statsblue" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="buiplus3" name="attr_Bui" type="radio" value="3"/><label for="buiplus3">X</label></div>
<div class="bg statsblue" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="buiplus4" name="attr_Bui" type="radio" value="4"/><label for="buiplus4">X</label></div>
<div class="bg statsblue" style="display: inline-block; width: 34px; height: 34px; margin-top: 3px; vertical-align: top;"><input id="buiplus5" name="attr_Bui" type="radio" value="5"/><label for="buiplus5">X</label></div>
</div>
<div style="display: block; margin-left: 19px; width: 475px;">
<div class="bg white blackoutline" style="display: inline-block; width: 30px; height: 30px; margin-top: 3px; vertical-align: top;"><input class="bg boxinput" style="background-color: white; width:30px;" type="number" min="-2" max="5" value="@{Res}" name="attr_Res" /></div>
<img src="http://i.imgur.com/gJAi9hL.png" style="display: inline-block; width: 38px; height: 38px; margin-left: -2px;" />
<div style="display: inline-block; height: 28px; vertical-align: bottom;"><h4 class="whitetextoutline" style="width: 30px;">RES</h4></div>
<div class="bg statsred" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="resminus2" name="attr_Res" type="radio" value="-2"/><label for="resminus2">X</label></div>
<div class="bg statsred" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="resminus1" name="attr_Res" type="radio" value="-1"/><label for="resminus1">X</label></div>
<div class="bg statsred" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="res0" name="attr_Res" type="radio" value="0"/><label for="res0">X</label></div>
<div class="bg statsyellow" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="resplus1" name="attr_Res" type="radio" value="1"/><label for="resplus1">X</label></div>
<div class="bg statsgreen" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="resplus2" name="attr_Res" type="radio" value="2"/><label for="resplus2">X</label></div>
<div class="bg statsblue" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="resplus3" name="attr_Res" type="radio" value="3"/><label for="resplus3">X</label></div>
<div class="bg statsblue" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="resplus4" name="attr_Res" type="radio" value="4"/><label for="resplus4">X</label></div>
<div class="bg statsblue" style="display: inline-block; width: 34px; height: 34px; margin-top: 3px; vertical-align: top;"><input id="resplus5" name="attr_Res" type="radio" value="5"/><label for="resplus5">X</label></div>
</div>
<div class="round gray" style="display: block; margin-left: 5px; width: 485px;">
<div class="bg white blackoutline" style="display: inline-block; width: 30px; height: 30px; margin-left: 14px; margin-top: 3px; vertical-align: top;"><input class="bg boxinput" style="background-color: white; width:30px;" type="number" min="-2" max="5" value="@{Cha}" name="attr_Cha" /></div>
<img src="http://i.imgur.com/Nikqo5N.png" style="display: inline-block; width: 38px; height: 38px; margin-left: -2px;" />
<div style="display: inline-block; height: 28px; vertical-align: bottom;"><h4 class="whitetextoutline" style="width: 30px;">CHA</h4></div>
<div class="bg statsred" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="chaminus2" name="attr_Cha" type="radio" value="-2"/><label for="chaminus2">X</label></div>
<div class="bg statsred" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="chaminus1" name="attr_Cha" type="radio" value="-1"/><label for="chaminus1">X</label></div>
<div class="bg statsred" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="cha0" name="attr_Cha" type="radio" value="0"/><label for="cha0">X</label></div>
<div class="bg statsyellow" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="chaplus1" name="attr_Cha" type="radio" value="1"/><label for="chaplus1">X</label></div>
<div class="bg statsgreen" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="chaplus2" name="attr_Cha" type="radio" value="2"/><label for="chaplus2">X</label></div>
<div class="bg statsblue" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="chaplus3" name="attr_Cha" type="radio" value="3"/><label for="chaplus3">X</label></div>
<div class="bg statsblue" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="chaplus4" name="attr_Cha" type="radio" value="4"/><label for="chaplus4">X</label></div>
<div class="bg statsblue" style="display: inline-block; width: 34px; height: 34px; margin-top: 3px; vertical-align: top;"><input id="chaplus5" name="attr_Cha" type="radio" value="5"/><label for="chaplus5">X</label></div>
</div>
<div style="display: block; margin-left: 19px; width: 475px;">
<div class="bg white blackoutline" style="display: inline-block; width: 30px; height: 30px; margin-top: 3px; vertical-align: top;"><input class="bg boxinput" style="background-color: white; width:30px;" type="number" min="-2" max="5" value="@{Int}" name="attr_Int" /></div>
<img src="http://i.imgur.com/lTRIt7a.png" style="display: inline-block; width: 38px; height: 38px; margin-left: -2px;" />
<div style="display: inline-block; height: 28px; vertical-align: bottom;"><h4 class="whitetextoutline" style="width: 30px;">INT</h4></div>
<div class="bg statsred" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="intminus2" name="attr_Int" type="radio" value="-2"/><label for="intminus2">X</label></div>
<div class="bg statsred" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="intminus1" name="attr_Int" type="radio" value="-1"/><label for="intminus1">X</label></div>
<div class="bg statsred" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="int0" name="attr_Int" type="radio" value="0"/><label for="int0">X</label></div>
<div class="bg statsyellow" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="intplus1" name="attr_Int" type="radio" value="1"/><label for="intplus1">X</label></div>
<div class="bg statsgreen" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="intplus2" name="attr_Int" type="radio" value="2"/><label for="intplus2">X</label></div>
<div class="bg statsblue" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="intplus3" name="attr_Int" type="radio" value="3"/><label for="intplus3">X</label></div>
<div class="bg statsblue" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 3px; vertical-align: top;"><input id="intplus4" name="attr_Int" type="radio" value="4"/><label for="intplus4">X</label></div>
<div class="bg statsblue" style="display: inline-block; width: 34px; height: 34px; margin-top: 3px; vertical-align: top;"><input id="intplus5" name="attr_Int" type="radio" value="5"/><label for="intplus5">X</label></div>
</div>
</div>
<div style="display: inline-block; height: 304px; vertical-align: top;">
<div class="bg statsbluebg" style="display: block; width: 111px; height: 68px; margin-bottom: 8px; padding-top: 5px; padding-bottom: 5px;">
<img src="http://i.imgur.com/utaieOv.png" style="width: 34px; height: 34px; margin-left: 6px;" />
<div style="display: inline-block; height: 28px; vertical-align: bottom;"><h4 style="width: 23px; margin-left: -1px;">LIF</h4></div>
<div class="bg white" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 2px; vertical-align: top;"><input type="number" style="display: none;" name="attr_LifCalc" value="(@{Bui}+@{Res}+3)" disabled="true" /><input class="bg boxinput" style="background-color: white; width:30px;" type="number" min="-2" max="5" name="attr_Lif" value="@{LifCalc}"/></div>
<div class="round white" style="width: 101px; height: 30px; margin-left: 5px;">
<img src="http://i.imgur.com/KdAwK9t.png" style="width: 90px; height: 22px; margin-left: 6px; margin-top: 4px;" />
</div>
</div>
<div class="bg statsbluebg" style="display: block; width: 111px; height: 68px; margin-bottom: 8px; padding-top: 5px; padding-bottom: 5px;">
<img src="http://i.imgur.com/w4DYYCX.png" style="width: 34px; height: 34px; margin-left: 6px;" />
<div style="display: inline-block; height: 28px; vertical-align: bottom;"><h4 style="width: 27px; margin-left: -5px;">DEF</h4></div>
<div class="bg white" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 2px; vertical-align: top;"><input type="number" style="display: none;" name="attr_DefCalc" value="(@{Agi}+@{Per})" disabled="true" /><input class="bg boxinput" style="background-color: white; width:30px;" type="number" min="-2" max="5" name="attr_Def" value="@{DefCalc}"/></div>
<div class="round white" style="width: 101px; height: 30px; margin-left: 5px;">
<img src="http://i.imgur.com/gfslWyU.png" style="width: 90px; height: 22px; margin-left: 3px; margin-top: 4px;" />
</div>
</div>
<div class="bg statsbluebg" style="display: block; width: 111px; height: 68px; margin-bottom: 8px; padding-top: 5px; padding-bottom: 5px;">
<img src="http://i.imgur.com/rJdQrm9.png" style="width: 34px; height: 34px; margin-left: 6px;" />
<div style="display: inline-block; height: 28px; vertical-align: bottom;"><h4 style="width: 32px; margin-left: -10px;">PWR</h4></div>
<div class="bg white" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 2px; vertical-align: top;"><input type="number" style="display: none;" name="attr_PwrCalc" value="(@{Bui}+@{Res})" disabled="true" /><input class="bg boxinput" style="background-color: white; width:30px;" type="number" min="-2" max="5" name="attr_Pwr" value="@{PwrCalc}"/></div>
<div class="round white" style="width: 101px; height: 30px; margin-left: 5px;">
<img src="http://i.imgur.com/nNnqwNV.png" style="width: 90px; height: 22px; margin-left: 3px; margin-top: 4px;" />
</div>
</div>
<div class="bg statsbluebg" style="display: block; width: 111px; height: 35px; padding-top: 5px; padding-bottom: 5px;">
<img src="http://i.imgur.com/hxq08yF.png" style="width: 34px; height: 34px; margin-left: 6px;" />
<div style="display: inline-block; height: 28px; vertical-align: bottom;"><h4 style="width: 27px; margin-left: -5px;">SPD</h4></div>
<div class="bg white" style="display: inline-block; width: 34px; height: 34px; margin-right: 7px; margin-top: 2px; vertical-align: top;"><input class="bg boxinput" style="width:30px;" type="number" min="-2" max="5" name="attr_Spd"/></div>
</div>
</div>
</div>
</div>