diff --git a/cogent/cogent.css b/cogent/cogent.css
new file mode 100644
index 0000000000..7b8807c567
--- /dev/null
+++ b/cogent/cogent.css
@@ -0,0 +1,134 @@
+//*   pointer-events: none; **/
+
+
+
+*, ::before, ::after {box-sizing: border-box;}
+
+div {width: 100%}
+p {text-align: center}
+select {margin: auto;}
+
+.clabl { display: flex; margin-bottom: 0px; padding-right: 0px}
+.clabl > input {visibility: hidden; position: absolute;}
+.clabl > input + div { cursor: pointer; border: 2px solid transparent;}
+.clabl > input:checked + div { background-color: #ffd6bb; }
+
+.boxed { border: 1px; border-style: solid; text-align: center }
+.charsheet .mainContainer {width: 95%; box-sizing: border-box !important}
+.mainTitle { display: flex;justify-content:center; align-items:center;background-color: midnightblue; color: white; text-decoration-thickness: 5px; font-weight:bold; text-align: center; height: 25px; vertical-align: middle; line-height: 100%}
+.containerThird { display: flex; }
+.containerThird>div { display: inline-block; width: 100%}
+.charsheet .containerFift>label { margin-bottom: 0px; padding-right: 0px; text-align: center;}
+.containerFift>label>div {flex-grow: 1; text-align: center; display: inline-block; border: 1px; border-style: solid; padding: 0px; margin: 0px; outline: 0px;}
+.containerFift {display: flex; width: 100%}
+
+.containerFiveRows {display: block; padding: 1em; flex-grow: 1;}
+
+.characterviewer label {font-weight: bold; font-size: 1.2em; margin-bottom: 0px;}
+
+.skill {display: block; width: 100%;}
+.skill>p {width: 100%;}
+.skillSelect {display: flex; flex-grow: 1; width: 100%; height: 100%}
+.skillSelect>label { margin-bottom: 0px; padding-right: 0px;}
+.skillVocationSelect {display: flex; flex-grow: 1; width: 100%;justify-content: space-around;}
+/*.skillSelect>label>div {container-type: inline-size; font-size: 1cqw}*/
+
+.skillSum {display: block; }
+.skillSum>input {text-align: center; }
+
+.settingsBody {display: flex; }
+
+.alignLeft {text-align: left}
+.flex {display: flex; width: 100%}
+.noPad { padding: 0px; margin: 0px; outline: 0px;}
+.calcBox {line-height: 3em}
+.largeText {font-size: larger;}
+.largedialog label {width: 100%; text-align: left; float: none; display: block; padding-right: 0px;}
+    
+.VocationSkill {width: 50%; }
+.VocationSkillType>label { margin-bottom: 0px; padding-right: 0px; text-align: center;padding: 0.1em}
+.VocationSkillType>label>div {container-type: inline-size; font-size: 1cqw}
+.VocationSkillDescribtion>input {width: 100%}
+.VocationSkillDescribtion>p {padding: 0.5em}
+.containerVocationSkills {display: flex; flex-wrap: wrap; flex-direction: row;padding: 0}
+.containerVocation {display: inline-block; padding:0.5em;}
+.containerVocation>div {padding: 1em;}
+.Green {padding: 1em; box-sizing: border-box;}
+
+.Basics {display: flex;}
+.left {width: 40%; padding: 1em}
+.left>label {padding: 0.5em}
+.right {display: block; width: 40%}
+.right>label>input {width: 100%}
+.avatar {width: 20%}
+.flex-grow {flex-grow: 1}
+.halved {display: flex;}
+.destiny {height: 20%; padding: 1em; width: 50%; flex-grow: 1}
+.commerce {height: 20%; padding: 1em; width: 50%; flex-grow: 1}
+.midrightMain {display: flex; padding: 1em}
+.midright {display: block}
+.padding {padding: 1em}
+.auto {width: auto}
+.button {border: 0px; width: 100%; text-align: center; height: 100%}
+.button>p {text-align: center}
+.buttonVocation {border: 0px;}
+.buttonVocation>p {text-align: center}
+.vocationskillresult {width: 50%}
+
+.repcontainer>.repitem{display:flex}
+
+.sheet-rolltemplate-test .sheet-goodDie {font-family: dicefontd6; color: forestgreen; font-size: 2em; line-height: normal;}
+.sheet-rolltemplate-test .sheet-challangedie {font-family: dicefontd6; color: grey; font-size: 2em; line-height: normal;}
+
+.sheet-rolltemplate-test .sheet-badDie  {font-family: dicefontd6; color: darkred; font-size: 2em; line-height: normal;}
+/*.sheet-rolltemplate-test .sheet-badDie>p>span {text-align: center; background-color: transparent; border: 0px}*/
+
+.sheet-rolltemplate-test .sheet-diceDisplay {display: flex; flex-wrap: wrap; background-color: white; padding: 1em;  }
+
+.sheet-rolltemplate-test .sheet-title {display: flex; background-color: midnightblue; color: white; text-align: center; justify-content: center; }
+.sheet-rolltemplate-test .sheet-title>* { color: white; text-align: center;}
+.sheet-rolltemplate-test .sheet-title>h4>span { color: white; text-align: center; background-color: transparent; border: 0px}
+
+.sheet-rolltemplate-test .sheet-infoBox {display: none; flex-wrap: wrap; align-content: center; justify-content: space-between; align-items: flex-start; background-color: lightgrey; }
+.sheet-rolltemplate-test .sheet-infoBox>div {margin: 0.5em; display: flex;}
+.sheet-rolltemplate-test .sheet-infoBox>div>div>* {size: 0.5em;}
+.sheet-rolltemplate-test .sheet-infoBox>div>div>p {font-size: 0.7em;}
+.sheet-rolltemplate-test .sheet-infoBox>div>div>span {font-size: 0.7em;}
+
+.sheet-rolltemplate-test .textchatcontainer .inlinerollresult {background-color: transparent !important; border: 0px !important;}
+
+.sheet-rolltemplate-test .sheet-resolution {border: 0px; padding: 1em; background-color: lightgrey; display: flex; }
+.sheet-rolltemplate-test .sheet-resolution>p {font-size: 2em;}
+.sheet-template-container {border: 1px; border-color: black;}
+
+.sheet-rolltemplate-test .sheet-goodAndChallangeDie {display: flex; flex-wrap: wrap; flex-flow: nowrap; overflow-wrap: anywhere;}
+.sheet-rolltemplate-test .sheet-goodAndChallangeDie>p>span {border: 0px; padding: 0px; background-color: white; overflow-wrap: anywhere; line-height: normal;}
+
+
+
+
+
+
+
+.sheet-rolltemplate-injury .sheet-goodDie {font-family: dicefontd6; color: forestgreen; font-size: 2em; line-height: normal;}
+.sheet-rolltemplate-injury .sheet-challangedie {font-family: dicefontd6; color: grey; font-size: 2em; line-height: normal;}
+.sheet-rolltemplate-injury .sheet-badDie  {font-family: dicefontd6; color: darkred; font-size: 2em; overflow-wrap: anywhere; line-height: normal; background-color: transparent; line-height: normal;}
+/*.sheet-rolltemplate-injury .sheet-badDie>span {text-align: center; background-color: transparent; border: 0px}*/
+.sheet-rolltemplate-injury .sheet-diceDisplay {display: flex; flex-wrap: wrap; background-color: white; padding: 1em; }
+.sheet-rolltemplate-injury .sheet-title-red {display: flex; background-color: darkred; color: white; text-align: center; justify-content: center; }
+.sheet-rolltemplate-injury .sheet-title-red>* { color: white; text-align: center;}
+.sheet-rolltemplate-injury .sheet-title-red>h4>span { color: white; text-align: center; background-color: transparent; border: 0px}
+.sheet-rolltemplate-injury .sheet-infoBox {display: none; flex-wrap: wrap; align-content: center; justify-content: space-between; align-items: flex-start; background-color: lightgrey; }
+.sheet-rolltemplate-injury .sheet-infoBox>div {margin: 0.5em; display: flex;}
+.sheet-rolltemplate-injury .sheet-infoBox>div>div>* {size: 0.5em;}
+.sheet-rolltemplate-injury .sheet-infoBox>div>div>p {font-size: 0.7em;}
+.sheet-rolltemplate-injury .sheet-infoBox>div>div>span {font-size: 0.7em;}
+.sheet-rolltemplate-injury .textchatcontainer .inlinerollresult {background-color: transparent !important; border: 0px !important;}
+.sheet-rolltemplate-injury .sheet-resolution {border: 0px; padding: 1em; background-color: lightgrey; display: flex; }
+.sheet-rolltemplate-injury .sheet-resolution>p {font-size: 2em;}
+.sheet-rolltemplate-injury .sheet-goodAndChallangeDie {display: flex; flex-wrap: nowrap; overflow-wrap: anywhere;}
+.sheet-rolltemplate-injury .sheet-goodAndChallangeDie>p>span {border: 0px; padding: 0px; background-color: white; overflow-wrap: anywhere; line-height: normal;}
+
+
+
+.toggle:checked ~ label{ pointer-events: none; background-color: grey;}//*.VocationSkillType>label { pointer-events: none} *//
\ No newline at end of file
diff --git a/cogent/cogent.html b/cogent/cogent.html
new file mode 100644
index 0000000000..0f925efb61
--- /dev/null
+++ b/cogent/cogent.html
@@ -0,0 +1,2006 @@
+<div class="mainContainer">
+    <div class="settings">
+        <div class="mainTitle">SETTINGS:</div>
+        <div class="settingsBody">
+            <div style="display: flex"><input name="attr_lock" class="toggle" type="checkbox"/><p>Lock controls</p></div>
+
+            <div class="containerFift" style="">
+                <p><b>Roll to GM: </b></p>
+                <label class="clabl" style="width:25%;"><input type="radio" name="attr_gmRoll" value="" checked="checked"/><div> Disabled </div> </label>
+                <label class="clabl" style="width:25%;"><input type="radio" name="attr_gmRoll" value="/w gm " /><div> Enabled </div></label>
+            </div>
+
+        </div>
+    </div>
+    <div class="Main">
+        <div class="mainTitle">MAIN:</div>
+        <div class="Basics">
+            <div class="left">
+                <label><b>Name:</b> <input name="attr_character_name" type="text"/></label>
+                <label><b>Alter: </b><input name="attr_age" type="text"/></label>
+                <label><b>Rasse: </b><input name="attr_race" type="text"/></label>
+                <label><b>Beschreibung: </b><textarea name="attr_description" type="description"/></label>
+            </div>
+            <div class="avatar">
+                <img name="attr_character_avatar">
+            </div>
+            <div class="right">
+                <label><b>Behinderungen: </b><textarea name="attr_disability" type="text"/></label>
+                <label><b>Ticks: </b><textarea name="attr_ticks" type="text"/></label>
+            </div>
+        </div>
+    </div>        
+    <div class="attributes">
+        <div class="mainTitle">ATTRIBUTES:</div>
+        <div class="containerThird">
+            <div class="containerElement" style="margin: 0px; padding: 0px;">
+                <b>STR</b> (Strength)
+                <div class="boxed" style="margin: 0px; padding: 0px;">
+                    <div class="containerFift" style="background-color: lightgrey;margin: 0px; padding: 0px; outline: 0px">
+                        <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                        <label class="clabl" style="width:12%;"><input type="radio" name="attr_radio_strength" value="-1" /><div> -1 </div> </label>
+                        <label class="clabl" style="width:10%;"><input type="radio" name="attr_radio_strength" value="0" checked="checked"/><div> 0 </div> </label>
+                        <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_strength" value="1" /><div> +1 </div></label>
+                        <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_strength" value="2" /><div> +2 </div></label>
+                        <label class="clabl" style="width:14%;"><input type="radio" name="attr_radio_strength" value="3" /><div> +3 </div></label>
+                        <label class="clabl" style="width:14%;"><input type="radio" name="attr_radio_strength" value="4" /><div> +4 </div></label>
+                    </div>
+                    <div class="boxed" style="background-color: gainsboro">
+                        <p>For each additional point in <b>STR: <br> severity in injury</b> can be <b>reduced</b><br> once every combat encounter</p>
+                    </div>
+                </div>
+            </div>
+            <div class="containerElement" style="margin: 0px; padding: 0px;">
+                <b>REF</b> (Reflex)
+                <div class="boxed" style="margin: 0px; padding: 0px;">
+                    <div class="containerFift" style="background-color: lightgrey;margin: 0px; padding: 0px; outline: 0px">
+                        <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                        <label class="clabl" style="width:12%;"><input type="radio" name="attr_radio_reflex" value="-1" /><div> -1 </div> </label>
+                        <label class="clabl" style="width:10%;"><input type="radio" name="attr_radio_reflex" value="0" checked="checked"/><div> 0 </div> </label>
+                        <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_reflex" value="1" /><div> +1 </div></label>
+                        <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_reflex" value="2" /><div> +2 </div></label>
+                        <label class="clabl" style="width:14%;"><input type="radio" name="attr_radio_reflex" value="3" /><div> +3 </div></label>
+                        <label class="clabl" style="width:14%;"><input type="radio" name="attr_radio_reflex" value="4" /><div> +4 </div></label>
+                    </div>
+                    <div class="boxed" style="background-color: gainsboro">
+                        <p>For each additional point int <b>REF:<br> Turn Priority is Higher</b> at the <br> beginning of combat encounters</p>
+                    </div>
+                </div>
+            </div>
+            <div class="containerElement" style="margin: 0px; padding: 0px;">
+                <b>INT</b> (Intelligence)
+                <div class="boxed" style="margin: 0px; padding: 0px;">
+                    <div class="containerFift" style="background-color: lightgrey;margin: 0px; padding: 0px; outline: 0px">
+                        <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                        <label class="clabl" style="width:12%;"><input type="radio" name="attr_radio_intelligence" value="-1" /><div> -1 </div> </label>
+                        <label class="clabl" style="width:10%;"><input type="radio" name="attr_radio_intelligence" value="0" checked="checked"/><div> 0 </div> </label>
+                        <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_intelligence" value="1" /><div> +1 </div></label>
+                        <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_intelligence" value="2" /><div> +2 </div></label>
+                        <label class="clabl" style="width:14%;"><input type="radio" name="attr_radio_intelligence" value="3" /><div> +3 </div></label>
+                        <label class="clabl" style="width:14%;"><input type="radio" name="attr_radio_intelligence" value="4" /><div> +4 </div></label>
+                    </div>
+                    <div class="boxed" style="background-color: gainsboro">
+                        <p>For each additional point in <b>INT:<br></b>Recive <b> 3 additional Skill Points<br></b> to spend in character creation</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div class="skills">
+        <div class="mainTitle"> SKILLS: </div>
+        <div class="containerThird">
+            <div class="containerFiveRows">
+                <p class="largeText noPad"><b>STR</b> Based Skills
+                <div class="skill">
+                    <p class="alignLeft noPad"><b>Endurance:</b></p>
+                    <div class="flex">
+                        <input type="radio" name="attr_radio_endurance_type" value="STR" checked="checked" style="display: none"/>
+                        <div class="skillSelect noPad">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_endurance_level" value="-1" /><div> -1 </div> </label>
+                            <label class="clabl boxed" style="width:10%;"><input type="radio" name="attr_radio_endurance_level" value="0" checked="checked"/><div> 0 </div> </label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_endurance_level" value="1" /><div> +1 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_endurance_level" value="2" /><div> +2 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_endurance_level" value="3" /><div> +3 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_endurance_level" value="4" /><div> +4 </div></label>
+                        </div>
+                        <div class="skillSum boxed" style="width: 37.5%" style="align: right">
+                            <button name="act_test" id="endurance" type="action" class="buttonVocation">
+                                <p class="alignLeft noPad" style="font-size: large; font-family: dicefontd8"><b>0</b></p>
+                            </button>
+                            <input class="calcBox" name="attr_input_skill_endurance_level" value="0" type="boxed" style="width: 100%;"/>
+                        </div>
+                    </div>
+                </div>
+                <div class="skill">
+                    <p class="alignLeft noPad"><b>Athletics:</b></p>
+                    <div class="flex">
+                        <input type="radio" name="attr_radio_athletics_type" value="STR" checked="checked" style="display: none"/>
+                        <div class="skillSelect noPad">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_athletics_level" value="-1" /><div> -1 </div> </label>
+                            <label class="clabl boxed" style="width:10%;"><input type="radio" name="attr_radio_athletics_level" value="0" checked="checked"/><div> 0 </div> </label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_athletics_level" value="1" /><div> +1 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_athletics_level" value="2" /><div> +2 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_athletics_level" value="3" /><div> +3 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_athletics_level" value="4" /><div> +4 </div></label>
+                        </div>
+                        <div class="skillSum boxed" style="width: 37.5%" style="align: right">
+                            <button name="act_test" id="athletics" type="action" class="buttonVocation">
+                                <p class="alignLeft noPad" style="font-size: large; font-family: dicefontd8"><b>0</b></p>
+                            </button>
+                            <input class="calcBox" name="attr_input_skill_athletics_level" type="boxed" style="width: 100%;"/>
+                        </div>
+                    </div>
+                </div>    
+                <div class="skill">
+                    <p class="alignLeft noPad"><b>Grip:</b></p>
+                    <div class="flex">
+                        <input type="radio" name="attr_radio_grip_type" value="STR" checked="checked" style="display: none"/>
+                        <div class="skillSelect noPad">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_grip_level" value="-1" /><div> -1 </div> </label>
+                            <label class="clabl boxed" style="width:10%;"><input type="radio" name="attr_radio_grip_level" value="0" checked="checked"/><div> 0 </div> </label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_grip_level" value="1" /><div> +1 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_grip_level" value="2" /><div> +2 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_grip_level" value="3" /><div> +3 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_grip_level" value="4" /><div> +4 </div></label>
+                        </div>
+                        <div class="skillSum boxed" style="width: 37.5%" style="align: right">
+                            <button name="act_test" id="grip" type="action" class="buttonVocation">
+                                <p class="alignLeft noPad" style="font-size: large; font-family: dicefontd8"><b>0</b></p>
+                            </button>
+                            <input class="calcBox" name="attr_input_skill_grip_level" type="boxed" style="width: 100%;"/>
+                        </div>
+                    </div>
+                </div>        
+                <div class="skill">
+                    <p class="alignLeft noPad"><b>Swim:</b></p>
+                    <div class="flex">
+                        <input type="radio" name="attr_radio_swim_type" value="STR" checked="checked" style="display: none"/>
+                        <div class="skillSelect noPad">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_swim_level" value="-1" /><div> -1 </div> </label>
+                            <label class="clabl boxed" style="width:10%;"><input type="radio" name="attr_radio_swim_level" value="0" checked="checked"/><div> 0 </div> </label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_swim_level" value="1" /><div> +1 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_swim_level" value="2" /><div> +2 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_swim_level" value="3" /><div> +3 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_swim_level" value="4" /><div> +4 </div></label>
+                        </div>
+                        <div class="skillSum boxed" style="width: 37.5%" style="align: right">
+                            <button name="act_test" id="swim" type="action" class="buttonVocation">
+                                <p class="alignLeft noPad" style="font-size: large; font-family: dicefontd8"><b>0</b></p>
+                            </button>
+                            <input class="calcBox" name="attr_input_skill_swim_level" type="boxed" style="width: 100%;"/>
+                        </div>
+                    </div>
+                </div>
+                <div class="skill">
+                    <p class="alignLeft noPad"><b>Throw:</b></p>
+                    <div class="flex">
+                        <input type="radio" name="attr_radio_throw_type" value="STR" checked="checked" style="display: none"/>
+                        <div class="skillSelect noPad">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_throw_level" value="-1" /><div> -1 </div> </label>
+                            <label class="clabl boxed" style="width:10%;"><input type="radio" name="attr_radio_throw_level" value="0" checked="checked"/><div> 0 </div> </label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_throw_level" value="1" /><div> +1 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_throw_level" value="2" /><div> +2 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_throw_level" value="3" /><div> +3 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_throw_level" value="4" /><div> +4 </div></label>
+                        </div>
+                        <div class="skillSum boxed" style="width: 37.5%" style="align: right">
+                            <button name="act_test" id="throw" type="action" class="buttonVocation">
+                                <p class="alignLeft noPad" style="font-size: large; font-family: dicefontd8"><b>0</b></p>
+                            </button>
+                            <input class="calcBox" name="attr_input_skill_throw_level" type="boxed" style="width: 100%;"/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="containerFiveRows">
+                <p class="largeText noPad"><b>REF</b> Based Skills
+                <div class="skill">
+                    <p class="alignLeft noPad"><b>Perception:</b></p>
+                    <div class="flex">
+                        <input type="radio" name="attr_radio_perception_type" value="REF" checked="checked" style="display: none"/>
+                        <div class="skillSelect noPad">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_perception_level" value="-1" /><div> -1 </div> </label>
+                            <label class="clabl boxed" style="width:10%;"><input type="radio" name="attr_radio_perception_level" value="0" checked="checked"/><div> 0 </div> </label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_perception_level" value="1" /><div> +1 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_perception_level" value="2" /><div> +2 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_perception_level" value="3" /><div> +3 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_perception_level" value="4" /><div> +4 </div></label>
+                        </div>
+                        <div class="skillSum boxed" style="width: 37.5%" style="align: right">
+                            <button name="act_test" id="perception" type="action" class="buttonVocation">
+                                <p class="alignLeft noPad" style="font-size: large; font-family: dicefontd8"><b>0</b></p>
+                            </button>
+                            <input class="calcBox" name="attr_input_skill_perception_level" type="boxed" style="width: 100%;"/>
+                        </div>
+                    </div>
+                </div>
+                <div class="skill">
+                    <p class="alignLeft noPad"><b>Acrobatics:</b></p>
+                    <div class="flex">
+                        <input type="radio" name="attr_radio_acrobatics_type" value="REF" checked="checked" style="display: none"/>
+                        <div class="skillSelect noPad">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_acrobatics_level" value="-1" /><div> -1 </div> </label>
+                            <label class="clabl boxed" style="width:10%;"><input type="radio" name="attr_radio_acrobatics_level" value="0" checked="checked"/><div> 0 </div> </label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_acrobatics_level" value="1" /><div> +1 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_acrobatics_level" value="2" /><div> +2 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_acrobatics_level" value="3" /><div> +3 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_acrobatics_level" value="4" /><div> +4 </div></label>
+                        </div>
+                        <div class="skillSum boxed" style="width: 37.5%" style="align: right">
+                            <button name="act_test" id="acrobatics" type="action" class="buttonVocation">
+                                <p class="alignLeft noPad" style="font-size: large; font-family: dicefontd8"><b>0</b></p>
+                            </button>
+                            <input class="calcBox" name="attr_input_skill_acrobatics_level" type="boxed" style="width: 100%;"/>
+                        </div>
+                    </div>
+                </div>                
+                <div class="skill">
+                    <p class="alignLeft noPad"><b>Ride/Pilot:</b></p>
+                    <div class="flex">
+                        <input type="radio" name="attr_radio_ride_pilot_type" value="REF" checked="checked" style="display: none"/>
+                        <div class="skillSelect noPad">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_ride_pilot_level" value="-1" /><div> -1 </div> </label>
+                            <label class="clabl boxed" style="width:10%;"><input type="radio" name="attr_radio_ride_pilot_level" value="0" checked="checked"/><div> 0 </div> </label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_ride_pilot_level" value="1" /><div> +1 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_ride_pilot_level" value="2" /><div> +2 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_ride_pilot_level" value="3" /><div> +3 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_ride_pilot_level" value="4" /><div> +4 </div></label>
+                        </div>
+                        <div class="skillSum boxed" style="width: 37.5%" style="align: right">
+                            <button name="act_test" id="ride_pilot" type="action" class="buttonVocation">
+                                <p class="alignLeft noPad" style="font-size: large; font-family: dicefontd8"><b>0</b></p>
+                            </button>
+                            <input class="calcBox" name="attr_input_skill_ride_pilot_level" type="boxed" style="width: 100%;"/>
+                        </div>
+                    </div>
+                </div>                
+                <div class="skill">
+                    <p class="alignLeft noPad"><b>Sleight of Hand:</b></p>
+                    <div class="flex">
+                        <input type="radio" name="attr_radio_sleight_of_hand_type" value="REF" checked="checked" style="display: none"/>
+                        <div class="skillSelect noPad">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_sleight_of_hand_level" value="-1" /><div> -1 </div> </label>
+                            <label class="clabl boxed" style="width:10%;"><input type="radio" name="attr_radio_sleight_of_hand_level" value="0" checked="checked"/><div> 0 </div> </label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_sleight_of_hand_level" value="1" /><div> +1 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_sleight_of_hand_level" value="2" /><div> +2 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_sleight_of_hand_level" value="3" /><div> +3 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_sleight_of_hand_level" value="4" /><div> +4 </div></label>
+                        </div>
+                        <div class="skillSum boxed" style="width: 37.5%" style="align: right">
+                            <button name="act_test" id="sleight_of_hand" type="action" class="buttonVocation">
+                                <p class="alignLeft noPad" style="font-size: large; font-family: dicefontd8"><b>0</b></p>
+                            </button>
+                            <input class="calcBox" name="attr_input_skill_sleight_of_hand_level" type="boxed" style="width: 100%;"/>
+                        </div>
+                    </div>
+                </div>                    
+                <div class="skill">
+                    <p class="alignLeft noPad"><b>Stealth:</b></p>
+                    <div class="flex">
+                        <input type="radio" name="attr_radio_stealth_type" value="REF" checked="checked" style="display: none"/>
+                        <div class="skillSelect noPad">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_stealth_level" value="-1" /><div> -1 </div> </label>
+                            <label class="clabl boxed" style="width:10%;"><input type="radio" name="attr_radio_stealth_level" value="0" checked="checked"/><div> 0 </div> </label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_stealth_level" value="1" /><div> +1 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_stealth_level" value="2" /><div> +2 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_stealth_level" value="3" /><div> +3 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_stealth_level" value="4" /><div> +4 </div></label>
+                        </div>
+                        <div class="skillSum boxed" style="width: 37.5%" style="align: right">
+                            <button name="act_test" id="stealth" type="action" class="buttonVocation">
+                                <p class="alignLeft noPad" style="font-size: large; font-family: dicefontd8"><b>0</b></p>
+                            </button>
+                            <input class="calcBox" name="attr_input_skill_stealth_level" type="boxed" style="width: 100%;"/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="containerFiveRows">
+                <p class="largeText noPad"><b>INT</b> Based Skills
+                <div class="skill">
+                    <p class="alignLeft noPad"><b>General Knowledge:</b></p>
+                    <div class="flex">
+                        <input type="radio" name="attr_radio_general_knowledge_type" value="INT" checked="checked" style="display: none"/>
+                        <div class="skillSelect noPad">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_general_knowledge_level" value="-1" /><div> -1 </div> </label>
+                            <label class="clabl boxed" style="width:10%;"><input type="radio" name="attr_radio_general_knowledge_level" value="0" checked="checked"/><div> 0 </div> </label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_general_knowledge_level" value="1" /><div> +1 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_general_knowledge_level" value="2" /><div> +2 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_general_knowledge_level" value="3" /><div> +3 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_general_knowledge_level" value="4" /><div> +4 </div></label>
+                        </div>
+                        <div class="skillSum boxed" style="width: 37.5%" style="align: right">
+                            <button name="act_test" id="general_knowledge" type="action" class="buttonVocation">
+                                <p class="alignLeft noPad" style="font-size: large; font-family: dicefontd8"><b>0</b></p>
+                            </button>
+                            <input class="calcBox" name="attr_input_skill_general_knowledge_level" type="boxed" style="width: 100%;"/>
+                        </div>
+                    </div>
+                </div>
+                <div class="skill">
+                    <p class="alignLeft noPad"><b>Deception:</b></p>
+                    <div class="flex">
+                        <input type="radio" name="attr_radio_deception_type" value="INT" checked="checked" checked="checked" style="display: none"/>
+                        <div class="skillSelect noPad">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_deception_level" value="-1" /><div> -1 </div> </label>
+                            <label class="clabl boxed" style="width:10%;"><input type="radio" name="attr_radio_deception_level" value="0" checked="checked"/><div> 0 </div> </label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_deception_level" value="1" /><div> +1 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_deception_level" value="2" /><div> +2 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_deception_level" value="3" /><div> +3 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_deception_level" value="4" /><div> +4 </div></label>
+                        </div>
+                        <div class="skillSum boxed" style="width: 37.5%" style="align: right">
+                            <button name="act_test" id="deception" type="action" class="buttonVocation">
+                                <p class="alignLeft noPad" style="font-size: large; font-family: dicefontd8"><b>0</b></p>
+                            </button>
+                            <input class="calcBox" name="attr_input_skill_deception_level" type="boxed" style="width: 100%;"/>
+                        </div>
+                    </div>
+                </div>                
+                <div class="skill">
+                    <p class="alignLeft noPad"><b>Infiltration:</b></p>
+                    <div class="flex">
+                        <input type="radio" name="attr_radio_infiltration_type" value="INT" checked="checked" style="display: none"/>
+                        <div class="skillSelect noPad">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_infiltration_level" value="-1" /><div> -1 </div> </label>
+                            <label class="clabl boxed" style="width:10%;"><input type="radio" name="attr_radio_infiltration_level" value="0" checked="checked"/><div> 0 </div> </label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_infiltration_level" value="1" /><div> +1 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_infiltration_level" value="2" /><div> +2 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_infiltration_level" value="3" /><div> +3 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_infiltration_level" value="4" /><div> +4 </div></label>
+                        </div>
+                        <div class="skillSum boxed" style="width: 37.5%" style="align: right">
+                            <button name="act_test" id="infiltration" type="action" class="buttonVocation">
+                                <p class="alignLeft noPad" style="font-size: large; font-family: dicefontd8"><b>0</b></p>
+                            </button>
+                            <input class="calcBox" name="attr_input_skill_infiltration_level" type="boxed" style="width: 100%;"/>
+                        </div>
+                    </div>
+                </div>                    
+                <div class="skill">
+                    <p class="alignLeft noPad"><b>Persuasion:</b></p>
+                    <div class="flex">
+                        <input type="radio" name="attr_radio_persuasion_type" value="INT" checked="checked" style="display: none"/>
+                        <div class="skillSelect noPad">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_persuasion_level" value="-1" /><div> -1 </div> </label>
+                            <label class="clabl boxed" style="width:10%;"><input type="radio" name="attr_radio_persuasion_level" value="0" checked="checked"/><div> 0 </div> </label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_persuasion_level" value="1" /><div> +1 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_persuasion_level" value="2" /><div> +2 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_persuasion_level" value="3" /><div> +3 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_persuasion_level" value="4" /><div> +4 </div></label>
+                        </div>
+                        <div class="skillSum boxed" style="width: 37.5%" style="align: right">
+                            <button name="act_test" id="persuasion" type="action" class="buttonVocation">
+                                <p class="alignLeft noPad" style="font-size: large; font-family: dicefontd8"><b>0</b></p>
+                            </button>
+                            <input class="calcBox" name="attr_input_skill_persuasion_level" type="boxed" style="width: 100%;"/>
+                        </div>
+                    </div>
+                </div>                
+                <div class="skill">
+                    <p class="alignLeft noPad"><b>Survival:</b></p>
+                    <div class="flex">
+                        <input type="radio" name="attr_radio_survival_type" value="INT" checked="checked" style="display: none"/>
+                        <div class="skillSelect noPad">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_survival_level" value="-1" /><div> -1 </div> </label>
+                            <label class="clabl boxed" style="width:10%;"><input type="radio" name="attr_radio_survival_level" value="0" checked="checked"/><div> 0 </div> </label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_survival_level" value="1" /><div> +1 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_survival_level" value="2" /><div> +2 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_survival_level" value="3" /><div> +3 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_survival_level" value="4" /><div> +4 </div></label>
+                        </div>
+                        <div class="skillSum boxed" style="width: 37.5%" style="align: right">
+                            <button name="act_test" id="survival" type="action" class="buttonVocation">
+                                <p class="alignLeft noPad" style="font-size: large; font-family: dicefontd8"><b>0</b></p>
+                            </button>
+                            <input class="calcBox" name="attr_input_skill_survival_level" type="boxed" style="width: 100%;"/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    
+    </div>
+
+    <div class="vocations">
+        <div class="mainTitle"> VOCATIONS: </div>
+        <div class="containerThird">
+            <div class="containerVocation RED">
+                <div class="vocationMain Purple">
+                    <div class="VocationSkillDescribtion flex">
+                        <p class="alignLeft noPad"><b>Vocation: </b></p>
+                        <input type="text" name="attr_input_vocation1_name"/>
+                    </div>
+                    <div class="VocationSkillType flex">
+                        <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                        <label class="clabl" style="width:22%;"><input type="radio" name="attr_radio_vocation1_type" value="STR" /><div style="text-align: center"> STR </div></label>
+                        <label class="clabl" style="width:22%;"><input type="radio" name="attr_radio_vocation1_type" value="REF" /><div style="text-align: center"> REF </div></label>
+                        <label class="clabl" style="width:22%;"><input type="radio" name="attr_radio_vocation1_type" value="INT" /><div style="text-align: center"> INT </div></label>
+                    </div>
+                    <div class="flex">
+                        <div class="skillSelect noPad">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl boxed" style="width:25%;"><input type="radio" name="attr_radio_vocation1_level" value="1" checked="checked"/><div> +1 </div></label>
+                            <label class="clabl boxed" style="width:25%;"><input type="radio" name="attr_radio_vocation1_level" value="2" /><div> +2 </div></label>
+                            <label class="clabl boxed" style="width:25%;"><input type="radio" name="attr_radio_vocation1_level" value="3" /><div> +3 </div></label>
+                            <label class="clabl boxed" style="width:25%;"><input type="radio" name="attr_radio_vocation1_level" value="4" /><div> +4 </div></label>
+                        </div>
+                        <div class="skillSum boxed" style="width: 37.5%" style="align: right">
+                            <button name="act_test" id="vocation1" type="action" class="buttonVocation">
+                                <p class="alignLeft noPad" style="font-size: large; font-family: dicefontd8"><b>0</b></p>
+                            </button>
+                            <input class="calcBox" name="attr_input_vocation1_value" type="boxed" style="width: 100%;"/>
+                        </div>
+                    </div>
+                </div>
+                <div class="containerVocationSkills BLUE">
+                    <div class="VocationSkill Green">
+                        <div class="VocationSkillDescribtion flex">
+                            
+                            <input type="text" name="attr_input_vocation1_skill1_name"/>
+                        </div>
+                        <div class="VocationSkillType flex">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation1_skill1_type" value="STR" /><div style="text-align: center"> STR </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation1_skill1_type" value="REF" /><div style="text-align: center"> REF </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation1_skill1_type" value="INT" /><div style="text-align: center"> INT </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation1_skill1_type" value="CBT" /><div style="text-align: center"> CBT </div></label>
+                        </div>
+                        
+                        <div class="skillVocationSelect noPad">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl boxed" style="width:12%;"><input type="radio" name="attr_radio_vocation1_skill1_level" value="0" checked="checked"/><div> 0 </div> </label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation1_skill1_level" value="1" /><div> +1 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation1_skill1_level" value="2" /><div> +2 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation1_skill1_level" value="3" /><div> +3 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation1_skill1_level" value="4" /><div> +4 </div></label>
+                        </div>
+                        
+                        <div class="flex">
+                            <div class="" style="width: 50%">
+                                <button name="act_test" id="vocation1_skill1" type="action" class="button">
+                                    <p class="alignLeft noPad" style="font-size: large; font-family: dicefontd8"><b>0</b></p>
+                                </button>
+                            </div>
+                            <div class="skillSum vocationskillresult">
+                                <input class="calcBox" type="boxed" style="width: 100%;"/>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="VocationSkill Green">
+                        <div class="VocationSkillDescribtion flex">
+                            
+                            <input type="text" name="attr_input_vocation1_skill2_name"/>
+                        </div>
+                        <div class="VocationSkillType flex">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation1_skill2_type" value="STR" /><div style="text-align: center"> STR </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation1_skill2_type" value="REF" /><div style="text-align: center"> REF </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation1_skill2_type" value="INT" /><div style="text-align: center"> INT </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation1_skill2_type" value="CBT" /><div style="text-align: center"> CBT </div></label>
+                        </div>
+                        <div class="skillVocationSelect noPad">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl boxed" style="width:10%;"><input type="radio" name="attr_radio_vocation1_skill2_level" value="0" checked="checked"/><div> 0 </div> </label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation1_skill2_level" value="1" /><div> +1 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation1_skill2_level" value="2" /><div> +2 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation1_skill2_level" value="3" /><div> +3 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation1_skill2_level" value="4" /><div> +4 </div></label>
+                        </div>
+                        <div class="flex">
+                            <div class="" style="width: 50%">
+                                <button name="act_test" id="vocation1_skill2" type="action" class="button">    
+                                    <p class="alignLeft noPad" style="font-size: large; font-family: dicefontd8"><b>0</b></p>
+                                </button>
+                            </div>
+                            <div class="skillSum vocationskillresult">
+                                <input class="calcBox" type="boxed" style="width: 100%;"/>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="VocationSkill Green">
+                        <div class="VocationSkillDescribtion flex">
+                            
+                            <input type="text" name="attr_input_vocation1_skill3_name"/>
+                        </div>
+                        <div class="VocationSkillType flex">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation1_skill3_type" value="STR" /><div style="text-align: center"> STR </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation1_skill3_type" value="REF" /><div style="text-align: center"> REF </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation1_skill3_type" value="INT" /><div style="text-align: center"> INT </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation1_skill3_type" value="CBT" /><div style="text-align: center"> CBT </div></label>
+                        </div>
+                        
+                        <div class="skillVocationSelect noPad">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl boxed" style="width:12%;"><input type="radio" name="attr_radio_vocation1_skill3_level" value="0" checked="checked"/><div> 0 </div> </label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation1_skill3_level" value="1" /><div> +1 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation1_skill3_level" value="2" /><div> +2 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation1_skill3_level" value="3" /><div> +3 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation1_skill3_level" value="4" /><div> +4 </div></label>
+                        </div>
+                        
+                        <div class="flex">
+                            <div class="" style="width: 50%">
+                                <button name="act_test" id="vocation1_skill3" type="action" class="button">
+                                    <p class="alignLeft noPad" style="font-size: large; font-family: dicefontd8"><b>0</b></p>
+                                </button>
+                            </div>
+                            <div class="skillSum vocationskillresult">
+                                <input class="calcBox" type="boxed" style="width: 100%;"/>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="VocationSkill Green">
+                        <div class="VocationSkillDescribtion flex">
+                            
+                            <input type="text" name="attr_input_vocation1_skill4_name"/>
+                        </div>
+                        <div class="VocationSkillType flex">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation1_skill4_type" value="STR" /><div style="text-align: center"> STR </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation1_skill4_type" value="REF" /><div style="text-align: center"> REF </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation1_skill4_type" value="INT" /><div style="text-align: center"> INT </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation1_skill4_type" value="CBT" /><div style="text-align: center"> CBT </div></label>
+                        </div>
+                    
+                        <div class="skillVocationSelect noPad">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl boxed" style="width:10%;"><input type="radio" name="attr_radio_vocation1_skill4_level" value="0" checked="checked"/><div> 0 </div> </label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation1_skill4_level" value="1" /><div> +1 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation1_skill4_level" value="2" /><div> +2 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation1_skill4_level" value="3" /><div> +3 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation1_skill4_level" value="4" /><div> +4 </div></label>
+                        </div>
+                        <div class="flex">
+                            <div class="" style="width: 50%">
+                                <button name="act_test" id="vocation1_skill4" type="action" class="button">
+                                    <p class="alignLeft noPad" style="font-size: large; font-family: dicefontd8"><b>0</b></p>
+                                </button>
+                            </div>
+                            <div class="skillSum vocationskillresult">
+                                <input class="calcBox" type="boxed" style="width: 100%;"/>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="containerVocation RED">
+                <div class="vocationMain Purple">
+                    <div class="VocationSkillDescribtion flex">
+                        <p class="alignLeft noPad"><b>Vocation: </b></p>
+                        <input type="text" name="attr_input_vocation2_name"/>
+                    </div>
+                    <div class="VocationSkillType flex">
+                        <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                        <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation2_type" value="STR" /><div style="text-align: center"> STR </div></label>
+                        <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation2_type" value="REF" /><div style="text-align: center"> REF </div></label>
+                        <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation2_type" value="INT" /><div style="text-align: center"> INT </div></label>
+                    </div>
+                    <div class="flex">
+                        <div class="skillSelect noPad">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl boxed" style="width:10%;"><input type="radio" name="attr_radio_vocation2_level" value="0" checked="checked"/><div> 0 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation2_level" value="1" /><div> +1 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation2_level" value="2" /><div> +2 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation2_level" value="3" /><div> +3 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation2_level" value="4" /><div> +4 </div></label>
+                        </div>
+                    
+                        <div class="skillSum boxed" style="width: 37.5%" style="align: right">
+                            <button name="act_test" id="vocation2" type="action" class="buttonVocation">
+                                <p class="alignLeft noPad" style="font-size: large; font-family: dicefontd8"><b>0</b></p>
+                            </button>
+                            <input class="calcBox" name="attr_input_vocation2_value" type="boxed" style="width: 100%;"/>
+                        </div>
+                    </div>
+                </div>
+                <div class="containerVocationSkills BLUE">
+                    <div class="VocationSkill Green">
+                        <div class="VocationSkillDescribtion flex">
+                            
+                            <input type="text" name="attr_input_vocation2_skill1_name"/>
+                        </div>
+                        <div class="VocationSkillType flex">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation2_skill1_type" value="STR" /><div style="text-align: center"> STR </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation2_skill1_type" value="REF" /><div style="text-align: center"> REF </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation2_skill1_type" value="INT" /><div style="text-align: center"> INT </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation2_skill1_type" value="CBT" /><div style="text-align: center"> CBT </div></label>
+                        </div>
+                    
+                        <div class="skillVocationSelect noPad">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl boxed" style="width:10%;"><input type="radio" name="attr_radio_vocation2_skill1_level" value="0" checked="checked"/><div> 0 </div> </label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation2_skill1_level" value="1" /><div> +1 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation2_skill1_level" value="2" /><div> +2 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation2_skill1_level" value="3" /><div> +3 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation2_skill1_level" value="4" /><div> +4 </div></label>
+                        </div>
+                        <div class="flex">
+                            <div class="" style="width: 50%">
+                                <button name="act_test" id="vocation2_skill1" type="action" class="button">
+                                    <p class="alignLeft noPad" style="font-size: large; font-family: dicefontd8"><b>0</b></p>
+                                </button>
+                            </div>
+                            <div class="skillSum vocationskillresult">
+                                <input class="calcBox" type="boxed" style="width: 100%;"/>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="VocationSkill Green">
+                        <div class="VocationSkillDescribtion flex">
+                            
+                            <input type="text"name="attr_input_vocation2_skill2_name"/>
+                        </div>
+                        <div class="VocationSkillType flex">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation2_skill2_type" value="STR" /><div style="text-align: center"> STR </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation2_skill2_type" value="REF" /><div style="text-align: center"> REF </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation2_skill2_type" value="INT" /><div style="text-align: center"> INT </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation2_skill2_type" value="CBT" /><div style="text-align: center"> CBT </div></label>
+                        </div>
+                    
+                        <div class="skillVocationSelect noPad">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl boxed" style="width:10%;"><input type="radio" name="attr_radio_vocation2_skill2_level" value="0" checked="checked"/><div> 0 </div> </label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation2_skill2_level" value="1" /><div> +1 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation2_skill2_level" value="2" /><div> +2 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation2_skill2_level" value="3" /><div> +3 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation2_skill2_level" value="4" /><div> +4 </div></label>
+                        </div>
+                        <div class="flex">
+                            <div class="" style="width: 50%">
+                                <button name="act_test" id="vocation2_skill2" type="action" class="button">
+                                    <p class="alignLeft noPad" style="font-size: large; font-family: dicefontd8"><b>0</b></p>
+                                </button>
+                            </div>
+                            <div class="skillSum vocationskillresult">
+                                <input class="calcBox" type="boxed" style="width: 100%;"/>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="VocationSkill Green">
+                        <div class="VocationSkillDescribtion flex">
+                            
+                            <input type="text"name="attr_input_vocation2_skill3_name"/>
+                        </div>
+                        <div class="VocationSkillType flex">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation2_skill3_type" value="STR" /><div style="text-align: center"> STR </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation2_skill3_type" value="REF" /><div style="text-align: center"> REF </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation2_skill3_type" value="INT" /><div style="text-align: center"> INT </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation2_skill3_type" value="CBT" /><div style="text-align: center"> CBT </div></label>
+                        </div>
+                    
+                        <div class="skillVocationSelect noPad">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl boxed" style="width:10%;"><input type="radio" name="attr_radio_vocation2_skill3_level" value="0" checked="checked"/><div> 0 </div> </label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation2_skill3_level" value="1" /><div> +1 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation2_skill3_level" value="2" /><div> +2 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation2_skill3_level" value="3" /><div> +3 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation2_skill3_level" value="4" /><div> +4 </div></label>
+                        </div>
+                        <div class="flex">
+                            <div class="" style="width: 50%">
+                                <button name="act_test" id="vocation2_skill3" type="action" class="button">
+                                    <p class="alignLeft noPad" style="font-size: large; font-family: dicefontd8"><b>0</b></p>
+                                </button>
+                            </div>
+                            <div class="skillSum vocationskillresult">
+                                <input class="calcBox" type="boxed" style="width: 100%;"/>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="VocationSkill Green">
+                        <div class="VocationSkillDescribtion flex">
+                            
+                            <input type="text"name="attr_input_vocation2_skill4_name"/>
+                        </div>
+                        <div class="VocationSkillType flex">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation2_skill4_type" value="STR" /><div style="text-align: center"> STR </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation2_skill4_type" value="REF" /><div style="text-align: center"> REF </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation2_skill4_type" value="INT" /><div style="text-align: center"> INT </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation2_skill4_type" value="CBT" /><div style="text-align: center"> CBT </div></label>
+                        </div>
+                    
+                        <div class="skillVocationSelect noPad">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl boxed" style="width:10%;"><input type="radio" name="attr_radio_vocation2_skill4_level" value="0" checked="checked"/><div> 0 </div> </label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation2_skill4_level" value="1" /><div> +1 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation2_skill4_level" value="2" /><div> +2 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation2_skill4_level" value="3" /><div> +3 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation2_skill4_level" value="4" /><div> +4 </div></label>
+                        </div>
+                        <div class="flex">
+                            <div class="" style="width: 50%">
+                                <button name="act_test" id="vocation2_skill4" type="action" class="button">
+                                    <p class="alignLeft noPad" style="font-size: large; font-family: dicefontd8"><b>0</b></p>
+                                </button>
+                            </div>
+                            <div class="skillSum vocationskillresult">
+                                <input class="calcBox" type="boxed" style="width: 100%;"/>
+                            </div>
+                        </div>
+                    </div>
+                
+                </div>
+            </div>
+            <div class="containerVocation RED">
+                <div class="vocationMain Purple">
+                    <div class="VocationSkillDescribtion flex">
+                        <p class="alignLeft noPad"><b>Vocation: </b></p>
+                        <input type="text" name="attr_input_vocation3_name"/>
+                    </div>
+                    <div class="VocationSkillType flex">
+                        <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                        <label class="clabl" style="width:22%;"><input type="radio" name="attr_radio_vocation3_type" value="STR" /><div style="text-align: center"> STR </div></label>
+                        <label class="clabl" style="width:22%;"><input type="radio" name="attr_radio_vocation3_type" value="REF" /><div style="text-align: center"> REF </div></label>
+                        <label class="clabl" style="width:22%;"><input type="radio" name="attr_radio_vocation3_type" value="INT" /><div style="text-align: center"> INT </div></label>
+                    </div>
+                    <div class="flex">
+                        <div class="skillSelect noPad">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl boxed" style="width:10%;"><input type="radio" name="attr_radio_vocation3_level" value="0" checked="checked"/><div> 0 </div> </label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation3_level" value="1" /><div> +1 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation3_level" value="2" /><div> +2 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation3_level" value="3" /><div> +3 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation3_level" value="4" /><div> +4 </div></label>
+                        </div>
+                        <div class="skillSum boxed" style="width: 37.5%" style="align: right">
+                            <button name="act_test" id="vocation3" type="action" class="buttonVocation">
+                                <p class="alignLeft noPad" style="font-size: large; font-family: dicefontd8"><b>0</b></p>
+                            </button>
+                            <input class="calcBox" name="attr_input_vocation3_value" type="boxed" style="width: 100%;"/>
+                        </div>
+                    </div>
+                </div>
+                <div class="containerVocationSkills BLUE">
+                    <div class="VocationSkill Green">
+                        <div class="VocationSkillDescribtion flex">
+                            
+                            <input type="text" name="attr_input_vocation3_skill1_name"/>
+                        </div>
+                        <div class="VocationSkillType flex">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation3_skill1_type" value="STR" /><div style="text-align: center"> STR </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation3_skill1_type" value="REF" /><div style="text-align: center"> REF </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation3_skill1_type" value="INT" /><div style="text-align: center"> INT </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation3_skill1_type" value="CBT" /><div style="text-align: center"> CBT </div></label>
+                        </div>
+                    
+                        <div class="skillVocationSelect noPad">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl boxed" style="width:10%;"><input type="radio" name="attr_radio_vocation3_skill1_level" value="0" checked="checked"/><div> 0 </div> </label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation3_skill1_level" value="1" /><div> +1 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation3_skill1_level" value="2" /><div> +2 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation3_skill1_level" value="3" /><div> +3 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation3_skill1_level" value="4" /><div> +4 </div></label>
+                        </div>
+                        <div class="flex">
+                            <div class="" style="width: 50%">
+                                <button name="act_test" id="vocation3_skill1" type="action" class="button">
+                                    <p class="alignLeft noPad" style="font-size: large; font-family: dicefontd8"><b>0</b></p>
+                                </button>
+                            </div>
+                            <div class="skillSum vocationskillresult">
+                                <input class="calcBox" type="boxed" style="width: 100%;"/>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="VocationSkill Green">
+                        <div class="VocationSkillDescribtion flex">
+                            
+                            <input type="text" name="attr_input_vocation3_skill2_name"/>
+                        </div>
+                        <div class="VocationSkillType flex">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation3_skill2_type" value="STR" /><div style="text-align: center"> STR </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation3_skill2_type" value="REF" /><div style="text-align: center"> REF </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation3_skill2_type" value="INT" /><div style="text-align: center"> INT </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation3_skill2_type" value="CBT" /><div style="text-align: center"> CBT </div></label>
+                        </div>
+                        
+                        <div class="skillVocationSelect noPad">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl boxed" style="width:10%;"><input type="radio" name="attr_radio_vocation3_skill2_level" value="0" checked="checked"/><div> 0 </div> </label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation3_skill2_level" value="1" /><div> +1 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation3_skill2_level" value="2" /><div> +2 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation3_skill2_level" value="3" /><div> +3 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation3_skill2_level" value="4" /><div> +4 </div></label>
+                        </div>
+                        <div class="flex">
+                            <div class="" style="width: 50%">
+                                <button name="act_test" id="vocation3_skill2" type="action" class="button">
+                                    <p class="alignLeft noPad" style="font-size: large; font-family: dicefontd8"><b>0</b></p>
+                                </button>
+                            </div>
+                            <div class="skillSum vocationskillresult">
+                                <input class="calcBox" type="boxed" style="width: 100%;"/>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="VocationSkill Green">
+                        <div class="VocationSkillDescribtion flex">
+                            
+                            <input type="text" name="attr_input_vocation3_skill3_name"/>
+                        </div>
+                        <div class="VocationSkillType flex">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation3_skill3_type" value="STR" /><div style="text-align: center"> STR </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation3_skill3_type" value="REF" /><div style="text-align: center"> REF </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation3_skill3_type" value="INT" /><div style="text-align: center"> INT </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation3_skill3_type" value="CBT" /><div style="text-align: center"> CBT </div></label>
+                        </div>
+                    
+                        <div class="skillVocationSelect noPad">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl boxed" style="width:10%;"><input type="radio" name="attr_radio_vocation3_skill3_level" value="0" checked="checked"/><div> 0 </div> </label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation3_skill3_level" value="1" /><div> +1 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation3_skill3_level" value="2" /><div> +2 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation3_skill3_level" value="3" /><div> +3 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation3_skill3_level" value="4" /><div> +4 </div></label>
+                        </div>
+                        <div class="flex">
+                            <div class="" style="width: 50%">
+                                <button name="act_test" id="vocation3_skill3" type="action" class="button">
+                                    <p class="alignLeft noPad" style="font-size: large; font-family: dicefontd8"><b>0</b></p>
+                                </button>
+                            </div>
+                            <div class="skillSum vocationskillresult">
+                                <input class="calcBox" type="boxed" style="width: 100%;"/>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="VocationSkill Green">
+                        <div class="VocationSkillDescribtion flex">
+                            
+                            <input type="text" name="attr_input_vocation3_skill4_name"/>
+                        </div>
+                        <div class="VocationSkillType flex">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation3_skill4_type" value="STR" /><div style="text-align: center"> STR </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation3_skill4_type" value="REF" /><div style="text-align: center"> REF </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation3_skill4_type" value="INT" /><div style="text-align: center"> INT </div></label>
+                            <label class="clabl" style="width:25%;"><input type="radio" name="attr_radio_vocation3_skill4_type" value="CBT" /><div style="text-align: center"> CBT </div></label>
+                        </div>
+                    
+                        <div class="skillVocationSelect noPad">
+                            <input name="attr_lock" class="toggle" type="checkbox" style="display: none"/>
+                            <label class="clabl boxed" style="width:10%;"><input type="radio" name="attr_radio_vocation3_skill4_level" value="0" checked="checked"/><div> 0 </div> </label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation3_skill4_level" value="1" /><div> +1 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation3_skill4_level" value="2" /><div> +2 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation3_skill4_level" value="3" /><div> +3 </div></label>
+                            <label class="clabl boxed" style="width:22%;"><input type="radio" name="attr_radio_vocation3_skill4_level" value="4" /><div> +4 </div></label>
+                        </div>
+                        <div class="flex">
+                            <div class="" style="width: 50%">
+                                <button name="act_test" id="vocation3_skill4" type="action" class="button">
+                                    <p class="alignLeft noPad" style="font-size: large; font-family: dicefontd8"><b>0</b></p>
+                                </button>
+                            </div>
+                            <div class="skillSum vocationskillresult">
+                                <input class="calcBox" type="boxed" style="width: 100%;"/>
+                            </div>
+                        </div>
+                    </div>
+                
+                </div>
+            </div>
+        
+        </div>
+    </div>
+    <div class="states">
+        <div class="mainTitle"> STATE: </div>
+        <div class="halved">
+            <div class="left">
+                <div class="injuries">
+                    <div class="padding">
+                        <p class=""><b>Injuries: </b></p>
+                        <div class="skillSelect noPad" style="width: 100%; display: flex; height: 20%">
+                            <label class="clabl boxed flex-grow"><input type="radio" name="attr_radio_injuries_level" value="0" checked="checked"/><div> 0 </div> </label>
+                            <label class="clabl boxed flex-grow"><input type="radio" name="attr_radio_injuries_level" value="1" /><div> 1 </div> </label>
+                            <label class="clabl boxed flex-grow"><input type="radio" name="attr_radio_injuries_level" value="2" /><div> 2 </div></label>
+                            <label class="clabl boxed flex-grow"><input type="radio" name="attr_radio_injuries_level" value="3" /><div> 3 </div></label>
+                            <label class="clabl boxed flex-grow"><input type="radio" name="attr_radio_injuries_level" value="4" /><div> 4 </div></label>
+                            <label class="clabl boxed flex-grow"><input type="radio" name="attr_radio_injuries_level" value="5" /><div> 5 </div></label>
+                            <label class="clabl boxed flex-grow"><input type="radio" name="attr_radio_injuries_level" value="6" /><div> 6 </div></label>
+                        </div>
+                        <div class="boxed auto">
+                            <p>When the level of injury exceeds your <b>BASE ROLL (3) + ATTRIBUTE POINTS</b>, you fall <b>unconscious.</b></p>
+                        </div>
+                    </div>
+                    <div class="padding">
+                        <p class=""><b>Lingering Injuries: </b></p>
+                        <div class="flex" >
+                            <div class="boxed" style="width: 50%"><p><b>Injury:</b></p></div>
+                            <div class="boxed" style="width: 50%"><p><b>Penalty:</b></p></div>
+                        </div>
+                        <div class="injuries" style="width: 100%">
+                            <fieldset class="repeating_injuries flex">
+                                <input type="text" name="attr_injuriy_name" value="Injury:">
+                                <input type="text" name="attr_injuriy_penalty" value="Penalty:">
+                            </fieldset>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="midright">
+                <div class="midrightMain">
+                    <div class="destiny">
+                        <div class="headline"><p><b>Destiny Points: </b></p></div>
+                        <div class="skillSelect noPad" style="width: 100%; display: flex">
+                            <label class="clabl boxed flex-grow"><input type="radio" name="attr_radio_destiny_throw" value="4" checked="checked"/><div> Disabled </div> </label>
+                            <label class="clabl boxed flex-grow"><input type="radio" name="attr_radio_destiny_throw" value="3" /><div> Enabled </div> </label>
+                        </div>
+                        <div class="skillSelect noPad" style="width: 100%; display: flex">
+                            <label class="clabl boxed flex-grow"><input type="radio" name="attr_radio_destiny_level" value="0" checked="checked"/><div> 0 </div> </label>
+                            <label class="clabl boxed flex-grow"><input type="radio" name="attr_radio_destiny_level" value="1" /><div> 1 </div> </label>
+                            <label class="clabl boxed flex-grow"><input type="radio" name="attr_radio_destiny_level" value="2" /><div> 2 </div></label>
+                            <label class="clabl boxed flex-grow"><input type="radio" name="attr_radio_destiny_level" value="3" /><div> 3 </div></label>
+                            <label class="clabl boxed flex-grow"><input type="radio" name="attr_radio_destiny_level" value="4" /><div> 4 </div></label>
+                            <label class="clabl boxed flex-grow"><input type="radio" name="attr_radio_destiny_level" value="5" /><div> 5 </div></label>
+                        </div>
+                    </div>
+                    <div class="commerce">
+                        <div class="headline"><p><b>Commerce & Wealth Points: </b></p></div>
+                        <div class="skillSelect noPad" style="width: 100%; display: flex">
+                            <label class="clabl boxed flex-grow"><input type="radio" name="attr_radio_commerce_level" value="0" checked="checked"/><div> 0 </div> </label>
+                            <label class="clabl boxed flex-grow"><input type="radio" name="attr_radio_commerce_level" value="1" /><div> 1 </div> </label>
+                            <label class="clabl boxed flex-grow"><input type="radio" name="attr_radio_commerce_level" value="2" /><div> 2 </div></label>
+                            <label class="clabl boxed flex-grow"><input type="radio" name="attr_radio_commerce_level" value="3" /><div> 3 </div></label>
+                            <label class="clabl boxed flex-grow"><input type="radio" name="attr_radio_commerce_level" value="4" /><div> 4 </div></label>
+                            <label class="clabl boxed flex-grow"><input type="radio" name="attr_radio_commerce_level" value="5" /><div> 5 </div></label>
+                            <label class="clabl boxed flex-grow"><input type="radio" name="attr_radio_commerce_level" value="6" /><div> 6 </div></label>
+                            <label class="clabl boxed flex-grow"><input type="radio" name="attr_radio_commerce_level" value="7" /><div> 7 </div></label>
+                            <label class="clabl boxed flex-grow"><input type="radio" name="attr_radio_commerce_level" value="8" /><div> 8 </div></label>
+                        </div>
+                        <div class="skillSelect noPad" style="width: 100%; display: flex">
+                            <label class="clabl boxed flex-grow"><input type="radio" name="attr_radio_wealth_level" value="0" checked="checked"/><div> 0 </div> </label>
+                            <label class="clabl boxed flex-grow"><input type="radio" name="attr_radio_wealth_level" value="1" /><div> 1 </div> </label>
+                            <label class="clabl boxed flex-grow"><input type="radio" name="attr_radio_wealth_level" value="2" /><div> 2 </div></label>
+                            <label class="clabl boxed flex-grow"><input type="radio" name="attr_radio_wealth_level" value="3" /><div> 3 </div></label>
+                            <label class="clabl boxed flex-grow"><input type="radio" name="attr_radio_wealth_level" value="4" /><div> 4 </div></label>
+                            <label class="clabl boxed flex-grow"><input type="radio" name="attr_radio_wealth_level" value="5" /><div> 5 </div></label>
+                            <label class="clabl boxed flex-grow"><input type="radio" name="attr_radio_wealth_level" value="6" /><div> 6 </div></label>
+                            <label class="clabl boxed flex-grow"><input type="radio" name="attr_radio_wealth_level" value="7" /><div> 7 </div></label>
+                            <label class="clabl boxed flex-grow"><input type="radio" name="attr_radio_wealth_level" value="8" /><div> 8 </div></label>
+                        </div>
+                    </div>
+                </div>
+                <div class="equipment">
+                    <div class="padding">
+                        <p class=""><b>Inventory and Equipment: </b></p>
+                        <div class="flex" >
+                            <div class="boxed" style="width: 35%"><p><b>Name:</b></p></div>
+                            <div class="boxed" style="width: 20%"><p><b>Place:</b></p></div>
+                            <div class="boxed" style="width: 45%"><p><b>Description:</b></p></div>
+                        </div>
+                        <div style="width: 100%;">
+                            <fieldset class="repeating_equipment flex" style="width: auto">
+                                <input type="text" name="attr_item_name" value="Name:" style="width: 35%">
+                                <select name="attr_item_location" style="width: 20%">
+                                  <option value="0" selected="selected">Body</option>
+                                  <option value="1">Backpack</option>
+                                  <option value="2">Stached</option>
+                                </select>
+                                <input type="text" name="attr_item_description" value="Description:" style="width: 45%">
+                            </fieldset>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="footnotes">
+        <div class="mainTitle">FOOTNOTES:</div>
+        <div class="Basics">
+            <p>This Charactersheet is in beta phase, the auto calc fields are missing and some designwork isn't finished. <br><b>This sheet should be in a playable state tho!</b></p>
+        </div>
+</div>
+<script type="text/worker">
+    //-------------------------------------------------------------------------------------
+// orcsAsync
+// Compensates for a defect in the underlying Roll20 system, where it "loses context"
+// (forgets which player is active) during asynchronous methods and callbacks, 
+// resulting in error messages like:
+//
+//      Error: Trying to do getAttrs when no character is active in sandbox.
+//
+// Include this script at the top of your character sheet's code setion to have 
+// setTimeout() and setInterval() just start working as expected; no additional setup
+// required.  Additionally, async-safe versions of the typical attribute functions will 
+// be available:
+//
+//      getAttrsAsync
+//      setAttrsAsync
+//      getSectionIDsAsync
+//      
+function isRunningOnServer() { return self.dispatchEvent == undefined; }
+function setActiveCharacterId(charId){
+    var oldAcid=getActiveCharacterId();
+    var msg={"id":"0", "type":"setActiveCharacter", "data":charId};
+    
+    if(isRunningOnServer()==false){ //if in a browser, use "dispatchEvent" to process the message
+        var ev = new CustomEvent("message");
+        ev.data=msg; 
+        self.dispatchEvent(ev);
+    }else{ //otherwise, use the API (server) message processor, "onmessage"
+        self.onmessage({data:msg});
+    }
+    return oldAcid; //return what the value used to be, so calling code can be a little cleaner 
+} 
+var _sIn=setInterval;
+setInterval=function(callback, timeout){
+    var acid=getActiveCharacterId();
+    _sIn(
+        function(){
+            var prevAcid=setActiveCharacterId(acid);
+            callback();
+            setActiveCharacterId(prevAcid);
+        }
+    ,timeout);
+}
+var _sto=setTimeout
+setTimeout=function(callback, timeout){
+    var acid=getActiveCharacterId();
+    _sto(
+        function(){
+            var prevAcid=setActiveCharacterId(acid);
+            callback();
+            setActiveCharacterId(prevAcid);
+        }
+    ,timeout);
+}
+function getAttrsAsync(props){
+    var acid=getActiveCharacterId(); //save the current activeCharacterID in case it has changed when the promise runs 
+    var prevAcid=null;               //local variable defined here, because it needs to be shared across the promise callbacks defined below
+    return new Promise((resolve,reject)=>{
+            prevAcid=setActiveCharacterId(acid);  //in case the activeCharacterId has changed, restore it to what we were expecting and save the current value to restore later
+            try{
+                getAttrs(props,(values)=>{  resolve(values); }); 
+            }
+            catch{ reject(); }
+    }).finally(()=>{
+        setActiveCharacterId(prevAcid); //restore activeCharcterId to what it was when the promise first ran
+    });
+}
+//use the same pattern for each of the following...
+function setAttrsAsync(propObj, options){
+    var acid=getActiveCharacterId(); 
+    var prevAcid=null;               
+    return new Promise((resolve,reject)=>{
+            prevAcid=setActiveCharacterId(acid);  
+            try{
+                setAttrs(propObj,options,(values)=>{ resolve(values); });
+            }
+            catch{ reject(); }
+    }).finally(()=>{
+        setActiveCharacterId(prevAcid); 
+    });
+}
+
+function getSectionIDsAsync(sectionName){
+    var acid = getActiveCharacterId(); 
+    var prevAcid=null;               
+    return new Promise((resolve,reject)=>{
+            prevAcid = setActiveCharacterId(acid);  
+            try{
+                getSectionIDs(sectionName,(values)=>{ resolve(values); });
+            }
+            catch{ reject(); }
+    }).finally(()=>{
+        setActiveCharacterId(prevAcid); 
+    });
+}
+
+//------------------------------------------------------------------------------------------------
+// orcsCharacter
+// The core class for the orcsCharacter script.  All other classes are instantiated 
+// via this object, or off of objects instantiated from this object.
+class orcsCharacter{
+    // We use create() instead of "new" since we use this as a Proxy.
+    //      var pc = orcsCharacter.create();
+    static create() {
+        var char = new orcsCharacter();  //create a new character object
+        char.preferNumeric = true;
+        char.proxy = new Proxy(char, orcsCharacter.#attrHandler); //wrap it in a proxy
+        return char.proxy;
+    }
+    _enforceDataType(val) {
+        if (!this.preferNumeric) return val;
+        var num = +val;
+        if (val == null || val == undefined) return 0; 
+        if (isNaN(num)) return val;
+        return num;
+    }
+    //a simple helper, to get the value of a single attribute 
+    static _getSingleAttrAsync(prop) {
+        var acid = getActiveCharacterId();
+        var prevAcid = null;
+        return new Promise((resolve, reject) => {
+            prevAcid = setActiveCharacterId(acid);
+            try {
+                getAttrs([prop], (values) => { resolve(values[prop]); });
+            }
+            catch { reject(); }
+        }).finally(() => {
+            setActiveCharacterId(prevAcid);
+        });
+    }
+
+    static #attrHandler = {
+        get: (obj, prop)=>{
+            switch(prop){
+                case "cacheAsync": //a method to create a cached attribute object
+                    return (attributes) => { return orcsAttributeCache.createAsync(obj, attributes); };
+                case "getEmptyCache": //a method to create an empty cached attribute object
+                    return () => { return orcsAttributeCache.create(); };
+                case "getRepeatingAsync":  //a method to create a repeating section object
+                    return async (sectionName) => {
+                        return orcsRepeatingSection.createAsync(obj, sectionName);
+                    };
+                case "cacheRepeatingAsync": //a method to create a cached repeating section object
+                    return async (sectionName, attributes) => {
+                        var rsc = await orcsRepeatingSectionCache.createAsync(obj,sectionName);
+                        await rsc.cacheAsync(attributes);
+                        return rsc;
+                    };
+                case "cacheMultipleAsync": return async (attributes, sectionsRequestObject) => { return await orcsMultiCacheController.createAsync(obj, attributes, sectionsRequestObject); };
+                case "preferNumeric": return (flag)=>{ obj.preferNumeric = flag; };
+                //TODO needs test case
+                case "getRowFromEvent": //a method to lookup the passed in entry of a repeating section, from an event handler
+                    return (eventInfo)=>{
+                        var matches=eventInfo.sourceAttribute.match("repeating_([^_]*)_(.{20})_");
+                        return orcsRepeatingSection.createRowProxy(matches[2], matches[1]);
+                    };
+            } 
+            return orcsCharacter._getSingleAttrAsync(prop).then(val => {return obj._enforceDataType(val);});
+        },
+        set: async (obj, prop, value) => {
+            prop = await Promise.resolve(prop); //if a user passed in a promise, resolve it first (Promise.resolve, returns a Promise, regardless of if it is or not)
+            var json='{"'+prop+'":"'+value.toString().replaceAll(/"/gi,'\\"')+'"}';
+            return setAttrsAsync(JSON.parse(json));
+        }
+    };
+}class orcsAttributeCache{
+    _cache = { _isDirty: {} };
+    _parent;
+    _attributes;
+    _proxy;
+    static create(parent){
+        var retval = new orcsAttributeCache();
+        retval._parent = parent;
+        retval._proxy = new Proxy(retval, orcsAttributeCache.#attrHandler);
+        return retval._proxy;
+    }
+    static async createAsync(parent, attributes) {
+        var obj = new orcsAttributeCache();
+        obj._parent = parent;
+        obj._attributes = attributes;
+        var retval = new Proxy(obj, orcsAttributeCache.#attrHandler);
+        await obj.cacheAttrsAsync(attributes);
+        return retval;
+    }
+    async cacheAttrsAsync(attributes) {
+        //preload any initial values that were provided
+        if (attributes == null) return;
+        var atrbList = this.getAttributeRequestList();
+        
+        atrbList = `[${atrbList}]`;
+        var values = await getAttrsAsync(JSON.parse(atrbList));
+
+        this.hydrateResponse(attributes, values);
+    }
+    
+    getAttributeRequestList(attributes) {
+        if (attributes == null) attributes = this._attributes;
+        var atrbList = "";
+        attributes.forEach(attrib => {
+            if (atrbList != "") atrbList = atrbList + ",";
+            atrbList = atrbList + `"${attrib}"`;
+        });
+        return atrbList;
+    }
+    hydrateResponse(attributes, response) {
+        for (var attribute of attributes) {
+            var val = response[attribute];
+            if (val != null) this._proxy[attribute] = val;    
+        } 
+        this.clean();
+    }
+    getCommitJson() {
+        var json="";
+
+        for(var prop in this._cache._isDirty){
+            if (this._cache._isDirty[prop] != true) continue;
+            if(json!="") json+=",";
+            json+=('"'+prop+'":"'+this._cache[prop].toString().replaceAll(/"/gi,'\\"')+'"');
+        }
+        return JSON.parse("{" + json + "}");
+    }
+    clean() {
+        this._cache._isDirty = {};
+    }
+    commitAsync() {
+        var commitJson = this.getCommitJson();
+        this.clean();
+        return setAttrsAsync(json);
+    }
+    static #attrHandler = {
+        get: (obj, prop)=>{
+            switch(prop){  
+                case "getProxyTarget": return () => { return obj; };
+                case "commitAsync": return () => { obj.commitAsync(); };
+                case "clean": return () => { obj.clean(); }
+                //case "cacheAttrsAsync":
+                  //  return (attributes) => {
+                    //    return orcsAttributeCache.cacheAttrsAsync(obj, attributes);
+                    //}
+                case "getAttributeRequestList": return (attrs) => { return obj.getAttributeRequestList(attrs); }
+                case "getCommitJson": return () => { return obj.getCommitJson(); };
+            }
+            return obj._parent._enforceDataType(obj._cache[prop]);
+        },
+        set: (obj, prop, value) => {
+            obj._cache[prop] = value;
+            obj._cache._isDirty[prop] = true;
+            return value;
+        }
+    };
+}
+class orcsRepeatingSection extends Array{
+    _parent = null;
+    _sectionName = "";
+
+    static async createAsync(characterObj, sectionName) {
+        var retval = new orcsRepeatingSection();
+        retval._parent = characterObj;
+        retval._sectionName = sectionName;
+        await retval.hydrateAsync();
+        return retval;
+    }
+
+    createRowProxy(rowId) {
+        if (rowId == null) rowId = generateRowID();
+        return orcsRepeatingSectionRow.create(this, rowId);
+    }
+    addNew(attribs) {
+        var newRow = this.createRowProxy();
+        if(attribs==null) attribs={};
+        for (var prop in attribs) newRow[prop]=attribs[prop];
+        return newRow;
+    };
+    async hydrateAsync() {
+        var rowIds = await getSectionIDsAsync(this._key);
+        for(var rowId of rowIds){
+            this.push(this.createRowProxy(rowId));
+        }
+    }
+    get _key() { return `repeating_${this._sectionName}`; }
+    get _rootCharacterObj() { return this._parent; }
+
+ /*           //TODO...  Need a test case for this...
+            if (section == "eventRow") {
+                return (eventInfo)=>{
+                    var matches=eventInfo.sourceAttribute.match("repeating_([^_]*)_(.{20})_");
+                    return orcsRepeatingSection.createRowProxy(obj._charObj, matches[2], matches[1]);
+                };
+            };
+
+            
+        }
+    };*/
+}class orcsRepeatingSectionRow{
+    _parent;
+    _rowId;    
+    
+    static create(repeatingSection,rowId) {
+        var retval = new orcsRepeatingSectionRow();
+        retval._rowId  = rowId;
+        retval._parent = repeatingSection;
+        return new Proxy(retval, orcsRepeatingSectionRow.#repeatingSectionRowHandler);
+    }
+    static #repeatingSectionRowHandler={
+        get: (obj,prop)=>{
+            switch (prop) {
+                case "delete": return () => { removeRepeatingRow(obj._key) };
+                case "_rowId": return obj._rowId;
+            }
+            return obj._rootCharacterObj.proxy[obj._propKey(prop)].then(val => { 
+                return obj._rootCharacterObj._enforceDataType(val);
+            }); 
+        },
+        set: async (obj, prop, value) => {
+            return obj._rootCharacterObj.proxy[obj._propKey(prop)] = value;
+        }
+    };
+  
+    get _rootCharacterObj() {
+        return this._parent._parent;
+    }
+    get _key() {
+        return this._parent._key+"_"+this._rowId;
+    }
+    _propKey(prop) {
+        return this._parent._key+"_"+this._rowId+"_"+prop;
+    }
+}class orcsRepeatingSectionCache extends Array{
+    _parent = null;
+    _sectionName = "";
+
+    static create(characterObj, sectionName) {
+        var retval = new orcsRepeatingSectionCache();
+        retval._parent = characterObj;
+        retval._sectionName = sectionName;
+        return retval;
+    }
+    static async createAsync(characterObj, sectionName) {
+        var retval = new orcsRepeatingSectionCache();
+        retval._parent = characterObj;
+        retval._sectionName = sectionName;
+        await retval.initializeAsync();
+        return retval;
+    }
+    //initialization equates to: 1) retrieving a list of row IDs, and 2) populating the list of row proxies, one for each row ID
+    async initializeAsync() {
+        var rowIds = await getSectionIDsAsync(this._key);
+        for (var rowId of rowIds)
+            this.push(this.createRowProxy(rowId));  
+    }
+    createRowProxy(rowId) {
+        if (rowId == null) rowId = generateRowID();  //if no rowID is supplied, then assume this is a new row
+        return orcsRepeatingSectionRowCache.create(this, rowId); 
+    }
+    
+    addNew(attribsAndValues) {
+        var newRow = this.createRowProxy();
+        if(attribsAndValues==null) attribsAndValues={};
+        for (var prop in attribsAndValues) 
+            newRow[prop] = attribsAndValues[prop]; //set these rows individually, the values will be marked dirty and included in the next commit
+        
+        this.push(newRow);
+        return newRow;
+    };
+    async commitAsync() {
+        var json = this.getCommitJson();
+        this.commitDeletedRows();
+        this.cleanAll();
+        return setAttrsAsync(json);
+    }
+    commitDeletedRows() {
+        this.map(i=>i).forEach(row => {  
+            if (row._isDeleted) {
+                removeRepeatingRow(row.getProxyTarget()._key);
+                this.splice(this.indexOf(row), 1);  //remove it from the underlying array too
+            }
+        });
+    }
+    //set all fields on all rows as clean, so they will not be generated on the next commit
+    cleanAll() {
+        this.forEach(row => row.clean());
+    }
+    //returns a json object of the field/values which are dirty and need to be updated
+    getCommitJson() {
+        var json = {};
+        //this.map(i=>i).forEach(row => {  
+        this.forEach(row => {  
+            json = { ...json, ...row.getProxyTarget().getCommitJson() };
+        }); 
+        return json;
+    }
+    //given a list of attributes, this function returns a string list key pointers to those values, in the format expected by getAttrs...
+    getAttributeRequestList(attributes) {
+        var atrbList = "";
+        this.forEach(row => {
+            attributes.forEach(attrib => {
+                if (atrbList != "") atrbList = atrbList + ",";
+                atrbList = atrbList + `"${row.getProxyTarget()._propKey(attrib)}"`;
+            });
+        });
+        return atrbList;
+    }
+    //given a list of attribute names and a response from getAttrs, this function will pick the appropriate values
+    //from the response which make sense for this section, assign them to the correct rows, and ignore the rest
+    hydrateResponse(attributes, response) {
+        this.forEach(row => {
+            attributes.forEach(attrib => {
+                row.getProxyTarget()._cache[attrib] = response[row.getProxyTarget()._propKey(attrib)];
+            });
+            row.clean();
+        });
+    }
+    //give a list of attribute names, this function will retrieve the values of those attributes for all rows and assign 
+    //them accordingly
+    async cacheAsync(attributes) {
+        var atrbList = this.getAttributeRequestList(attributes);
+        atrbList = `[${atrbList}]`;
+        var values = await getAttrsAsync(JSON.parse(atrbList));
+        this.hydrateResponse(attributes,values);
+    }
+    get _key() { return `repeating_${this._sectionName}`; }
+    get _rootCharacterObj() {
+        return this._parent;
+    }   
+}
+class orcsRepeatingSectionRowCache{
+    _parent;    //the parent object is the orcsRepeatingSectionCache
+    _rowId;     //the unique identifier for this row
+    _cache = {};//the cached values
+    _isDirty = {};//we track the values that have been changed
+    _isDeleted = false; //has this row been marked for deletion
+    _proxy = null;  //the proxy which is exposed to users
+
+    static create(parent,rowId) {
+        var retval = new orcsRepeatingSectionRowCache();
+        retval._rowId  = rowId;
+        retval._parent = parent;
+        retval._proxy = retval;
+        return new Proxy(retval, orcsRepeatingSectionRowCache.#repeatingSectionRowCacheHandler);
+    }
+    getCommitJson() {
+        if (this._isDeleted == true) return "";
+        var json = "";
+        for (var attrb in this._cache) {
+            if (this._isDirty[attrb] != true) continue;
+            if (json != "") json += ",";
+            json += ('"' + this._propKey(attrb) + '":"' + this._cache[attrb].toString().replaceAll(/"/gi, '\\"') + '"');
+        }
+        return JSON.parse('{' + json + '}');
+    }
+    clean() {
+        //for (var attrb in obj._cache) obj._isDirty[attrb] = false;
+        this._isDirty = [];
+    }
+    static #repeatingSectionRowCacheHandler={
+        get:(obj,prop)=>{
+
+            switch (prop) {
+                case "getProxyTarget": return () => { return obj; };
+                case "_rowId": return obj._rowId;
+                case "_isDeleted": return obj._isDeleted;
+                case "clean": return () => { return obj.clean() };
+                case "delete": return () => { obj._isDeleted = true; };
+                case "undelete": return ()=>{obj._isDeleted=false;};
+            }
+            return obj._rootCharacterObj._enforceDataType(obj._cache[prop]);
+        },
+        set: (obj, prop, value) => {
+            obj._isDirty[prop] = true;
+            return obj._cache[prop] = value;
+        }
+    }
+    get _rootCharacterObj() { return this._parent._parent; }
+    get _key() { return this._parent._key + "_" + this._rowId; }
+    _propKey(prop) { return this._key+"_"+prop; }
+}
+//-----------------------------------------------------------------------------
+//orcsMultiCacheController 
+//Optimizes loading and saving attributes by combining the gets and sets of 
+//basic attributes and repeating sections
+class orcsMultiCacheController {
+    attributes = null;  //an orcsAttributeCache object
+    sections = {};      //on object of named orcsRepeatingSectionCache objects
+    _parent = {};       //the parent object, typically the root orcsCharacter object
+    _attributeNames = [];   //an array of attribute names which this object is meant to cache
+    _sectionsRequestObject = {}; //an object of named repeating sections and arrays of the attributes to cache
+    
+    static async createAsync(characterObj, attributeNames, sectionsRequestObject) {
+        //if the user asked for repeating sections, but not a list of attributes...
+        if (sectionsRequestObject == null && typeof attributeNames == "object" && Array.isArray(attributeNames) == false) { 
+            sectionsRequestObject = attributeNames;
+            attributeNames = [];
+        }
+        var retval = new orcsMultiCacheController();
+        retval._parent = characterObj;
+        retval._attributeNames = attributeNames;
+        retval._sectionsRequestObject = sectionsRequestObject;
+        await retval.hydrateAsync();
+        return retval;
+    }
+  
+    //create empty versions of all the cached objects which have been requested, then populate them from a single attribute request 
+    async hydrateAsync() {
+        this.attributes = orcsAttributeCache.create(this._parent); //empty attributes object
+    
+        //for repeating sections, we pull in the sectionIDs for existing rows, per section
+        //since we don't have an option to do multiple sections in a single call, we'll kick them all off together, running in parallel
+        var promises = [];
+        for (var sectionName in this._sectionsRequestObject) {
+            var section = orcsRepeatingSectionCache.create(this._parent, sectionName); //create an empty cached repeating section object
+            this.sections[sectionName] = section; 
+            promises.push(section.initializeAsync()); //initialize it with row ids.  Note we do NOT await, but let all run concurrently
+        }
+        await Promise.all(promises); //now we wait until all the parallel async calls return
+
+        //make a single call and get all values (base attributes and repeating section values) at once...
+        var values = await getAttrsAsync(JSON.parse("[" + this.getAttributeRequestList() + "]"));
+        
+        //pull all returned attribute values into their coresponding objects
+        this.attributes.getProxyTarget().hydrateResponse(this._attributeNames, values); //character attributes
+        for (var sectionName in this.sections) {
+            this.sections[sectionName].hydrateResponse(this._sectionsRequestObject[sectionName], values); //repeating sections
+        }
+    }
+    //return a list of attributes required to populate/hydrate cached attributes and repeating sections
+    getAttributeRequestList() {
+        var list = this.attributes.getAttributeRequestList(this._attributeNames);
+        
+        for (var sectionName in this._sectionsRequestObject) {
+            var section = this.sections[sectionName];
+            if (list != "") list = list + ",";
+            list = list + section.getAttributeRequestList(this._sectionsRequestObject[sectionName]);
+        };
+        return list;
+    }
+    //get all the JSON from all the objects and munge it together, then commit it at one time
+    async commitAsync() {
+        var json = this.attributes.getCommitJson();
+
+        for (var sectionName in this.sections) {
+            var section = this.sections[sectionName];
+            section.commitDeletedRows();
+            json = { ...json, ...section.getCommitJson() }; 
+            section.cleanAll();
+        }
+        return setAttrsAsync(json); 
+    }
+}var pc=orcsCharacter.create();
+    
+
+on("change:radio_injuries_level", async (eventInfo)=> {
+    console.log(eventInfo);
+    
+    if (eventInfo.newValue == "0") return
+    let starred = "";
+    // 
+    const skillBase = ["radio_strength","radio_reflex","radio_intelligence"];
+    const baseDie = 3;
+    const attributesLevel = await getAttrsAsync(skillBase);
+    const attributeLevel = Object.values(attributesLevel).reduce((a, b) => parseInt(a) + parseInt(b), 0);
+
+
+    let skillName = "Injury";
+    const injuryLevel = parseInt(eventInfo.newValue);
+    
+    const skillThreshholdArray = await getAttrsAsync(["radio_destiny_throw", "radio_destiny_level"]);
+    let skillThreshhold= skillThreshholdArray["radio_destiny_throw"];
+    const skillDestinyLevel = skillThreshholdArray["radio_destiny_level"];
+    
+    // if Destiny Throw active = Threashold lowerded from 4 to 3
+    if (skillThreshhold == 3) {
+        // if destiny levels are too low to use
+        if (skillDestinyLevel < 1) {
+            skillThreshhold = 4;
+        }else{
+            starred = "S";
+        }       
+    }
+    
+
+    
+    const rollRequest = `\
+@{gmRoll}\
+&{template:injury}\
+{{name=[[0]]}}\
+{{gooddie=[[0]]}}\
+{{baddie=[[0]]}}\
+{{roll1=[[\
+[[\
+[[${baseDie}]] +\
+[[${attributeLevel}]]\
+]]d6>\
+${skillThreshhold}\
+-${injuryLevel}\
+]]\
+}}\
+{{challangedie=[[0]]}}\
+{{starred=[[0]]}}`;
+    
+    console.log(rollRequest);
+    
+    startRoll(rollRequest, (rollObject) => {
+        console.log(rollObject);
+        
+        
+        let goodDie = "";
+        let badDie = "";
+        const rollsArray = rollObject.results.roll1.dice;
+        rollsArray.forEach((item) => {
+            if (item>=skillThreshhold){
+                let encode = encodeRoll(item);
+                goodDie += encode;
+            }else{
+                let encode = encodeRoll(item);
+                badDie += encode;
+            }            
+        });
+        let challangedie = "ERROR";
+        
+        console.log(rollsArray);
+        console.log(goodDie);
+        console.log(badDie);
+        
+        if (injuryLevel>0){
+            
+            let dieDiff = injuryLevel - goodDie.length;
+            console.log(dieDiff);
+            
+            challangedie = goodDie.substring(goodDie.length-injuryLevel, goodDie.length);
+            goodDie = goodDie.substring(0, goodDie.length-injuryLevel);
+            
+            
+            if (dieDiff>0){
+                challangedie += "@".repeat(dieDiff);
+            }
+            console.log(goodDie);
+            console.log(challangedie);
+        }
+        
+
+
+        
+        
+        const wins = goodDie.length - injuryLevel;
+        // if Destiny Throw aktive                 // lower destiny level if threashold is a o k    
+        if (skillThreshhold == 3){
+                setAttrs({"radio_destiny_level": skillDestinyLevel-1});  
+        }
+        
+        finishRoll(
+            rollObject.rollId,
+            {
+                name: skillName,
+                challangelevel: injuryLevel,
+                gooddie: goodDie,
+                baddie: badDie,
+                wins: wins,
+                challangedie: challangedie,
+                starred: starred
+            }
+        );
+        
+    });   
+});
+
+
+// ############################################
+on("change:radio_endurance_level change:radio_athletics_level change:radio_grip_level change:radio_swim_level change:radio_throw_level change:radio_perception_level change:radio_acrobatics_level change:radio_ride_pilot_level change:radio_sleight_of_hand_level change:radio_stealth_level change:radio_general_knowledge_level change:radio_deception_level change:radio_infiltration_level change:radio_persuasion_level change:radio_survival_level", async (eventInfo)=>{
+    // Get all Info 
+    console.log(eventInfo);
+    
+    let targetAttr = "error";
+    switch(eventInfo.sourceAttribute) {
+        case "radio_endurance_level":
+        case "radio_athletics_level":
+        case "radio_grip_level":
+        case "radio_swim_level":
+        case "radio_throw_level":
+            targetAttr = "strength";
+            break;
+        case "radio_perception_level":
+        case "radio_acrobatics_level":
+        case "radio_ride_pilot_level":
+        case "radio_sleight_of_hand_level":
+        case "radio_stealth_level":
+            targetAttr = "reflex";
+            break;
+        case "radio_general_knowledge_level":
+        case "radio_deception_level":
+        case "radio_infiltration_level":
+        case "radio_persuasion_level":
+        case "radio_survival_level":
+            targetAttr = "intelligence";
+            break;
+    }
+    //attr_radio_strength
+    console.log(targetAttr);
+    let baseAttr = await getAttrsAsync(["radio_"+targetAttr]);
+    console.log(baseAttr);
+    
+    
+    
+    // attr_input_skill_endurance
+    let target = eventInfo.sourceAttribute.replace("radio_","input_skill_")
+    console.log(target);
+
+    console.log(parseInt(eventInfo.newValue));
+    console.log(parseInt(baseAttr["radio_"+targetAttr]));
+    let value = parseInt(baseAttr["radio_"+targetAttr]) + parseInt(eventInfo.newValue);
+    console.log(value);
+    let setObject = {};
+    setObject[target] = value;
+    console.log(setObject);
+    await setAttrsAsync(setObject);
+    
+    
+});
+
+on("clicked:test", async (event)=>{
+    console.log(event);
+    
+    //  // constants 
+    // 
+    let starred = "";
+    const baseDie = 3;
+    /*
+        Base 3 + Associated Attribute + Skill Level + Assist - Challange Level         
+    */
+    
+    // get Name of targeted VocationSkill 
+    // get all ascociated Attribute Values 
+    //
+    console.log(event.htmlAttributes.id);
+    const skillLevelArray = await getAttrsAsync(["radio_"+event.htmlAttributes.id+"_level"]);
+    const skillLevel = skillLevelArray["radio_"+event.htmlAttributes.id+"_level"];
+    const skillTypeArray = await getAttrsAsync(["radio_"+event.htmlAttributes.id+"_type"]);
+    const skillType = skillTypeArray["radio_"+event.htmlAttributes.id+"_type"];
+    let skillBase = ["radio_strength","radio_reflex","radio_intelligence"];
+    const skillNameArray = await getAttrsAsync(["input_"+event.htmlAttributes.id+"_name"]);
+    let skillName = skillNameArray["input_"+event.htmlAttributes.id+"_name"];
+    if (skillName === undefined) {skillName = event.htmlAttributes.id.toUpperCase()}
+    
+    const skillThreshholdArray = await getAttrsAsync(["radio_destiny_throw", "radio_destiny_level"]);
+    let skillThreshhold= skillThreshholdArray["radio_destiny_throw"];
+    const skillDestinyLevel = skillThreshholdArray["radio_destiny_level"];
+    
+    // if Destiny Throw aktive = Threashold lowerded from 4 to 3
+    if (skillThreshhold == 3){
+        // if destiny levels are too low to use
+        if (skillDestinyLevel < 1) {
+            skillThreshhold = 4;
+        }else{
+            starred = "S";
+        }        
+    }
+    
+    console.log(skillName);
+    
+    switch(skillType) {
+        case "INT":
+            skillBase = ["radio_intelligence"];
+            break;
+        case "REF":
+            skillBase = ["radio_reflex"];
+            break;
+        case "STR":
+            skillBase = ["radio_strength"];
+            break;
+        case "CBT":
+            skillBase = ["radio_strength","radio_reflex","radio_intelligence"];
+            break;        
+    }
+
+    const attributesLevel = await getAttrsAsync(skillBase);
+    const attributeLevel = Object.values(attributesLevel).reduce((a, b) => parseInt(a) + parseInt(b), 0);
+    
+    console.log(`Skilllevel: ${skillLevel}`);
+    console.log(`Skill Base: ${skillBase}`);
+    console.log(attributesLevel);
+    console.log(attributeLevel);
+    
+    const rollRequest = `\
+@{gmRoll}\
+&{template:test}\
+{{name=[[0]]}}\
+{{gooddie=[[0]]}}\
+{{baddie=[[0]]}}\
+{{roll1=[[\
+[[\
+[[${baseDie}]] +\
+[[?{Mod|0}]] + \
+[[${skillLevel}]] + \
+[[${attributeLevel}]]\
+]]d6>\
+${skillThreshhold}\
+-?{Challange Level|3}+?{Assist|0}\
+]]\
+}}\
+{{assists=[[?{Assist|0}]]}}\
+{{skilllevel=[[0]]}}\
+{{mod=[[?{Mod|0}]]}}\
+{{attributetype=[[0]]}}\
+{{attributesum=[[0]]}}\
+{{challangeLevel=[[?{Challange Level|3}]]}}\
+{{challangedie=[[0]]}}\
+{{starred=[[0]]}}\
+    `;
+    
+    console.log(rollRequest);
+    
+    startRoll(rollRequest, (rollObject) => {
+        console.log(rollObject);
+        
+        console.log(rollObject.results.assists);
+        const assists = rollObject.results.assists.result;
+        console.log(assists);
+        
+        console.log(rollObject.results.challangeLevel);
+        const challangeLevel = rollObject.results.challangeLevel.result;
+        console.log(challangeLevel);
+        
+        const mod = rollObject.results.mod.result;
+        console.log(mod);
+        
+        let goodDie = "";
+        let badDie = "";
+        const rollsArray = rollObject.results.roll1.dice;
+        rollsArray.forEach((item) => {
+            if (item>=skillThreshhold){
+                let encode = encodeRoll(item);
+                goodDie += encode;
+            }else{
+                let encode = encodeRoll(item);
+                badDie += encode;
+            }            
+        });
+        let challangedie = "";
+        
+        console.log(rollsArray);
+        console.log(goodDie);
+        console.log(badDie);
+        
+        if (assists>0){
+            goodDie += "0".repeat(assists);
+        }
+        console.log(goodDie);
+        
+        if (challangeLevel>0){
+            
+            let dieDiff = challangeLevel - goodDie.length;
+            console.log(dieDiff);
+            
+            challangedie = goodDie.substring(goodDie.length-challangeLevel, goodDie.length);
+            goodDie = goodDie.substring(0, goodDie.length-challangeLevel);
+            
+            
+            if (dieDiff>0){
+                challangedie += "@".repeat(dieDiff);
+            }
+            console.log(goodDie);
+            console.log(challangedie);
+        }
+        
+
+
+        
+        
+        const wins = goodDie.length - challangeLevel;
+        // if Destiny Throw aktive                 // lower destiny level if threashold is a o k    
+        if (skillThreshhold == 3){
+                setAttrs({"radio_destiny_level": skillDestinyLevel-1});  
+        }
+        
+        finishRoll(
+            rollObject.rollId,
+            {
+                name: skillName,
+                skilllevel: skillLevel,
+                assist: assists,
+                challangelevel: challangeLevel,
+                gooddie: goodDie,
+                baddie: badDie,
+                wins: wins,
+                attributetype: skillType,
+                attributesum: attributeLevel,
+                challangedie: challangedie,
+                mod: mod,
+                starred: starred
+            }
+        );
+        
+    });    
+});
+
+function encodeRoll(rollInt) {
+    let retnValue = "0";
+    switch(rollInt) {
+        case 1:
+            retnValue = "A";
+            break;
+        case 2:
+            retnValue = "B";
+            break;
+        case 3:
+            retnValue = "C";
+            break;
+        case 4:
+            retnValue = "D";
+            break;
+        case 5:
+            retnValue = "E";
+            break;
+        case 6:
+            retnValue = "F";
+            break;
+    }
+    return retnValue
+}
+
+</script>
+<rolltemplate class="sheet-rolltemplate-injury">
+    <div class="sheet-template-container">
+        <div class="sheet-title-red">
+            <h4>{{computed::name}}</h4>
+            <h4 style="font-family: Pictos">{{computed::starred}}</h4>
+        </div>
+        <div class="sheet-diceDisplay">
+            <div class="sheet-goodAndChallangeDie">
+                <p class="sheet-goodDie">{{computed::gooddie}}</p>
+                <p class="sheet-challangedie">{{computed::challangedie}}</p>
+                <p class="sheet-badDie">{{computed::baddie}}</p>
+            </div>
+        </div>
+        <div class="sheet-resolution">
+            <p>Victory Level:</p>
+            <p>{{roll1}}</p>
+        </div>
+
+    </div>
+    
+</rolltemplate>
+<rolltemplate class="sheet-rolltemplate-test">
+    <div class="sheet-template-container">
+        <div class="sheet-title">
+            <h4>{{computed::name}}</h4>
+            <h4 style="font-family: Pictos">{{computed::starred}}</h4>
+        </div>
+        <div class="sheet-infoBox">
+            <div>
+                <p>Skill Level: </p>
+                {{computed::skilllevel}}
+            </div>
+            <div>
+                <p>Attribut Typ: </P>
+                {{computed::attributetype}}
+            </div>
+            <div>
+                <p>Attribute Summe: </P>
+                {{computed::attributesum}}
+            </div>
+            <div>
+                <p>Bonus durch Assist: </p>
+                {{computed::assists}}
+            </div>
+            <div>
+                <p>Mod: </p>
+                {{computed::mod}}
+            </div>
+            <div>
+                <p>Challange Level: </p>
+                {{computed::challangeLevel}}
+            </div>
+        </div>
+        <div class="sheet-diceDisplay">
+            <div class="sheet-goodAndChallangeDie">
+                <p class="sheet-goodDie">{{computed::gooddie}}</p>
+                <p class="sheet-challangedie">{{computed::challangedie}}</p>
+                <p class="sheet-badDie">{{computed::baddie}}</p>
+            </div>
+        </div>
+        <div class="sheet-resolution">
+            <p>Victory Level:</p>
+            <p>{{roll1}}</p>
+        </div>
+
+    </div>
+    
+</rolltemplate>
\ No newline at end of file
diff --git a/cogent/cogent.png b/cogent/cogent.png
new file mode 100644
index 0000000000..55b348534f
Binary files /dev/null and b/cogent/cogent.png differ
diff --git a/cogent/sheet.json b/cogent/sheet.json
new file mode 100644
index 0000000000..799c9db6a7
--- /dev/null
+++ b/cogent/sheet.json
@@ -0,0 +1,9 @@
+{
+  "html": "cogent.html",
+  "css": "cogent.css",
+  "authors": "Odrson",
+  "roll20userid": "1900232",
+  "preview": "cogent.png",
+  "instructions": "Cogent(https://cogentroleplay.com), is a narative driven framework wor pen&paper roleplay.",
+  "legacy": false
+}
\ No newline at end of file