From f09f82cd87b9107fcb474a737eb07b272cd6c14d Mon Sep 17 00:00:00 2001
From: lowercasedonkey <lowercasedonkey@gmail.com>
Date: Thu, 13 Aug 2020 14:11:04 -0400
Subject: [PATCH] tab-content

---
 src/003-assets/CSS/tabs.css                |  6 +++---
 src/Mods/SecExp/attackOptions.tw           | 10 +++++-----
 src/Mods/SecExp/buildings/secBarracks.tw   |  8 ++++----
 src/Mods/SecExp/edicts.tw                  |  4 ++--
 src/Mods/SpecialForce/Firebase.tw          |  6 +++---
 src/events/intro/introSummary.tw           |  8 ++++----
 src/facilities/nursery/nursery.tw          |  6 +++---
 src/gui/options/options.tw                 | 10 +++++-----
 src/interaction/policies/policies.tw       | 12 ++++++------
 src/js/rulesAssistantOptions.js            |  2 +-
 src/js/utilsSC.js                          |  6 +++---
 src/npc/slaveStats.tw                      | 14 +++++++-------
 src/npc/startingGirls/startingGirls.tw     | 14 +++++++-------
 src/personalAssistant/assistantOptions.tw  |  6 +++---
 src/uncategorized/economics.tw             | 18 +++++++++---------
 src/uncategorized/remoteSurgery.tw         | 12 ++++++------
 src/uncategorized/slaveInteract.tw         | 18 +++++++++---------
 src/uncategorized/underperformingSlaves.tw |  4 ++--
 18 files changed, 82 insertions(+), 82 deletions(-)

diff --git a/src/003-assets/CSS/tabs.css b/src/003-assets/CSS/tabs.css
index 9f857f236db..a5e31ab91e1 100644
--- a/src/003-assets/CSS/tabs.css
+++ b/src/003-assets/CSS/tabs.css
@@ -52,20 +52,20 @@ div.tabbar a.active {
 	cursor: default;
 }
 
-.tabcontent:not(.noFade) {
+.tab-content:not(.noFade) {
 	display: none;
 	padding: 6px 12px;
 	-webkit-animation: fadeEffect 0.3s;
 	animation: fadeEffect 0.3s;
 }
 
-.tabcontent.card {
+.tab-content.card {
 	border-radius: 0 8px 8px 8px;
 	background-color: #1a1a1a;
 	border: 0;
 }
 
-.tabcontent.card .slaveSummary.card {
+.tab-content.card .slaveSummary.card {
 	background-color: #252525;
 }
 
diff --git a/src/Mods/SecExp/attackOptions.tw b/src/Mods/SecExp/attackOptions.tw
index 33c4b31bc86..0eea7a19a3a 100644
--- a/src/Mods/SecExp/attackOptions.tw
+++ b/src/Mods/SecExp/attackOptions.tw
@@ -219,7 +219,7 @@ approximately <strong><<print _estimatedMen>> men</strong> are coming, they seem
 <button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'defensiveTactics')" id="tab defensive tactics">Defensive tactics</button>
 <button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'offensiveTactics')" id="tab offensiveTactics">Offensive Tactics</button>
 
-<div id="defensiveTactics" class="tabcontent">
+<div id="defensiveTactics" class="tab-content">
 	<div class="content">
 		<<link "Bait and Bleed">>
 			<<set $chosenTactic = "Bait and Bleed">>
@@ -259,7 +259,7 @@ approximately <strong><<print _estimatedMen>> men</strong> are coming, they seem
 	</div>
 </div>
 
-<div id="offensiveTactics" class="tabcontent">
+<div id="offensiveTactics" class="tab-content">
 	<div class="content">
 		<<link "Blitzkrieg">>
 			<<set $chosenTactic = "Blitzkrieg">>
@@ -433,7 +433,7 @@ approximately <strong><<print _estimatedMen>> men</strong> are coming, they seem
 	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'mercs')" id="tab mercs">Mercs: ($mercUnits.length)</button>
 <</if>>
 
-<div id="militia" class="tabcontent">
+<div id="militia" class="tab-content">
 	<div class="content">
 		<<for _i = 0; _i < _mL; _i++>>
 			<<capture _i>>
@@ -454,7 +454,7 @@ approximately <strong><<print _estimatedMen>> men</strong> are coming, they seem
 		<</for>>
 	</div>
 </div>
-<div id="slaves" class="tabcontent">
+<div id="slaves" class="tab-content">
 	<div class="content">
 		<<for _i = 0; _i < _sL; _i++>>
 		<<capture _i>>
@@ -475,7 +475,7 @@ approximately <strong><<print _estimatedMen>> men</strong> are coming, they seem
 		<</for>>
 	</div>
 </div>
-<div id="mercs" class="tabcontent">
+<div id="mercs" class="tab-content">
 	<div class="content">
 		<<for _i = 0; _i < _meL; _i++>>
 		<<capture _i>>
diff --git a/src/Mods/SecExp/buildings/secBarracks.tw b/src/Mods/SecExp/buildings/secBarracks.tw
index b1a4bf3e904..7663aa95c19 100644
--- a/src/Mods/SecExp/buildings/secBarracks.tw
+++ b/src/Mods/SecExp/buildings/secBarracks.tw
@@ -151,7 +151,7 @@ Your current maximum number of units is <<print App.SecExp.battle.maxUnits()>> (
 	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Slaves')" id="tab Slaves">Slaves: ($slaveUnits.length)</button>
 </div>
 <<run App.UI.tabbar.handlePreSelectedTab($tabChoice.secBarracks)>>
-<div id="Bots" class="tabcontent">
+<div id="Bots" class="tab-content">
 	<div class="content">
 		<<set _secBotsCost = 500, _secBotsUpgradeCost = 250>>
 		<<= App.SecExp.getUnit("Bots").describe()>> <br>
@@ -211,7 +211,7 @@ Your current maximum number of units is <<print App.SecExp.battle.maxUnits()>> (
 		<</if>>
 	</div>
 </div>
-<div id="Slaves" class="tabcontent">
+<div id="Slaves" class="tab-content">
 	<div class="content">
 		You are free to organize your menial slaves into fighting units. Currently you have <<print num($menials)>> slaves available, while <<print num(App.SecExp.Manpower.employedSlave)>> are already employed as soldiers. During all your battles you lost a total of <<print num($slavesTotalCasualties)>>.
 		<<if $menials > 0 && App.SecExp.battle.activeUnits() < App.SecExp.battle.maxUnits()>>
@@ -289,7 +289,7 @@ Your current maximum number of units is <<print App.SecExp.battle.maxUnits()>> (
 		<</for>>
 	</div>
 </div>
-<div id="Militia" class="tabcontent">
+<div id="Militia" class="tab-content">
 	<div class="content">
 		You founded the $arcologies[0].name free militia. You are now able to organize your citizens into fighting units.
 		<<if $SecExp.edicts.defense.militia === 2>>
@@ -358,7 +358,7 @@ Your current maximum number of units is <<print App.SecExp.battle.maxUnits()>> (
 		<</for>>
 	</div>
 </div>
-<div id="Mercs" class="tabcontent">
+<div id="Mercs" class="tab-content">
 	<div class="content">
 		With the installation of a mercenary company in the arcology, many other are attracted to your free city, hoping to land a contract with you.
 		You are able to organize them in units to use in the defense of the arcology. Excluding the defense force you set up, there are <<print num(App.SecExp.Manpower.totalMerc)>> mercenaries in your arcology, of which <<print num(App.SecExp.Manpower.employedMerc)>> actively employed and <<print num($mercFreeManpower)>> not yet under contract. In total <<print num($mercTotalCasualties)>> mercenaries have died defending your arcology.
diff --git a/src/Mods/SecExp/edicts.tw b/src/Mods/SecExp/edicts.tw
index 6be9f0a36f0..1c00e29feed 100644
--- a/src/Mods/SecExp/edicts.tw
+++ b/src/Mods/SecExp/edicts.tw
@@ -10,7 +10,7 @@
 	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Military')" id="tab Military">Military</button>
 <</if>>
 
-<div id="Society" class="tabcontent">
+<div id="Society" class="tab-content">
 	<div class="content">
 	<<if $SecExp.edicts.alternativeRents == 1>>
 		<br>''Alternative rent payment:'' you are allowing citizens to pay for their rents in menial slaves rather than cash.
@@ -316,7 +316,7 @@
 	</div>
 </div>
 
-<div id="Military" class="tabcontent">
+<div id="Military" class="tab-content">
 	<div class="content">
 	<<if $SecExp.edicts.defense.soldierWages === 0>>
 		<br>''Low wages for soldiers:'' wages for soldiers are set to a low level compared to market standards.
diff --git a/src/Mods/SpecialForce/Firebase.tw b/src/Mods/SpecialForce/Firebase.tw
index 68e85c00ecc..18e3e4694f0 100644
--- a/src/Mods/SpecialForce/Firebase.tw
+++ b/src/Mods/SpecialForce/Firebase.tw
@@ -36,7 +36,7 @@
 		<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'FS')" id="tab FS">Future Societies</button>
 	</div>
 
-	<div id="Upgrades" class="tabcontent">
+	<div id="Upgrades" class="tab-content">
 		<div class="content">
 			<<set _T1 = App.SF.unlocked.secondTier()>>
 			Total upgrade progress: <<print App.SF.progress(_size,_max)>> _size/_max(<<print (_size/_max).toFixed(2)*100>>%) <<if _size < 30>> <br>//<<print (30-_size)>> more upgrades is needed until the next tier unlocks.// <</if>>
@@ -50,7 +50,7 @@
 		</div>
 	</div>
 
-	<div id="Actions" class="tabcontent">
+	<div id="Actions" class="tab-content">
 		<div class="content">
 			<<if $SF.MercCon.CanAttend === 0 || $SF.MercCon.History >= 1 && ((Math.trunc($week/24) === ($week/24)) && $SF.MercCon.CanAttend === -1)>>
 				Her expression changes as something jogs her memory. "Before we begin <<if $SF.Colonel.Core == "brazen">><<= properTitle()>><<else>>boss<</if>>
@@ -106,7 +106,7 @@
 		</div>
 	</div>
 
-	<div id="FS" class="tabcontent">
+	<div id="FS" class="tab-content">
 		<div class="content"> <<= App.SF.fsIntegration()>> </div>
 	</div>
 <</if>>
\ No newline at end of file
diff --git a/src/events/intro/introSummary.tw b/src/events/intro/introSummary.tw
index 6e7d6740207..f0a64a14c38 100644
--- a/src/events/intro/introSummary.tw
+++ b/src/events/intro/introSummary.tw
@@ -104,7 +104,7 @@ You may review your settings before clicking "Continue" to begin.<br>
 	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'UI')" id="tab UI">UI</button>
 </div>
 
-<div id="UI" class="tabcontent">
+<div id="UI" class="tab-content">
 	<div class="content">
 
 	<<set _options = new App.UI.OptionsGroup()>>
@@ -182,7 +182,7 @@ You may review your settings before clicking "Continue" to begin.<br>
 	</div>
 </div>
 
-<div id="World" class="tabcontent">
+<div id="World" class="tab-content">
 	<div class="content">
 
 	<h2>Economy</h2>
@@ -366,7 +366,7 @@ You may review your settings before clicking "Continue" to begin.<br>
 	</div>
 </div>
 
-<div id="slaves" class="tabcontent">
+<div id="slaves" class="tab-content">
 	<div class="content">
 
 	<<set _options = new App.UI.OptionsGroup()>>
@@ -454,7 +454,7 @@ You may review your settings before clicking "Continue" to begin.<br>
 	</div>
 </div>
 
-<div id="PC" class="tabcontent">
+<div id="PC" class="tab-content">
 	<div class="content">
 
 	<<set _options = new App.UI.OptionsGroup()>>
diff --git a/src/facilities/nursery/nursery.tw b/src/facilities/nursery/nursery.tw
index 4d6636dd9a8..865b94b3d5d 100644
--- a/src/facilities/nursery/nursery.tw
+++ b/src/facilities/nursery/nursery.tw
@@ -103,7 +103,7 @@
 </div>
 
 /*
-<div id="nannies" class="tabcontent">
+<div id="nannies" class="tab-content">
 	<div id="content">
 	*/
 		<<set _Tmult0 = Math.trunc($nurseryNannies*1000*$upgradeMultiplierArcology)>>
@@ -157,7 +157,7 @@
 </div>
 */
 
-<div id="pregnantSlaves" class="tabcontent">
+<div id="pregnantSlaves" class="tab-content">
 	<div id="content">
 		<br><br>
 		Reserve an eligible mother-to-be's child to be placed in a room upon birth. Of $nursery rooms, <<print _freecribs>> <<if _freecribs == 1>>is<<else>>are<</if>> unoccupied. Of those, $reservedChildrenNursery room<<if $reservedChildrenNursery == 1>> is<<else>>s are<</if>> reserved.
@@ -290,7 +290,7 @@
 	</div>
 </div>
 
-<div id="children" class="tabcontent">
+<div id="children" class="tab-content">
 	<div id="content">
 		<p>
 			Target age for release: <<textbox "$targetAgeNursery" $targetAgeNursery "Nursery">>
diff --git a/src/gui/options/options.tw b/src/gui/options/options.tw
index e04ae581a80..47d65b942ae 100644
--- a/src/gui/options/options.tw
+++ b/src/gui/options/options.tw
@@ -77,7 +77,7 @@
 	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Experimental')" id="tab Experimental">Experimental</button>
 </div>
 
-<div id="Display" class="tabcontent">
+<div id="Display" class="tab-content">
 	<div class="content">
 		<h2>Reports</h2>
 
@@ -262,7 +262,7 @@
 	</div>
 </div>
 
-<div id="CONTENT&FLAVOR" class="tabcontent">
+<div id="CONTENT&FLAVOR" class="tab-content">
 	<div class="content">
 		<h2>Content</h2>
 
@@ -384,7 +384,7 @@
 	</div>
 </div>
 
-<div id="MODS" class="tabcontent">
+<div id="MODS" class="tab-content">
 	<div class="content">
 		<<set _options = new App.UI.OptionsGroup()>>
 
@@ -608,7 +608,7 @@
 	</div>
 </div>
 
-<div id="DEBUG/CHEATING" class="tabcontent">
+<div id="DEBUG/CHEATING" class="tab-content">
 	<div class="content">
 		<h2>Debug</h2>
 
@@ -710,7 +710,7 @@
 	</div>
 </div>
 
-<div id="Experimental" class="tabcontent">
+<div id="Experimental" class="tab-content">
 	<div style="fontWeight:bold">
 		Experimental means just that: experimental. Options below are likely to be in an <span class="yellow">even more incomplete or broken state than usual.</span> <span class="red">THEY MAY NOT WORK AT ALL.</span> Make sure you back up your save before enabling any of these, and if you are that interested, consider helping to improve them.
 	</div>
diff --git a/src/interaction/policies/policies.tw b/src/interaction/policies/policies.tw
index 42e0b874f80..24176214ba7 100644
--- a/src/interaction/policies/policies.tw
+++ b/src/interaction/policies/policies.tw
@@ -36,7 +36,7 @@
 	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'SRP')" id="tab SRP">Slave Retirement Planning</button>
 </div>
 
-<div id="SMRs" class="tabcontent">
+<div id="SMRs" class="tab-content">
 	<div class="content">
 	<p class="scene-intro">
 		Slave Market Regulations (SMRs) will affect slaves that come through the official slave markets in your arcology. The markets themselves will bear the cost of these regulations, but the minimum practicable slave prices may rise as a result.
@@ -48,7 +48,7 @@
 	</div>
 </div>
 
-<div id="ST" class="tabcontent">
+<div id="ST" class="tab-content">
 	<div class="content">
 		<span id="SexualTrendsetting"></span>
 		<script>
@@ -57,7 +57,7 @@
 	</div>
 </div>
 
-<div id="Population" class="tabcontent">
+<div id="Population" class="tab-content">
 	<div class="content">
 
 		<h1>Population</h1>
@@ -75,7 +75,7 @@
 	</div>
 </div>
 
-<div id="Education" class="tabcontent">
+<div id="Education" class="tab-content">
 	<div class="content">
 		<<if $schoolSuggestion == 0>>
 			<p>
@@ -89,7 +89,7 @@
 	</div>
 </div>
 
-<div id="SRP" class="tabcontent">
+<div id="SRP" class="tab-content">
 	<div class="content">
 		<<if $policies.retirement.customAgePolicy == 0 && $policies.retirement.physicalAgePolicy == 0>>
 			<br>''Default Retirement Age:'' in the absence of a defined slave retirement age, slaves will not remain sex slaves after reaching age $retirementAge.
@@ -109,7 +109,7 @@
 	</div>
 </div>
 
-<div id="FS" class="tabcontent">
+<div id="FS" class="tab-content">
 	<div class="content">
 		<span id="FutureSocietiesTab"></span>
 		<script>
diff --git a/src/js/rulesAssistantOptions.js b/src/js/rulesAssistantOptions.js
index ee6a875b4b8..1bfef6859f4 100644
--- a/src/js/rulesAssistantOptions.js
+++ b/src/js/rulesAssistantOptions.js
@@ -204,7 +204,7 @@ globalThis.rulesAssistantOptions = (function() {
 		render(name) {
 			const tab = document.createElement("div");
 			tab.id = name;
-			tab.className = "tabcontent";
+			tab.className = "tab-content";
 
 			this.tabContent_ = document.createElement("div");
 			this.tabContent_.classList.add("content");
diff --git a/src/js/utilsSC.js b/src/js/utilsSC.js
index c424d660b07..fbdb8c98615 100644
--- a/src/js/utilsSC.js
+++ b/src/js/utilsSC.js
@@ -156,7 +156,7 @@ App.UI.tabbar = function() {
 
 	function openTab(evt, tabName) {
 		/* var passage = passage().trim().replace(/ /g,"+");*/
-		const tabcontent = document.getElementsByClassName("tabcontent");
+		const tabcontent = document.getElementsByClassName("tab-content");
 		for (let i = 0; i < tabcontent.length; i++) {
 			tabcontent[i].style.display = "none";
 		}
@@ -212,7 +212,7 @@ App.UI.tabbar = function() {
 	 * @returns {string}
 	 */
 	function makeTab(name, content) {
-		return `<div id="${name}" class="tabcontent"><div class="content">${content}</div></div>`;
+		return `<div id="${name}" class="tab-content"><div class="content">${content}</div></div>`;
 	}
 
 	/**
@@ -223,7 +223,7 @@ App.UI.tabbar = function() {
 	function makeTabDOM(name, content) {
 		const outerDiv = document.createElement("div");
 		outerDiv.id = name;
-		outerDiv.classList.add("tabcontent");
+		outerDiv.classList.add("tab-content");
 		const innerDiv = document.createElement("div");
 		innerDiv.classList.add("content");
 		innerDiv.append(content);
diff --git a/src/npc/slaveStats.tw b/src/npc/slaveStats.tw
index d07ae3a36e6..0b081889179 100644
--- a/src/npc/slaveStats.tw
+++ b/src/npc/slaveStats.tw
@@ -81,7 +81,7 @@ Income: <<= num($activeSlave.lastWeeksRepIncome)>>
 	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Misc')" id="tab Misc">Misc</button>
 </div>
 
-<div id="Skills" class="tabcontent">
+<div id="Skills" class="tab-content">
 	<div class="content">
 			Vaginal: $activeSlave.skill.vaginal,
 			<br>Oral: $activeSlave.skill.oral,
@@ -113,7 +113,7 @@ Income: <<= num($activeSlave.lastWeeksRepIncome)>>
 	</div>
 </div>
 
-<div id="Mental" class="tabcontent">
+<div id="Mental" class="tab-content">
 	<div class="content">
 		Intelligence: $activeSlave.intelligence
 		<br>Attraction:
@@ -143,7 +143,7 @@ Income: <<= num($activeSlave.lastWeeksRepIncome)>>
 	</div>
 </div>
 
-<div id="Body" class="tabcontent">
+<div id="Body" class="tab-content">
 	<div class="content">
 		Health: $activeSlave.health.health,
 		Condition: $activeSlave.health.condition,
@@ -338,7 +338,7 @@ Income: <<= num($activeSlave.lastWeeksRepIncome)>>
 	</div>
 </div>
 
-<div id="Porn" class="tabcontent">
+<div id="Porn" class="tab-content">
 	<div class="content">
 		Focus: $activeSlave.porn.focus,
 		Feed: $activeSlave.porn.feed
@@ -396,7 +396,7 @@ Income: <<= num($activeSlave.lastWeeksRepIncome)>>
 	</div>
 </div>
 
-<div id="Implants_Piercings_Tattoos" class="tabcontent">
+<div id="Implants_Piercings_Tattoos" class="tab-content">
 	<div class="content">
 
 		<h2>Implants</h2>
@@ -449,7 +449,7 @@ Income: <<= num($activeSlave.lastWeeksRepIncome)>>
 	</div>
 </div>
 
-<div id="Family" class="tabcontent">
+<div id="Family" class="tab-content">
 	<div class="content">
 		Genes: $activeSlave.genes
 		<br><br>BirthName: $activeSlave.birthName,
@@ -511,7 +511,7 @@ Income: <<= num($activeSlave.lastWeeksRepIncome)>>
 	</div>
 </div>
 
-<div id="Misc" class="tabcontent">
+<div id="Misc" class="tab-content">
 	<div class="content">
 		<br>Deadliness <<print Deadliness($activeSlave)>>
 		<br>Count: Penetrative: $activeSlave.counter.penetrative,
diff --git a/src/npc/startingGirls/startingGirls.tw b/src/npc/startingGirls/startingGirls.tw
index 15845de1eb7..b4a7b215c4d 100644
--- a/src/npc/startingGirls/startingGirls.tw
+++ b/src/npc/startingGirls/startingGirls.tw
@@ -380,7 +380,7 @@
 
 <<setLocalPronouns $activeSlave>>
 
-<div id="Overview" class="tabcontent">
+<div id="Overview" class="tab-content">
 	<div class="content">
 
 	<<set _options = new App.UI.OptionsGroup()>>
@@ -514,7 +514,7 @@
 	</div>
 </div>
 
-<div id="Physical" class="tabcontent">
+<div id="Physical" class="tab-content">
 	<div class="content">
 
 	<<set _options = new App.UI.OptionsGroup()>>
@@ -881,7 +881,7 @@
 	</div>
 </div>
 
-<div id="Mental" class="tabcontent">
+<div id="Mental" class="tab-content">
 	<div class="content">
 
 	<<set _options = new App.UI.OptionsGroup()>>
@@ -975,7 +975,7 @@
 	</div>
 </div>
 
-<div id="Skills" class="tabcontent">
+<div id="Skills" class="tab-content">
 	<div class="content">
 	<<set _options = new App.UI.OptionsGroup()>>
 
@@ -1047,13 +1047,13 @@
 	</div>
 </div>
 
-<div id="Family" class="tabcontent">
+<div id="Family" class="tab-content">
 	<div class="content">
 	<<editFamily>>
 	</div>
 </div>
 
-<div id="Customization" class="tabcontent">
+<div id="Customization" class="tab-content">
 	<div class="content">
 
 	''Birth name:'' <<textbox "$activeSlave.birthName" $activeSlave.birthName "Starting Girls">>
@@ -1168,7 +1168,7 @@
 	</div>
 </div>
 
-<div id="assignRemove" class="tabcontent">
+<div id="assignRemove" class="tab-content">
 	<div class="content">
 
 	<<if $cash >= _slaveCost>>
diff --git a/src/personalAssistant/assistantOptions.tw b/src/personalAssistant/assistantOptions.tw
index d7a2fa55d62..23ce35ebf83 100644
--- a/src/personalAssistant/assistantOptions.tw
+++ b/src/personalAssistant/assistantOptions.tw
@@ -38,7 +38,7 @@ Seated at your desk, you glance at the visual representation of
 	<</if>>
 </div>
 
-<div id="upgrades" class="tabcontent">
+<div id="upgrades" class="tab-content">
 <div class="content">
 	<<if $assistant.power == 0>>
 		The first upgrade needed is a switch to a holographic memory core to store the immense quantity of data $assistant.name gathers.
@@ -58,7 +58,7 @@ Seated at your desk, you glance at the visual representation of
 </div>
 </div>
 
-<div id="settings" class="tabcontent">
+<div id="settings" class="tab-content">
 <div class="content">
 	<h3>Behavior:</h3>
 	<<if $assistant.personality == 0>>
@@ -112,7 +112,7 @@ Seated at your desk, you glance at the visual representation of
 </div>
 </div>
 
-<div id="appearance" class="tabcontent">
+<div id="appearance" class="tab-content">
 <div class="content">
 	_HeA is currently using the ''$assistant.appearance'' avatar, which <<set _seed = []>>
 	<<if $policies.publicPA == 1>>
diff --git a/src/uncategorized/economics.tw b/src/uncategorized/economics.tw
index 43fd40fe338..8d11781d0af 100644
--- a/src/uncategorized/economics.tw
+++ b/src/uncategorized/economics.tw
@@ -68,20 +68,20 @@
 	<</if>>
 </div>
 
-<div id="Arcologies" class="tabcontent">
+<div id="Arcologies" class="tab-content">
 	<div class="content">
 		<<include "Neighbors Development">>
 	</div>
 </div>
 
-<div id="Management" class="tabcontent">
+<div id="Management" class="tab-content">
 	<div class="content">
 		<<include "Arcology Management">>
 	</div>
 </div>
 
 <<if $FSAnnounced > 0>>
-	<div id="Societies" class="tabcontent">
+	<div id="Societies" class="tab-content">
 		<div class="content">
 			<<include "FS Developments">>
 		</div>
@@ -89,7 +89,7 @@
 <</if>>
 
 <<if $corp.Incorporated == 1>>
-	<div id="Corporation" class="tabcontent">
+	<div id="Corporation" class="tab-content">
 		<div class="content">
 			<<include "Corporation Developments">>
 		</div>
@@ -97,33 +97,33 @@
 <</if>>
 
 <<if $secExpEnabled > 0>>
-	<div id="Authority" class="tabcontent">
+	<div id="Authority" class="tab-content">
 		<div class="content">
 			<<include "authorityReport">>
 		</div>
 	</div>
 
-	<div id="securityReport" class="tabcontent">
+	<div id="securityReport" class="tab-content">
 		<div class="content">
 			<<include "securityReport">>
 		</div>
 	</div>
 <</if>>
 
-<div id="Reputation" class="tabcontent">
+<div id="Reputation" class="tab-content">
 	<div class="content">
 		<<include "Reputation">>
 	</div>
 </div>
 
-<div id="Business" class="tabcontent">
+<div id="Business" class="tab-content">
 	<div class="content">
 		<<include "Personal Business">>
 	</div>
 </div>
 
 <<if $PC.boobs >= 1000 || $PC.pregKnown == 1 || $playerAging != 0>>
-	<div id="Personal" class="tabcontent">
+	<div id="Personal" class="tab-content">
 		<div class="content">
 			<<include "Personal Notes">>
 		</div>
diff --git a/src/uncategorized/remoteSurgery.tw b/src/uncategorized/remoteSurgery.tw
index fb5f73c654b..5161d44f52a 100644
--- a/src/uncategorized/remoteSurgery.tw
+++ b/src/uncategorized/remoteSurgery.tw
@@ -71,7 +71,7 @@
 	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'ExtremeSurgery')" id="tab ExtremeSurgery">Extreme Surgery</button>
 </div>
 
-<div id="hairFace" class="tabcontent">
+<div id="hairFace" class="tab-content">
 <div class="content">
 	/* 000-250-006 */
 	<<if $seeImages == 1>>
@@ -767,7 +767,7 @@
 	</div>
 </div>
 
-<div id="upper" class="tabcontent">
+<div id="upper" class="tab-content">
 	<div class="content">
 		/* 000-250-006 */
 		<<if $seeImages == 1>>
@@ -1214,7 +1214,7 @@
 	</div>
 </div>
 
-<div id="lower" class="tabcontent">
+<div id="lower" class="tab-content">
 	<div class="content">
 		/* 000-250-006 */
 		<<if $seeImages == 1>>
@@ -1740,7 +1740,7 @@
 	</div>
 </div>
 
-<div id="Race" class="tabcontent">
+<div id="Race" class="tab-content">
 	<div class="content">
 		/* 000-250-006 */
 		<<if $seeImages == 1>>
@@ -1800,7 +1800,7 @@
 	</div>
 </div>
 
-<div id="Structural" class="tabcontent">
+<div id="Structural" class="tab-content">
 	<div class="content">
 		/* 000-250-006 */
 		<<if $seeImages == 1>>
@@ -2309,7 +2309,7 @@
 	</div>
 </div>
 
-<div id="ExtremeSurgery" class="tabcontent">
+<div id="ExtremeSurgery" class="tab-content">
 	<div class="content">
 		/* 000-250-006 */
 		<<if $seeImages == 1>>
diff --git a/src/uncategorized/slaveInteract.tw b/src/uncategorized/slaveInteract.tw
index b1e4f5796a8..e86ebaeee27 100644
--- a/src/uncategorized/slaveInteract.tw
+++ b/src/uncategorized/slaveInteract.tw
@@ -102,7 +102,7 @@
 	<</if>>
 </div>
 
-<div id="Description" class="tabcontent">
+<div id="Description" class="tab-content">
 	<div class="content">
 		<<if $seeDetails == 1>>
 			<div style="font-style:italic">
@@ -132,7 +132,7 @@
 	</div>
 </div>
 
-<div id="Modify" class="tabcontent">
+<div id="Modify" class="tab-content">
 	<div class="content">
 		<p id="modifySection"></p>
 		<script>
@@ -142,7 +142,7 @@
 </div>
 
 
-<div id="Work" class="tabcontent">
+<div id="Work" class="tab-content">
 	<div class="content">
 		<p id="work"></p>
 		<script>
@@ -151,7 +151,7 @@
 	</div>
 </div>
 
-<div id="Appearance" class="tabcontent">
+<div id="Appearance" class="tab-content">
 	<div class="content">
 		<p>
 			<span id="clothes"></span>
@@ -211,7 +211,7 @@
 	</div>
 </div>
 
-<div id="PhysicalRegimen" class="tabcontent">
+<div id="PhysicalRegimen" class="tab-content">
 	<div class="content">
 		<p>
 			<span id="drugs"></span>
@@ -257,14 +257,14 @@
 	</div>
 </div>
 
-<div id="Rules" class="tabcontent">
+<div id="Rules" class="tab-content">
 	<div class="content">
 		<span id="rules"></span>
 		<script>App.UI.SlaveInteract.rules(getSlave(V.activeSlave.ID))</script>
 	</div>
 </div>
 
-<div id="Financial" class="tabcontent">
+<div id="Financial" class="tab-content">
 	<div class="content">
 
 		<<if $studio == 1>>
@@ -361,7 +361,7 @@
 	</div>
 </div>
 
-<div id="Customize" class="tabcontent">
+<div id="Customize" class="tab-content">
 	<div class="content">
 		<span id="custom"></span>
 		<script>App.UI.SlaveInteract.custom(getSlave(V.activeSlave.ID))</script>
@@ -370,7 +370,7 @@
 	</div>
 </div>
 
-<div id="FamilyTab" class="tabcontent">
+<div id="FamilyTab" class="tab-content">
 	<div class="content">
 		<p id="family">
 			<div id="familyTree"></div>
diff --git a/src/uncategorized/underperformingSlaves.tw b/src/uncategorized/underperformingSlaves.tw
index 5fc39bb79b8..059bd272be4 100644
--- a/src/uncategorized/underperformingSlaves.tw
+++ b/src/uncategorized/underperformingSlaves.tw
@@ -25,13 +25,13 @@
 	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'expensive')" id="tab expensive">Costing vs earning</button>
 </div>
 
-<div id="highSale" class="tabcontent">
+<div id="highSale" class="tab-content">
 	<div class="content">
 		<<includeDOM App.Underperformers.highSale()>>
 	</div>
 </div>
 
-<div id="expensive" class="tabcontent">
+<div id="expensive" class="tab-content">
 	<div class="content">
 		<<includeDOM App.Underperformers.expensive()>>
 	</div>
-- 
GitLab