From 9f79e2f9a8d56f82ece45b857b9c06cfe4309f1b Mon Sep 17 00:00:00 2001
From: SavageSpiel <92274791+SavageSpiel@users.noreply.github.com>
Date: Wed, 1 May 2024 23:55:32 +0100
Subject: [PATCH] Replaced all inline styles with stylesheet classes

---
 Kult Divinity Lost/KULT Divinity Lost.css  | 180 ++++++++++++++++++++-
 Kult Divinity Lost/KULT Divinity Lost.html |  67 ++++----
 2 files changed, 210 insertions(+), 37 deletions(-)

diff --git a/Kult Divinity Lost/KULT Divinity Lost.css b/Kult Divinity Lost/KULT Divinity Lost.css
index c60357050053..733c4129b704 100644
--- a/Kult Divinity Lost/KULT Divinity Lost.css	
+++ b/Kult Divinity Lost/KULT Divinity Lost.css	
@@ -200,6 +200,13 @@
 }
 
 /* Attributes */
+.sheet-attributes-header {
+	margin-left: 33%;
+	width: 33%;
+	display: block;
+	text-align: center;
+}
+
 .sheet-sephirot {
     background-image: url("https://i.imgur.com/G94W8PR.png");
     background-size: 100% auto;
@@ -213,12 +220,12 @@
     position: relative;
 }
 
-.charsheet .sheet-passatt{
+.charsheet .sheet-passiveatt{
 	border: 3px #968c6a dotted;
 	width: 3em;
 	display: inline-block;
 }
-.charsheet .sheet-actatt{
+.charsheet .sheet-activeatt{
 	border: 3px #968c6a dotted;
 	width: 3em;
 	border-radius: 50%;
@@ -230,7 +237,6 @@
 	width: 180px;
 }
 
-
 .charsheet .sheet-attlabel select{
     width:115px;
 	display: inline-block;
@@ -242,6 +248,134 @@
 	margin-bottom:0;
 }
 
+/* Attribute positioning */
+
+.sheet-sephirot .sheet-fortitude {
+	position: absolute;
+	top: 133px;
+	left: 72px;
+}
+
+.sheet-sephirot .sheet-willpower {
+	position: absolute;
+	top: 62px;
+	left: 190px;
+}
+
+.sheet-sephirot .sheet-reflexes {
+	position: absolute;
+	top: 133px;
+	left: 307px;
+}
+
+.sheet-sephirot .sheet-reason {
+	position: absolute;
+	top: 271px;
+	left: 72px;
+}
+
+.sheet-sephirot .sheet-intuition {
+	position: absolute;
+	top: 271px;
+	left: 307px;
+}
+
+.sheet-sephirot .sheet-perception {
+	position: absolute;
+	top: 337px;
+	left: 190px;
+}
+
+.sheet-sephirot .sheet-coolness {
+	position: absolute;
+	top: 402px;
+	left: 72px;
+}
+
+.sheet-sephirot .sheet-violence {
+	position: absolute;
+	top: 402px;
+	left: 307px;
+}
+
+.sheet-sephirot .sheet-charisma {
+	position: absolute;
+	top: 467px;
+	left: 190px;
+}
+
+.sheet-sephirot .sheet-soul {
+	position: absolute;
+	top: 598px;
+	left: 190px;
+}
+
+.sheet-sephirot .sheet-fortitude-label {
+	position: absolute;
+	top: 200px;
+	left: 4px;
+}
+
+.sheet-sephirot .sheet-willpower-label {
+	position: absolute;
+	top: 125px;
+	left: 122px;
+}
+
+.sheet-sephirot .sheet-reflexes-label {
+	position: absolute;
+	top: 200px;
+	left: 239px;
+}
+
+.sheet-sephirot .sheet-reason-label {
+	position: absolute;
+	top: 334px;
+	left: 4px;
+}
+
+.sheet-sephirot .sheet-intuition-label {
+	position: absolute;
+	top: 334px;
+	left: 239px;
+}
+
+.sheet-sephirot .sheet-perception-label {
+	position: absolute;
+	top: 398px;
+	left: 120px;
+}
+
+.sheet-sephirot .sheet-coolness-label {
+	position: absolute;
+	top: 470px;
+	left: 4px;
+}
+
+.sheet-sephirot .sheet-violence-label {
+	position: absolute;
+	top: 470px;
+	left: 239px;
+}
+
+.sheet-sephirot .sheet-charisma-label {
+	position: absolute;
+	top: 530px;
+	left: 120px;
+}
+
+.sheet-sephirot .sheet-soul-label {
+	position: absolute;
+	top: 664px;
+	left: 120px;
+}
+
+.sheet-sephirot .sheet-helphinder-label {
+	position: absolute;
+	top: 10px;
+	left: -30px;
+}
+
 /* Relations */
 
 .sheet-relations input[type=text] {
@@ -354,6 +488,21 @@
     display: none;
 }
 
+.charsheet input.sheet-toggle-show-rollable {
+	float:right;
+	margin-right:0px;
+}
+
+.charsheet span.sheet-rollable-label {
+	float:right;
+	margin-right:5px;
+}
+
+.charsheet span.sheet-rollable-checkbox {
+	float:right;
+	margin-right:-15px;
+}
+
 .sheet-disadvantages {
 	margin-bottom:10px;    
 }
@@ -450,6 +599,9 @@
 	display: inline-block;
 	margin-left:20px;
 }
+.sheet-wounds-list input.sheet-show-wounds[type=checkbox]{
+	margin-left:10px;
+}
 .sheet-wounds-list .sheet-label2{
 	display: inline-block;
 }
@@ -519,6 +671,14 @@
 }
 
 
+/* Dramatic Hooks */
+
+.sheet-dramatic_hooks textarea {
+	height: 395px;
+	width:100%;
+}
+
+
 /* Weapons */
 .sheet-gears, .sheet-weapons, .sheet-weapons .repitem { 
 	margin-bottom:10px;
@@ -548,6 +708,12 @@
 	margin-top:2px;
 }
 
+.sheet-advancement .sheet-experience {
+	font-weight:bold;
+	font-style:italic;
+	vertical-align:middle;
+}
+
 .sheet-advancement .sheet-advancement-header {
 	font-size:1.5em;
 	font-style:italic;
@@ -580,6 +746,14 @@
 	padding: 0 3px;
 }
 
+
+/* Notes */
+
+.sheet-notes textarea {
+	height: 565px;
+	width:815px;
+}
+
 /* Roll Template */
 
 .sheet-rolltemplate-kult{
diff --git a/Kult Divinity Lost/KULT Divinity Lost.html b/Kult Divinity Lost/KULT Divinity Lost.html
index a52e9319dc90..71f667e0f401 100644
--- a/Kult Divinity Lost/KULT Divinity Lost.html	
+++ b/Kult Divinity Lost/KULT Divinity Lost.html	
@@ -34,83 +34,82 @@
     
   <div class="attributes">
 
-        <div style="margin-left: 33%; width: 33%; display: block; text-align: center;"
-          class="sheet-label">&#x2B2A; <span data-i18n="attributes-u">Attributes</span></div>
+        <div class="sheet-label attributes-header">&#x2B2A; <span data-i18n="attributes-u">Attributes</span></div>
 		  
 		<div class="sephirot">
-		  <div class="sheet-passatt" style="position: absolute; top: 133px; left: 72px;"><input type="number" name="attr_fortitude" min="-5" max="5"></div>
-		  <div class="sheet-attlabel" style="position: absolute; top: 200px; left: 4px;">
+		  <div class="sheet-passiveatt fortitude"><input type="number" name="attr_fortitude" min="-5" max="5"></div>
+		  <div class="sheet-attlabel fortitude-label">
 			<h4 data-i18n="fortitude-u">Fortitude</h4>
 			<button type="roll" value="&{template:kult}{{name=^{move-rt} }}{{subtags=^{fortitude-mv-u} }}{{valor=[[2d10+@{Fortitude}+@{condition_penalty}+@{wound_penalty}+@{rollmod}]]}} {{success=@{moves-fort-success}}} {{partial=@{moves-fort-partial}}} {{failure=@{moves-fort-failure}}}"
 			  class="sheet-ui-draggable btn ui-draggable"><span data-i18n="fortitude-mv-u">Endure Injury</span></button>
 		  </div>
 
-          <div class="sheet-attlabel" style="position: absolute; top: 125px; left: 120px;">
+          <div class="sheet-passiveatt willpower"><input type="number" name="attr_willpower" min="-5" max="5"></div>
+          <div class="sheet-attlabel willpower-label">
             <h4 data-i18n="willpower-u">Willpower</h4>
-            <button type="roll" style="margin-left:8px;" 
+            <button type="roll"
 			  value="&{template:kult}{{name=^{move-rt} }}{{subtags=^{willpower-mv-u} }}{{valor=[[2d10+@{Willpower}+@{condition_penalty}+@{wound_penalty}+@{kit_penalty}+@{rollmod}]]}} {{success=@{moves-will-success}}} {{partial=@{moves-will-partial}}} {{failure=@{moves-will-failure}}}"
               class="sheet-ui-draggable btn ui-draggable"><span data-i18n="willpower-mv-u">Keep it Together</span></button>
           </div>
-          <div class="sheet-passatt" style="position: absolute; top: 62px; left: 190px;"><input type="number" name="attr_willpower" min="-5" max="5"></div>
 
-          <div class="sheet-passatt" style="position: absolute; top: 133px; left: 307px;"><input type="number" name="attr_reflexes" min="-5" max="5"></div>
-          <div class="sheet-attlabel" style="position: absolute; top: 200px; left: 239px;">
+          <div class="sheet-passiveatt reflexes"><input type="number" name="attr_reflexes" min="-5" max="5"></div>
+          <div class="sheet-attlabel reflexes-label">
             <h4 data-i18n="reflexes-u">Reflexes</h4>
             <button type="roll" value="&{template:kult}{{name=^{move-rt} }}{{subtags=^{reflexes-mv-u} }}{{valor=[[2d10+@{Reflexes}+@{condition_penalty}+@{wound_penalty}+@{rollmod}]]}} {{success=@{moves-reflex-success}}} {{partial=@{moves-reflex-partial}}} {{failure=@{moves-reflex-failure}}}"
               class="sheet-ui-draggable btn ui-draggable"><span data-i18n="reflexes-mv-u">Avoid Harm</span></button>
           </div>
 
-          <div class="sheet-attlabel" style="position: absolute; top: 334px; left: 4px;">
+          <div class="sheet-activeatt reason"><input type="number" name="attr_reason" min="-5" max="5"></div>
+          <div class="sheet-attlabel reason-label">
             <h4 data-i18n="reason-u">Reason</h4>
             <button type="roll" value="&{template:kult}{{name=^{move-rt} }}{{subtags=^{reason-mv-u} }}{{valor=[[2d10+@{Reason}+@{condition_penalty}+@{wound_penalty}+@{rollmod}]]}} {{success=@{moves-reason-success}}} {{partial=@{moves-reason-partial}}} {{failure=@{moves-reason-failure}}}"
               class="sheet-ui-draggable btn ui-draggable"><span data-i18n="reason-mv-u">Investigate</span></button>
           </div>
-          <div class="sheet-actatt" style="position: absolute; top: 271px; left: 72px;"><input type="number" name="attr_reason" min="-5" max="5"></div>
 
-          <div class="sheet-actatt" style="position: absolute; top: 271px; left: 307px;"><input type="number" name="attr_intuition" min="-5" max="5"></div>
-          <div class="sheet-attlabel" style="position: absolute; top: 334px; left: 239px;">
+          <div class="sheet-activeatt intuition"><input type="number" name="attr_intuition" min="-5" max="5"></div>
+          <div class="sheet-attlabel intuition-label">
             <h4 data-i18n="intuition-u">Intuition</h4>
             <button type="roll" value="&{template:kult}{{name=^{move-rt} }}{{subtags=^{intuition-mv-u} }}{{valor=[[2d10+@{Intuition}+@{condition_penalty}+@{wound_penalty}+@{rollmod}]]}} {{success=@{moves-intuition-success}}} {{partial=@{moves-intuition-partial}}} {{failure=@{moves-intuition-failure}}}"
               class="sheet-ui-draggable btn ui-draggable"><span data-i18n="intuition-mv-u">Read a Person</span></button>
           </div>
 
-          <div class="sheet-attlabel" style="position: absolute; top: 398px; left: 120px;">
+          <div class="sheet-activeatt perception"><input type="number" name="attr_perception" min="-5" max="5"></div>
+          <div class="sheet-attlabel perception-label">
             <h4 data-i18n="perception-u">Perception</h4>
             <button type="roll" value="&{template:kult}{{name=^{move-rt} }}{{subtags=^{perception-mv-u} }}{{valor=[[2d10+@{Perception}+@{condition_penalty}+@{wound_penalty}+@{rollmod}]]}} {{success=@{moves-perception-success}}} {{partial=@{moves-perception-partial}}} {{failure=@{moves-perception-failure}}}"
               class="sheet-ui-draggable btn ui-draggable"><span data-i18n="perception-mv-u">Observe a Situation</span></button>
           </div>
-          <div class="sheet-actatt" style="position: absolute; top: 337px; left: 190px;"><input type="number" name="attr_perception" min="-5" max="5"></div>
 
-          <div class="sheet-actatt" style="position: absolute; top: 402px; left: 72px;"><input type="number" name="attr_coolness" min="-5" max="5"></div>
-          <div class="sheet-attlabel" style="position: absolute; top: 470px; left: 4px;">
+          <div class="sheet-activeatt coolness"><input type="number" name="attr_coolness" min="-5" max="5"></div>
+          <div class="sheet-attlabel coolness-label">
             <h4 data-i18n="coolness-u">Coolness</h4>
             <button type="roll" value="&{template:kult}{{name=^{move-rt} }}{{subtags=^{coolness-mv-u} }}{{valor=[[2d10+@{Coolness}+@{condition_penalty}+@{wound_penalty}+@{rollmod}]]}} {{success=@{moves-cool-success}}} {{partial=@{moves-cool-partial}}} {{failure=@{moves-cool-failure}}}"
               class="sheet-ui-draggable btn ui-draggable"><span data-i18n="coolness-mv-u">Act Under Pressure</span></button>
           </div>
 
-          <div class="sheet-attlabel" style="position: absolute; top: 470px; left: 239px;">
+          <div class="sheet-activeatt violence"><input type="number" name="attr_violence" min="-5" max="5"></div>
+          <div class="sheet-attlabel violence-label">
             <h4 data-i18n="violence-u">Violence</h4>
             <button type="roll" value="&{template:kult}{{name=^{move-rt} }}{{subtags=^{violence-mv-u} }}{{valor=[[2d10+@{Violence}+@{condition_penalty}+@{wound_penalty}+@{rollmod}]]}} {{success=@{moves-violence-success}}} {{partial=@{moves-violence-partial}}} {{failure=@{moves-violence-failure}}}"
               class="sheet-ui-draggable btn ui-draggable"><span data-i18n="violence-mv-u">Engage in Combat</span></button>
           </div>
-          <div class="sheet-actatt" style="position: absolute; top: 402px; left: 307px;"><input type="number" name="attr_violence" min="-5" max="5"></div>
 
-          <div class="sheet-actatt" style="position: absolute; top: 467px; left: 190px;"><input type="number" name="attr_charisma" min="-5" max="5"></div>
-          <div class="sheet-attlabel" style="position: absolute; top: 530px; left: 120px;">
+          <div class="sheet-activeatt charisma"><input type="number" name="attr_charisma" min="-5" max="5"></div>
+          <div class="sheet-attlabel charisma-label">
             <h4 data-i18n="charisma-u">Charisma</h4>
             <button type="roll" value="&{template:kult}{{name=^{move-rt} }}{{subtags=^{charisma-mv-u} }}{{valor=[[2d10+@{Charisma}+@{condition_penalty}+@{wound_penalty}+@{rollmod}]] }} {{success=@{moves-charisma-success}}} {{partial=@{moves-charisma-partial}}} {{failure=@{moves-charisma-failure}}}"
               class="sheet-ui-draggable btn ui-draggable"><span data-i18n="charisma-mv-u">Influence Other</span></button>
           </div>
 
-          <div class="sheet-attlabel" style="position: absolute; top: 664px; left: 120px;">
+          <div class="sheet-activeatt soul"><input type="number" name="attr_soul" min="-5" max="5"></div>
+          <div class="sheet-attlabel soul-label">
             <h4 data-i18n="soul-u">Soul</h4>
             <button type="roll" value="&{template:kult}{{name=^{move-rt} }}{{subtags=^{soul-mv-u} }}{{valor=[[2d10+@{Soul}+@{condition_penalty}+@{wound_penalty}+@{stti_bonus}+@{rollmod}]] }} {{success=@{moves-soul-success}}} {{partial=@{moves-soul-partial}}} {{failure=@{moves-soul-failure}}}"
               class="sheet-hidden-roll"><span data-i18n="soul-mv-u">See Through the Illusion</span></button>  
           </div>
-          <div class="sheet-actatt" style="position: absolute; top: 598px; left: 190px;"><input type="number" name="attr_soul" min="-5" max="5"></div>
 		  
 		  
-          <div class="sheet-attlabel" style="position: absolute; top: 10px; left: -30px;">
+          <div class="sheet-attlabel helphinder-label">
 					<select name="attr_helphinder">
 					  <option value="Select">--attribute--</option>
 					  <option value="Fortitude" data-i18n="fortitude-u">Fortitude</option>
@@ -133,7 +132,7 @@ <h4 data-i18n="soul-u">Soul</h4>
   
 		<div class="relations">
 			<div class="sheet-label">&#x2B2A; <span data-i18n="relations-u">Relations</span></div>
-			<textarea name="attr_relations" style="height: 140px;width:400px;display:none;"></textarea>
+			<input type="hidden" name="attr_relations"></input>
 			  
 			<fieldset class="repeating_relations">
 				<input type="text" name="attr_relation_name" placeholder="Name"><span></span><input type="number" name="attr_relation_value" value="0" max="2" min="0">
@@ -304,7 +303,7 @@ <h4 data-i18n="soul-u">Soul</h4>
 		  <div class="disadvantages">
 			  <div class="sheet-label">&#x2B2A; <span data-i18n="disadvantages-u">Disadvantages</span></div>
 				<fieldset class="repeating_disadvantages">
-					<input type="checkbox" name="attr_disadvantage_rollable" value="1" checked="true" class="toggle-show-rollable" style="float:right;margin-right:0px;"><span style="float:right;margin-right:-15px;"></span><span style="float:right;margin-right:5px;">Rollable</span><br />
+					<input type="checkbox" name="attr_disadvantage_rollable" value="1" checked="true" class="toggle-show-rollable"><span class="rollable-checkbox"></span><span class="rollable-label">Rollable</span><br />
 					<input type="text" name="attr_disadvantage_name" placeholder="Name">
 					<button type="roll" value="&{template:kult}{{name=Disadvantage }}{{subtags=@{disadvantage_name} }}{{valor=[[2d10+@{disadvantage_penalty}+@{condition_penalty}+@{wound_penalty}+@{rollmod}]]}} {{success=@{disadvantage-success}}} {{partial=@{disadvantage-partial}}} {{failure=@{disadvantage-failure}}} {{options=@{disadvantage_options}}}"
 					  class="rollonly" data-i18n="disadvantages-roll-u">Roll Disadvantage</button>
@@ -329,7 +328,7 @@ <h4 data-i18n="soul-u">Soul</h4>
 		  <div class="advantages">
 			  <div class="sheet-label">&#x2B2A; <span data-i18n="advantages-u">Advantages</span></div>
 				<fieldset class="repeating_advantages">
-					<input type="checkbox" name="attr_advantage_rollable" value="1" checked="true" class="toggle-show-rollable" style="float:right;margin-right:0px;"><span style="float:right;margin-right:-15px;"></span><span style="float:right;margin-right:5px;">Rollable</span><br />
+					<input type="checkbox" name="attr_advantage_rollable" value="1" checked="true" class="toggle-show-rollable"><span class="rollable-checkbox"></span><span class="rollable-label">Rollable</span><br />
 					<input type="text" name="attr_advantage_name" placeholder="Name">
 					<select name="attr_advantage_attribute">
 					  <option value="Select">--attribute--</option>
@@ -389,7 +388,7 @@ <h4 data-i18n="soul-u">Soul</h4>
 			<input type="checkbox" name="attr_cwound1" value="1"><span></span>
 		</div>
 		<div class="sheet-wounds-list">
-			<input type="checkbox" name="attr_applywoundpenalty" value="1" style="margin-left:10px;"><span></span>
+			<input type="checkbox" name="attr_applywoundpenalty" value="1" class="show-wounds"><span></span>
 			<div class="sheet-label2" data-i18n="wounds-apply-u">Apply wound penalties to rolls</div>
 		</div>
 		<input type="hidden" name="attr_wound_penalty" value="0"></input>
@@ -522,16 +521,16 @@ <h4 data-i18n="soul-u">Soul</h4>
 			</div>
 			<div class="sheet-conditions-checks">
 				<input type="checkbox" name="attr_applyconditionpenalty" value="1"><span></span>
-				<div class="sheet-label2" data-i18n="conditions-apply-u" style="width:184px;">Apply condition penalties to rolls</div>
+				<div class="sheet-label2" data-i18n="conditions-apply-u">Apply condition penalties to rolls</div>
 				
 				<input type="checkbox" name="attr_applymaxconditionpenalty" value="1"><span></span>
-				<div class="sheet-label2" data-i18n="maxconditions-apply-u" style="width:180px;">Only apply highest penalty</div>
+				<div class="sheet-label2" data-i18n="maxconditions-apply-u">Only apply highest penalty</div>
 			</div>
 			<input type="hidden" name="attr_condition_penalty" value="0"></input>
 		  </div>
 		  <div class="dramatic_hooks">
 				<div class="sheet-label">&#x2B2A; <span data-i18n="dramatichooks-u">Dramatic Hooks</span></div>
-				<textarea name="attr_dramatichooks" style="height: 395px;width:100%;"></textarea>
+				<textarea name="attr_dramatichooks"></textarea>
 		  </div>
 	  
 	  </div>
@@ -560,7 +559,7 @@ <h4 data-i18n="soul-u">Soul</h4>
 	  
 		  <div class="advancement">
 				<div class="sheet-label">&#x2B2A; <span data-i18n="advancement-u">Advancement</span></div>		
-				<p><span style="font-weight:bold;font-style:italic;vertical-align:middle;" data-i18n="experience-u">Experience</span> <input type="number" name="attr_experience"></input></p>
+				<p><span class="experience" data-i18n="experience-u">Experience</span> <input type="number" name="attr_experience"></input></p>
 				
 				<input type="radio" class="sheet-typesleeper" name="attr_type" value="1" id="sheet-typesleeper"></input>
 					<label for="sheet-typesleeper" data-i18n="sleeper-u">Sleeper</label>
@@ -680,13 +679,13 @@ <h4 data-i18n="soul-u">Soul</h4>
 
 	  <div class="notes">
 			<div class="sheet-label">&#x2B2A; <span data-i18n="notes-u">Notes</span></div>
-			<textarea name="attr_notes" style="height: 565px;width:815px;"></textarea>
+			<textarea name="attr_notes"></textarea>
 	  </div>
     </div>
 </div>
 <!--</div>-->
 
-<span style="display: none" data-i18n="modificator-rt">Modificator</span>
+<span class="sheet-hidden" data-i18n="modificator-rt">Modificator</span>
 
 <rolltemplate class="sheet-rolltemplate-kult">
     <div class="container">