From e35b7ad0c9b18f841c3790e3b9642b0a56410fb7 Mon Sep 17 00:00:00 2001
From: ezsh <ezsh.junk@gmail.com>
Date: Wed, 12 Aug 2020 02:33:19 +0200
Subject: [PATCH] Revert "tab id"

This reverts commit 91a71505692ccf1602e12dcbed0cd3526be84366.
---
 src/003-assets/CSS/tabs.css                | 26 +++++------
 src/Mods/SecExp/attackOptions.tw           | 22 ++++-----
 src/Mods/SecExp/buildings/secBarracks.tw   | 24 +++++-----
 src/Mods/SpecialForce/Firebase.tw          | 16 +++----
 src/events/intro/introSummary.tw           | 20 ++++-----
 src/facilities/nursery/nursery.tw          | 14 +++---
 src/gui/multipleInspect.js                 | 14 +++---
 src/gui/options/options.tw                 | 26 +++++------
 src/interaction/policies/policies.tw       | 28 ++++++------
 src/js/rulesAssistantOptions.js            | 10 ++---
 src/js/slaveListing.js                     | 52 +++++++++++-----------
 src/js/utilsSC.js                          | 26 +++++------
 src/npc/slaveStats.tw                      | 30 ++++++-------
 src/npc/startingGirls/startingGirls.tw     | 34 +++++++-------
 src/personalAssistant/assistantOptions.tw  | 16 +++----
 src/uncategorized/economics.tw             | 38 ++++++++--------
 src/uncategorized/remoteSurgery.tw         | 28 ++++++------
 src/uncategorized/slaveInteract.tw         | 40 ++++++++---------
 src/uncategorized/underperformingSlaves.tw | 12 ++---
 19 files changed, 238 insertions(+), 238 deletions(-)

diff --git a/src/003-assets/CSS/tabs.css b/src/003-assets/CSS/tabs.css
index 6c36900026a..9f857f236db 100644
--- a/src/003-assets/CSS/tabs.css
+++ b/src/003-assets/CSS/tabs.css
@@ -1,8 +1,8 @@
-div.tabBar {
+div.tabbar {
 	overflow: hidden;
 }
 
-div.tabBar button {
+div.tabbar button {
 	background-color: var(--button-color);
 	border: solid 2px var(--button-color);
 	color: var(--link-color);
@@ -14,58 +14,58 @@ div.tabBar button {
 	font-size: large;
 }
 
-div.tabBar button.card {
+div.tabbar button.card {
 	border-top-left-radius: 15px;
 	border-top-right-radius: 15px;
 	border: none;
 }
 
-div.tabBar button.card.active {
+div.tabbar button.card.active {
 	background-color: #1a1a1a;
 }
 
-div.tabBar button:hover {
+div.tabbar button:hover {
 	background-color: var(--button-hover-color);
 }
 
-div.tabBar button.active {
+div.tabbar button.active {
 	background-color: var(--button-selected-color);
 	color: #c7cedf;
 }
 
-div.tabBar button.show-warning { /* dumb name, but warning and error already exist */
+div.tabbar button.show-warning { /* dumb name, but warning and error already exist */
 	background-color: #b30000;
 	border-color: #b30000;
 }
 
-div.tabBar button.show-warning:hover {
+div.tabbar button.show-warning:hover {
 	background-color: #e60000
 }
 
-div.tabBar button.show-warning.active {
+div.tabbar button.show-warning.active {
 	background-color: #4d0000;
 }
 
-div.tabBar a.active {
+div.tabbar a.active {
 	color: white;
 	pointer-events: none;
 	cursor: default;
 }
 
-.tabContent:not(.noFade) {
+.tabcontent:not(.noFade) {
 	display: none;
 	padding: 6px 12px;
 	-webkit-animation: fadeEffect 0.3s;
 	animation: fadeEffect 0.3s;
 }
 
-.tabContent.card {
+.tabcontent.card {
 	border-radius: 0 8px 8px 8px;
 	background-color: #1a1a1a;
 	border: 0;
 }
 
-.tabContent.card .slaveSummary.card {
+.tabcontent.card .slaveSummary.card {
 	background-color: #252525;
 }
 
diff --git a/src/Mods/SecExp/attackOptions.tw b/src/Mods/SecExp/attackOptions.tw
index 8035e16a72b..fb5a5c45209 100644
--- a/src/Mods/SecExp/attackOptions.tw
+++ b/src/Mods/SecExp/attackOptions.tw
@@ -216,10 +216,10 @@ approximately <strong><<print _estimatedMen>> men</strong> are coming, they seem
 	<</link>>
 <</if>>
 <br>For this battle you choose to follow <span id="tactic"><strong><<print $chosenTactic>></strong></span> tactics.<br>
-<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>
+<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="tabcontent">
 	<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="tabcontent">
 	<div class="content">
 		<<link "Blitzkrieg">>
 			<<set $chosenTactic = "Blitzkrieg">>
@@ -407,7 +407,7 @@ approximately <strong><<print _estimatedMen>> men</strong> are coming, they seem
 <<set _sL = $slaveUnits.length>>
 <<set _meL = $mercUnits.length>>
 
-<<run App.UI.tabBar.handlePreSelectedTab($tabChoice.Options)>>
+<<run App.UI.tabbar.handlePreSelectedTab($tabChoice.Options)>>
 
 <<if App.SecExp.battle.deployableUnits() === 0>> <strong>Unit roster full.</strong> <</if>>
 <<if $secBots.active == 1 && $secBots.troops > 0>>
@@ -424,16 +424,16 @@ approximately <strong><<print _estimatedMen>> men</strong> are coming, they seem
 	<br><br>
 <</if>>
 <<if $militiaUnits.length > 0>>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'militia')" id="tab militia">Militia: ($militiaUnits.length)</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'militia')" id="tab militia">Militia: ($militiaUnits.length)</button>
 <</if>>
 <<if $slaveUnits.length > 0>>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'slaves')" id="tab slaves">Slaves: ($slaveUnits.length)</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'slaves')" id="tab slaves">Slaves: ($slaveUnits.length)</button>
 <</if>>
 <<if $mercUnits.length > 0>>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'mercs')" id="tab mercs">Mercs: ($mercUnits.length)</button>
+	<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="tabcontent">
 	<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="tabcontent">
 	<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="tabcontent">
 	<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 4aace71bced..88ef6a443e0 100644
--- a/src/Mods/SecExp/buildings/secBarracks.tw
+++ b/src/Mods/SecExp/buildings/secBarracks.tw
@@ -138,20 +138,20 @@ Your current maximum number of units is <<print App.SecExp.battle.maxUnits()>> (
 <<if $mercenaries === 0>>
 	<br>Mercenaries are not allowed inside the arcology. You will not be able to recruit mercenary units.
 <</if>>
-<div class="tabBar">
+<div class="tabbar">
 	<<if $arcologyUpgrade.drones == 1>>
-		<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Bots')" id="tab Bots">Security Drones</button>
+		<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Bots')" id="tab Bots">Security Drones</button>
 	<</if>>
 	<<if $SecExp.edicts.defense.militia >= 1>>
-		<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Militia')" id="tab Militia">Militia: ($militiaUnits.length)</button>
+		<button class="tablinks" onclick="App.UI.tabBar.openTab(event, 'Militia')" id="tab Militia">Militia: ($militiaUnits.length)</button>
 	<</if>>
 	<<if $mercenaries >= 1>>
-		<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Mercs')" id="tab Mercs">Mercenaries: ($mercUnits.length)</button>
+		<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Mercs')" id="tab Mercs">Mercenaries: ($mercUnits.length)</button>
 	<</if>>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Slaves')" id="tab Slaves">Slaves: ($slaveUnits.length)</button>
+	<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">
+<<run App.UI.tabbar.handlePreSelectedTab($tabChoice.secBarracks)>>
+<div id="Bots" class="tabcontent">
 	<div class="content">
 		<<set _secBotsCost = 500, _secBotsUpgradeCost = 250>>
 		<<= App.SecExp.getUnit("Bots").describe()>> <br>
@@ -211,10 +211,10 @@ Your current maximum number of units is <<print App.SecExp.battle.maxUnits()>> (
 		<</if>>
 	</div>
 </div>
-<div id="Slaves" class="tabContent">
+<div id="Slaves" class="tabcontent">
 	<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()>> 
+		<<if $menials > 0 && App.SecExp.battle.activeUnits() < App.SecExp.battle.maxUnits()>>
 			<<link "Form a new unit" "secBarracks">>
 				<<set $slaveUnits.push(App.SecExp.generateUnit("slaves"))>>
 			<</link>>
@@ -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="tabcontent">
 	<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="tabcontent">
 	<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.
@@ -434,4 +434,4 @@ Your current maximum number of units is <<print App.SecExp.battle.maxUnits()>> (
 			<</capture>>
 		<</for>>
 	</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/Mods/SpecialForce/Firebase.tw b/src/Mods/SpecialForce/Firebase.tw
index 4f800d27ae7..68e85c00ecc 100644
--- a/src/Mods/SpecialForce/Firebase.tw
+++ b/src/Mods/SpecialForce/Firebase.tw
@@ -27,16 +27,16 @@
 	<</if>>
 	<<if $SF.FS.Tension !== -1>> The Colonel's current Tension: $SF.FS.Tension<</if>>
 
-	<<run App.UI.tabBar.handlePreSelectedTab($tabChoice.Firebase)>>
-	<div class="tabBar">
+	<<run App.UI.tabbar.handlePreSelectedTab($tabChoice.Firebase)>>
+	<div class="tabbar">
 		<<if _size !== _max>>
-			<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Upgrades')" id="tab Upgrades">Upgrades</button>
+			<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Upgrades')" id="tab Upgrades">Upgrades</button>
 		<</if>>
-		<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Actions')" id="tab Actions">Actions</button>
-		<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'FS')" id="tab FS">Future Societies</button>
+		<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Actions')" id="tab Actions">Actions</button>
+		<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="tabcontent">
 		<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="tabcontent">
 		<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="tabcontent">
 		<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 cdee2894d68..35225adac6b 100644
--- a/src/events/intro/introSummary.tw
+++ b/src/events/intro/introSummary.tw
@@ -95,16 +95,16 @@ You may review your settings before clicking "Continue" to begin.<br>
 
 <br><br>
 
-<<run App.UI.tabBar.handlePreSelectedTab($tabChoice.IntroSummary)>>
+<<run App.UI.tabbar.handlePreSelectedTab($tabChoice.IntroSummary)>>
 
-<div class="tabBar">
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'World')" id="tab World">World</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'slaves')" id="tab slaves">Slaves</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'PC')" id="tab PC">Player Character</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'UI')" id="tab UI">UI</button>
+<div class="tabbar">
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'World')" id="tab World">World</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'slaves')" id="tab slaves">Slaves</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'PC')" id="tab PC">Player Character</button>
+	<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="tabcontent">
 	<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="tabcontent">
 	<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="tabcontent">
 	<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="tabcontent">
 	<div class="content">
 
 	<<set _options = new App.UI.OptionsGroup()>>
diff --git a/src/facilities/nursery/nursery.tw b/src/facilities/nursery/nursery.tw
index 477f620e7b5..ccba47ae1b2 100644
--- a/src/facilities/nursery/nursery.tw
+++ b/src/facilities/nursery/nursery.tw
@@ -97,14 +97,14 @@
 	<</if>>
 </p>
 
-<div class="tabBar">
-	/* <button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'nannies')" id="tab nannies">Nannies</button> */
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'pregnantSlaves')" id="tab pregnantSlaves">Pregnant Slaves</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'children')" id="tab children">Children</button>
+<div class="tabbar">
+	/* <button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'nannies')" id="tab nannies">Nannies</button> */
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'pregnantSlaves')" id="tab pregnantSlaves">Pregnant Slaves</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'children')" id="tab children">Children</button>
 </div>
 
 /*
-<div id="nannies" class="tabContent">
+<div id="nannies" class="tabcontent">
 	<div id="content">
 	*/
 		<<set _Tmult0 = Math.trunc($nurseryNannies*1000*$upgradeMultiplierArcology)>>
@@ -158,7 +158,7 @@
 </div>
 */
 
-<div id="pregnantSlaves" class="tabContent">
+<div id="pregnantSlaves" class="tabcontent">
 	<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.
@@ -291,7 +291,7 @@
 	</div>
 </div>
 
-<div id="children" class="tabContent">
+<div id="children" class="tabcontent">
 	<div id="content">
 		<p>
 			Target age for release: <<textbox "$targetAgeNursery" $targetAgeNursery "Nursery">>
diff --git a/src/gui/multipleInspect.js b/src/gui/multipleInspect.js
index 4f271ad856d..552529e88e7 100644
--- a/src/gui/multipleInspect.js
+++ b/src/gui/multipleInspect.js
@@ -9,25 +9,25 @@ App.UI.MultipleInspect = (function() {
 	 */
 	function MultipleInspectDOM(slaves, showFamilyTree, market) {
 		const frag = document.createDocumentFragment();
-		const tabBar = App.UI.DOM.appendNewElement("div", frag, "", "tabBar");
+		const tabbar = App.UI.DOM.appendNewElement("div", frag, "", "tabbar");
 
 		for (const slave of slaves) {
-			tabBar.append(App.UI.tabBar.tabButtonDOM(`slave${slave.ID}`, slave.slaveName));
-			frag.append(App.UI.tabBar.makeTabDOM(`slave${slave.ID}`, App.Desc.longSlave(slave, {market: market})));
+			tabbar.append(App.UI.tabbar.tabButtonDOM(`slave${slave.ID}`, slave.slaveName));
+			frag.append(App.UI.tabbar.makeTabDOM(`slave${slave.ID}`, App.Desc.longSlave(slave, {market: market})));
 		}
 
 		if (slaves.length > 1 && showFamilyTree) {
-			const button = App.UI.tabBar.tabButtonDOM(`familyTreeTab`, "Family Tree");
+			const button = App.UI.tabbar.tabButtonDOM(`familyTreeTab`, "Family Tree");
 			button.addEventListener('click', event => {
 				renderFamilyTree(slaves, slaves[0].ID);
 			});
-			tabBar.append(button);
+			tabbar.append(button);
 			const ftTarget = document.createElement("div");
 			ftTarget.setAttribute("id", "familyTree");
-			frag.append(App.UI.tabBar.makeTabDOM(`familyTreeTab`, ftTarget));
+			frag.append(App.UI.tabbar.makeTabDOM(`familyTreeTab`, ftTarget));
 		}
 
-		App.UI.tabBar.handlePreSelectedTab(`slave${slaves[0].ID}`);
+		App.UI.tabbar.handlePreSelectedTab(`slave${slaves[0].ID}`);
 
 		return frag;
 	}
diff --git a/src/gui/options/options.tw b/src/gui/options/options.tw
index 4a0ba2cf5dd..928a523ac5d 100644
--- a/src/gui/options/options.tw
+++ b/src/gui/options/options.tw
@@ -67,17 +67,17 @@
 <</if>>
 <br>
 
-<<run App.UI.tabBar.handlePreSelectedTab($tabChoice.Options)>>
-
-<div class="tabBar">
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Display')" id="tab Display">Display</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'CONTENT&FLAVOR')" id="tab CONTENT&FLAVOR">Content & flavour</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'MODS')" id="tab MODS">Mods</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'DEBUG/CHEATING')" id="tab DEBUG/CHEATING">Debug/cheating</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Experimental')" id="tab Experimental">Experimental</button>
+<<run App.UI.tabbar.handlePreSelectedTab($tabChoice.Options)>>
+
+<div class="tabbar">
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Display')" id="tab Display">Display</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'CONTENT&FLAVOR')" id="tab CONTENT&FLAVOR">Content & flavour</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'MODS')" id="tab MODS">Mods</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'DEBUG/CHEATING')" id="tab DEBUG/CHEATING">Debug/cheating</button>
+	<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="tabcontent">
 	<div class="content">
 		<h2>Reports</h2>
 
@@ -262,7 +262,7 @@
 	</div>
 </div>
 
-<div id="CONTENT&FLAVOR" class="tabContent">
+<div id="CONTENT&FLAVOR" class="tabcontent">
 	<div class="content">
 		<h2>Content</h2>
 
@@ -384,7 +384,7 @@
 	</div>
 </div>
 
-<div id="MODS" class="tabContent">
+<div id="MODS" class="tabcontent">
 	<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="tabcontent">
 	<div class="content">
 		<h2>Debug</h2>
 
@@ -710,7 +710,7 @@
 	</div>
 </div>
 
-<div id="Experimental" class="tabContent">
+<div id="Experimental" class="tabcontent">
 	<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 b21e12d5a17..42e0b874f80 100644
--- a/src/interaction/policies/policies.tw
+++ b/src/interaction/policies/policies.tw
@@ -17,7 +17,7 @@
 <</if>>
 <<set $encyclopedia = "Future Societies">>
 
-<<run App.UI.tabBar.handlePreSelectedTab($tabChoice.policies)>>
+<<run App.UI.tabbar.handlePreSelectedTab($tabChoice.policies)>>
 <p class="scene-intro">
 	Passing any law will cost <<print cashFormat(5000)>> and
 	<<if $rep >= 1000>>
@@ -27,16 +27,16 @@
 	<</if>>
 	More policies will become available as the arcology develops.
 </p>
-<div class="tabBar">
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'SMRs')" id="tab SMRs">Slave Market Regulations</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'ST')" id="tab ST">Sexual Trendsetting</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Population')" id="tab Population">Population & Domestic</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Education')" id="tab Education">Education</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'FS')" id="tab FS">Future Societies</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'SRP')" id="tab SRP">Slave Retirement Planning</button>
+<div class="tabbar">
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'SMRs')" id="tab SMRs">Slave Market Regulations</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'ST')" id="tab ST">Sexual Trendsetting</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Population')" id="tab Population">Population & Domestic</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Education')" id="tab Education">Education</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'FS')" id="tab FS">Future Societies</button>
+	<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="tabcontent">
 	<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="tabcontent">
 	<div class="content">
 		<span id="SexualTrendsetting"></span>
 		<script>
@@ -57,7 +57,7 @@
 	</div>
 </div>
 
-<div id="Population" class="tabContent">
+<div id="Population" class="tabcontent">
 	<div class="content">
 
 		<h1>Population</h1>
@@ -75,7 +75,7 @@
 	</div>
 </div>
 
-<div id="Education" class="tabContent">
+<div id="Education" class="tabcontent">
 	<div class="content">
 		<<if $schoolSuggestion == 0>>
 			<p>
@@ -89,7 +89,7 @@
 	</div>
 </div>
 
-<div id="SRP" class="tabContent">
+<div id="SRP" class="tabcontent">
 	<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="tabcontent">
 	<div class="content">
 		<span id="FutureSocietiesTab"></span>
 		<script>
diff --git a/src/js/rulesAssistantOptions.js b/src/js/rulesAssistantOptions.js
index 9358e30bddd..ee6a875b4b8 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 = "tabcontent";
 
 			this.tabContent_ = document.createElement("div");
 			this.tabContent_.classList.add("content");
@@ -222,10 +222,10 @@ globalThis.rulesAssistantOptions = (function() {
 
 		static makeTabButton(name, text) {
 			const btn = document.createElement("button");
-			btn.className = "tabLinks";
+			btn.className = "tablinks";
 			btn.id = `tab ${name}`;
 			btn.innerHTML = text;
-			btn.onclick = (event) => App.UI.tabBar.openTab(event, name);
+			btn.onclick = (event) => App.UI.tabbar.openTab(event, name);
 			return btn;
 		}
 	}
@@ -1072,7 +1072,7 @@ globalThis.rulesAssistantOptions = (function() {
 			this.appendChild(new RuleOptions(this));
 			this.appendChild(new ConditionEditor(this));
 			this.appendChild(new EffectEditor(this));
-			App.UI.tabBar.handlePreSelectedTab("appearance", true);
+			App.UI.tabbar.handlePreSelectedTab("appearance", true);
 		}
 
 		render(element) {
@@ -1574,7 +1574,7 @@ globalThis.rulesAssistantOptions = (function() {
 			const element = document.createElement("div");
 			element.className = "ra-setters";
 			this.tabButtons_ = document.createElement("div");
-			this.tabButtons_.className = "tabBar";
+			this.tabButtons_.className = "tabbar";
 			element.appendChild(this.tabButtons_);
 			return element;
 		}
diff --git a/src/js/slaveListing.js b/src/js/slaveListing.js
index a7b80b4b801..8052c5bd808 100644
--- a/src/js/slaveListing.js
+++ b/src/js/slaveListing.js
@@ -622,22 +622,22 @@ App.UI.SlaveList.listSJFacilitySlaves = function(facility, facilityPassage, show
 	if (V.sortSlavesMain) {
 		frag.append(this.sortingLinks(facilityPassage));
 	}
-	const tabBar = App.UI.DOM.appendNewElement("div", frag, '', "tabBar");
-	tabBar.append(
-		App.UI.tabBar.tabButtonDOM('assign', tabCaptions.assign),
-		App.UI.tabBar.tabButtonDOM('remove', tabCaptions.remove),
-		(showTransfersTab ? App.UI.tabBar.tabButtonDOM('transfer', tabCaptions.transfer) : '')
+	const tabbar = App.UI.DOM.appendNewElement("div", frag, '', "tabbar");
+	tabbar.append(
+		App.UI.tabbar.tabButtonDOM('assign', tabCaptions.assign),
+		App.UI.tabbar.tabButtonDOM('remove', tabCaptions.remove),
+		(showTransfersTab ? App.UI.tabbar.tabButtonDOM('transfer', tabCaptions.transfer) : '')
 	);
 
 	const facilitySlaves = [...job.employeesIDs()];
 	if (facilitySlaves.length > 0) {
 		SlaveSort.IDs(facilitySlaves);
-		frag.append(App.UI.tabBar.makeTabDOM("remove", App.UI.SlaveList.render(facilitySlaves, [],
+		frag.append(App.UI.tabbar.makeTabDOM("remove", App.UI.SlaveList.render(facilitySlaves, [],
 			App.UI.SlaveList.SlaveInteract.stdInteract,
 			(slave) => App.UI.DOM.link(`Retrieve ${getPronouns(slave).object} from ${facility.name}`, () => removeJob(slave, job.desc.assignment), [], facilityPassage)
 		)));
 	} else {
-		frag.append(App.UI.tabBar.makeTabDOM("remove", App.UI.DOM.makeElement("em", `${capFirstChar(facility.name)} is empty for the moment`)));
+		frag.append(App.UI.tabbar.makeTabDOM("remove", App.UI.DOM.makeElement("em", `${capFirstChar(facility.name)} is empty for the moment`)));
 	}
 
 	/**
@@ -664,9 +664,9 @@ App.UI.SlaveList.listSJFacilitySlaves = function(facility, facilityPassage, show
 		const assignableSlaveIDs = job.desc.partTime ?
 			V.slaves.map(slave => slave.ID) : // all slaves can work here
 			[...App.Entity.facilities.penthouse.employeesIDs()]; // only slaves from the penthouse can be transferred here
-		frag.append(App.UI.tabBar.makeTabDOM("assign", assignableTabContent(assignableSlaveIDs)));
+		frag.append(App.UI.tabbar.makeTabDOM("assign", assignableTabContent(assignableSlaveIDs)));
 	} else {
-		frag.append(App.UI.tabBar.makeTabDOM("assign", App.UI.DOM.makeElement("strong", `${capFirstChar(facility.name)} is full and cannot hold any more slaves`)));
+		frag.append(App.UI.tabbar.makeTabDOM("assign", App.UI.DOM.makeElement("strong", `${capFirstChar(facility.name)} is full and cannot hold any more slaves`)));
 	}
 
 	if (showTransfersTab) {
@@ -678,12 +678,12 @@ App.UI.SlaveList.listSJFacilitySlaves = function(facility, facilityPassage, show
 				}
 				return acc;
 			}, []);
-			frag.append(App.UI.tabBar.makeTabDOM("transfer", assignableTabContent(transferableIDs)));
+			frag.append(App.UI.tabbar.makeTabDOM("transfer", assignableTabContent(transferableIDs)));
 		} else {
-			frag.append(App.UI.tabBar.makeTabDOM("transfer", App.UI.DOM.makeElement("strong", `${capFirstChar(facility.name)} is full and cannot hold any more slaves`)));
+			frag.append(App.UI.tabbar.makeTabDOM("transfer", App.UI.DOM.makeElement("strong", `${capFirstChar(facility.name)} is full and cannot hold any more slaves`)));
 		}
 	}
-	App.UI.tabBar.handlePreSelectedTab();
+	App.UI.tabbar.handlePreSelectedTab();
 
 	return frag;
 };
@@ -710,10 +710,10 @@ App.UI.SlaveList.listNGPSlaves = function() {
 
 	const frag = document.createDocumentFragment();
 	frag.append(this.sortingLinks(thisPassage));
-	const tabBar = App.UI.DOM.appendNewElement("div", frag, '', "tabBar");
-	tabBar.append(
-		App.UI.tabBar.tabButtonDOM('assign', "Import a slave"),
-		App.UI.tabBar.tabButtonDOM('remove', "Remove from import")
+	const tabbar = App.UI.DOM.appendNewElement("div", frag, '', "tabbar");
+	tabbar.append(
+		App.UI.tabbar.tabButtonDOM('assign', "Import a slave"),
+		App.UI.tabbar.tabButtonDOM('remove', "Remove from import")
 	);
 
 	let imported = [];
@@ -732,25 +732,25 @@ App.UI.SlaveList.listNGPSlaves = function() {
 
 	if (imported.length > 0) {
 		SlaveSort.IDs(imported);
-		frag.append(App.UI.tabBar.makeTabDOM("remove", App.UI.SlaveList.render(imported, [],
+		frag.append(App.UI.tabbar.makeTabDOM("remove", App.UI.SlaveList.render(imported, [],
 			App.UI.SlaveList.makeNameDecorator(["emphasizedSlave", "pink"]),
 			(s) => App.UI.DOM.passageLink('Remove from import list', thisPassage, () => removeJob(s, Job.IMPORTED))
 		)));
 	} else {
-		frag.append(App.UI.tabBar.makeTabDOM("remove", App.UI.DOM.makeElement('em', "No slaves will go with you to the new game")));
+		frag.append(App.UI.tabbar.makeTabDOM("remove", App.UI.DOM.makeElement('em', "No slaves will go with you to the new game")));
 	}
 
 	if (imported.length < V.slavesToImportMax) {
 		SlaveSort.IDs(nonImported);
-		frag.append(App.UI.tabBar.makeTabDOM("assign", App.UI.SlaveList.render(nonImported, [],
+		frag.append(App.UI.tabbar.makeTabDOM("assign", App.UI.SlaveList.render(nonImported, [],
 			App.UI.SlaveList.makeNameDecorator(["emphasizedSlave", "pink"]),
 			(s) => App.UI.DOM.passageLink('Add to import list', thisPassage, () => assignJob(s, Job.IMPORTED))
 		)));
 	} else {
-		frag.append(App.UI.tabBar.makeTabDOM("assign", App.UI.DOM.makeElement('strong', `Slave import limit reached`)));
+		frag.append(App.UI.tabbar.makeTabDOM("assign", App.UI.DOM.makeElement('strong', `Slave import limit reached`)));
 	}
 
-	App.UI.tabBar.handlePreSelectedTab();
+	App.UI.tabbar.handlePreSelectedTab();
 	return frag;
 };
 
@@ -1032,16 +1032,16 @@ App.UI.SlaveList.penthousePage = function() {
 	}
 
 	const div = document.createElement("div");
-	div.classList.add("tabBar");
+	div.classList.add("tabbar");
 	if (V.useSlaveSummaryTabs === 0) {
 		const links = [];
 		for (const tab of tabs) {
-			links.push(App.UI.tabBar.tabButtonDOM(tab.tabName, tab.caption, true));
+			links.push(App.UI.tabbar.tabButtonDOM(tab.tabName, tab.caption, true));
 		}
 		div.append(App.UI.DOM.arrayToList(links, " | ", " | "));
 	} else {
 		for (const tab of tabs) {
-			const button = App.UI.tabBar.tabButtonDOM(tab.tabName, tab.caption);
+			const button = App.UI.tabbar.tabButtonDOM(tab.tabName, tab.caption);
 			if (V.useSlaveSummaryTabs === 2) {
 				button.classList.add("card");
 			}
@@ -1051,7 +1051,7 @@ App.UI.SlaveList.penthousePage = function() {
 	fragment.append(div);
 
 	for (const tab of tabs) {
-		const div = App.UI.tabBar.makeTabDOM(tab.tabName, tab.content);
+		const div = App.UI.tabbar.makeTabDOM(tab.tabName, tab.content);
 		if (V.useSlaveSummaryTabs === 0) {
 			div.classList.add("noFade");
 		} else if (V.useSlaveSummaryTabs === 2) {
@@ -1064,7 +1064,7 @@ App.UI.SlaveList.penthousePage = function() {
 		fragment.append(App.UI.DOM.makeElement("div", App.UI.View.mainLinks(), "center"));
 	}
 
-	App.UI.tabBar.handlePreSelectedTab();
+	App.UI.tabbar.handlePreSelectedTab();
 	return fragment;
 };
 
diff --git a/src/js/utilsSC.js b/src/js/utilsSC.js
index 8da22d3d244..c424d660b07 100644
--- a/src/js/utilsSC.js
+++ b/src/js/utilsSC.js
@@ -143,7 +143,7 @@ App.UI.htag = function(text, attributes, tag = 'div') {
 	return `<${tag} ${attributes}>${payload}</${tag}>`;
 };
 
-App.UI.tabBar = function() {
+App.UI.tabbar = function() {
 	return {
 		openTab: openTab,
 		tabButton: tabButton,
@@ -156,13 +156,13 @@ App.UI.tabBar = function() {
 
 	function openTab(evt, tabName) {
 		/* var passage = passage().trim().replace(/ /g,"+");*/
-		const tabContent = document.getElementsByClassName("tabContent");
-		for (let i = 0; i < tabContent.length; i++) {
-			tabContent[i].style.display = "none";
+		const tabcontent = document.getElementsByClassName("tabcontent");
+		for (let i = 0; i < tabcontent.length; i++) {
+			tabcontent[i].style.display = "none";
 		}
-		const tabLinks = document.getElementsByClassName("tabLinks");
-		for (let i = 0; i < tabLinks.length; i++) {
-			tabLinks[i].className = tabLinks[i].className.replace(" active", "");
+		const tablinks = document.getElementsByClassName("tablinks");
+		for (let i = 0; i < tablinks.length; i++) {
+			tablinks[i].className = tablinks[i].className.replace(" active", "");
 		}
 		V.tabChoice[tabChoiceVarName()] = tabName; /* The regex strips spaces and " ' " from passage names, making "Servants' Quarters" into "ServantsQuarters" and allowing it to be used as a label in this object. */
 		document.getElementById(tabName).style.display = "block";
@@ -175,7 +175,7 @@ App.UI.tabBar = function() {
 	 * @returns {string}
 	 */
 	function tabButton(name, text) {
-		return `<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, '${name}')" id="tab ${name}">${text}</button>`;
+		return `<button class="tablinks" onclick="App.UI.tabbar.openTab(event, '${name}')" id="tab ${name}">${text}</button>`;
 	}
 
 	/**
@@ -187,7 +187,7 @@ App.UI.tabBar = function() {
 	function tabButtonDOM(name, text, plainLink = false) {
 		if (plainLink) {
 			const link = document.createElement("a");
-			link.classList.add("tabLinks", "pure");
+			link.classList.add("tablinks", "pure");
 			link.id = `tab ${name}`;
 			link.textContent = text;
 			link.addEventListener('click', event => {
@@ -196,7 +196,7 @@ App.UI.tabBar = function() {
 			return link;
 		} else {
 			const button = document.createElement("button");
-			button.classList.add("tabLinks");
+			button.classList.add("tablinks");
 			button.id = `tab ${name}`;
 			button.textContent = text;
 			button.addEventListener('click', event => {
@@ -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="tabcontent"><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("tabcontent");
 		const innerDiv = document.createElement("div");
 		innerDiv.classList.add("content");
 		innerDiv.append(content);
@@ -240,7 +240,7 @@ App.UI.tabBar = function() {
 		function selectTab() {
 			let tabBtn = document.getElementById(`tab ${selectedTab}`);
 			if (!tabBtn) {
-				tabBtn = document.getElementsByClassName('tabLinks').item(0);
+				tabBtn = document.getElementsByClassName('tablinks').item(0);
 			}
 			if (tabBtn) {
 				tabBtn.click();
diff --git a/src/npc/slaveStats.tw b/src/npc/slaveStats.tw
index 54032d59acf..efc6b9785b4 100644
--- a/src/npc/slaveStats.tw
+++ b/src/npc/slaveStats.tw
@@ -71,17 +71,17 @@ Income: <<= num($activeSlave.lifetimeRepIncome)>>
 Expenses: <<= num($activeSlave.lastWeeksRepExpenses)>>,
 Income: <<= num($activeSlave.lastWeeksRepIncome)>>
 
-<div class="tabBar">
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Skills')" id="tab Skills">Skills</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Mental')" id="tab Mental">Mental</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Body')" id="tab Body">Body</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Porn')" id="tab Porn">Porn</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Impants_Piercings_Tattoos')" id="tab Impants_Piercings_Tattoos">Impants, piercings & Tattoos</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Family')" id="tab Family">Family</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Misc')" id="tab Misc">Misc</button>
+<div class="tabbar">
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Skills')" id="tab Skills">Skills</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Mental')" id="tab Mental">Mental</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Body')" id="tab Body">Body</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Porn')" id="tab Porn">Porn</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Impants_Piercings_Tattoos')" id="tab Impants_Piercings_Tattoos">Impants, piercings & Tattoos</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Family')" id="tab Family">Family</button>
+	<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="tabcontent">
 	<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="tabcontent">
 	<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="tabcontent">
 	<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="tabcontent">
 	<div class="content">
 		Focus: $activeSlave.porn.focus,
 		Feed: $activeSlave.porn.feed
@@ -396,7 +396,7 @@ Income: <<= num($activeSlave.lastWeeksRepIncome)>>
 	</div>
 </div>
 
-<div id="Impants_Piercings_Tattoos" class="tabContent">
+<div id="Impants_Piercings_Tattoos" class="tabcontent">
 	<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="tabcontent">
 	<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="tabcontent">
 	<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 751740c6cdf..82121fac20a 100644
--- a/src/npc/startingGirls/startingGirls.tw
+++ b/src/npc/startingGirls/startingGirls.tw
@@ -151,7 +151,7 @@
 	</p>
 <</if>>
 
-<<run App.UI.tabBar.handlePreSelectedTab($tabChoice.StartingGirls)>>
+<<run App.UI.tabbar.handlePreSelectedTab($tabChoice.StartingGirls)>>
 
 <<if !$activeSlave>>
 	<<set $activeSlave = App.StartingGirls.generate()>>
@@ -364,23 +364,23 @@
 
 <h2>You are customizing this slave:</h2> <<includeDOM App.Desc.longSlave(V.activeSlave, {market: "generic"})>>
 
-<div class="tabBar">
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Overview')" id="tab Overview">Overview</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Physical')" id="tab Physical">Physical</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Mental')" id="tab Mental">Mental</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Skills')" id="tab Skills">Skills</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Family', App.StartingGirls.uncommittedFamilyTree(V.activeSlave))" id="tab Family">Family</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Customization')" id="tab Customization">Customization</button>
+<div class="tabbar">
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Overview')" id="tab Overview">Overview</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Physical')" id="tab Physical">Physical</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Mental')" id="tab Mental">Mental</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Skills')" id="tab Skills">Skills</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Family', App.StartingGirls.uncommittedFamilyTree(V.activeSlave))" id="tab Family">Family</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Customization')" id="tab Customization">Customization</button>
 	<<if $cash >= _slaveCost>>
-		<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'assignRemove')" id="tab assignRemove">Finalize</button>
+		<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'assignRemove')" id="tab assignRemove">Finalize</button>
 	<<else>>
-		<button class="tabLinks, show-warning" onclick="App.UI.tabBar.openTab(event, 'assignRemove')" id="tab assignRemove">Finalize</button>
+		<button class="tablinks, show-warning" onclick="App.UI.tabbar.openTab(event, 'assignRemove')" id="tab assignRemove">Finalize</button>
 	<</if>>
 </div>
 
 <<setLocalPronouns $activeSlave>>
 
-<div id="Overview" class="tabContent">
+<div id="Overview" class="tabcontent">
 	<div class="content">
 
 	<<set _options = new App.UI.OptionsGroup()>>
@@ -514,7 +514,7 @@
 	</div>
 </div>
 
-<div id="Physical" class="tabContent">
+<div id="Physical" class="tabcontent">
 	<div class="content">
 
 	<<set _options = new App.UI.OptionsGroup()>>
@@ -881,7 +881,7 @@
 	</div>
 </div>
 
-<div id="Mental" class="tabContent">
+<div id="Mental" class="tabcontent">
 	<div class="content">
 
 	<<set _options = new App.UI.OptionsGroup()>>
@@ -975,7 +975,7 @@
 	</div>
 </div>
 
-<div id="Skills" class="tabContent">
+<div id="Skills" class="tabcontent">
 	<div class="content">
 	<<set _options = new App.UI.OptionsGroup()>>
 
@@ -1047,13 +1047,13 @@
 	</div>
 </div>
 
-<div id="Family" class="tabContent">
+<div id="Family" class="tabcontent">
 	<div class="content">
 	<<editFamily>>
 	</div>
 </div>
 
-<div id="Customization" class="tabContent">
+<div id="Customization" class="tabcontent">
 	<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="tabcontent">
 	<div class="content">
 
 	<<if $cash >= _slaveCost>>
diff --git a/src/personalAssistant/assistantOptions.tw b/src/personalAssistant/assistantOptions.tw
index 88cb5c88997..d7a2fa55d62 100644
--- a/src/personalAssistant/assistantOptions.tw
+++ b/src/personalAssistant/assistantOptions.tw
@@ -27,18 +27,18 @@ Seated at your desk, you glance at the visual representation of
 <</if>>
 <br><br>
 
-<<run App.UI.tabBar.handlePreSelectedTab($tabChoice.Assistant)>>
-<div class="tabBar">
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'upgrades')" id="tab upgrades">Computer Core Upgrades</button>
+<<run App.UI.tabbar.handlePreSelectedTab($tabChoice.Assistant)>>
+<div class="tabbar">
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'upgrades')" id="tab upgrades">Computer Core Upgrades</button>
 	<<if $week >= 11>>
-		<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'settings')" id="tab settings">Settings</button>
+		<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'settings')" id="tab settings">Settings</button>
 		<<if $assistant.personality != 0>>
-			<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'appearance')" id="tab appearance">Appearance</button>
+			<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'appearance')" id="tab appearance">Appearance</button>
 		<</if>>
 	<</if>>
 </div>
 
-<div id="upgrades" class="tabContent">
+<div id="upgrades" class="tabcontent">
 <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="tabcontent">
 <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="tabcontent">
 <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 d16865b67ff..848af19499a 100644
--- a/src/uncategorized/economics.tw
+++ b/src/uncategorized/economics.tw
@@ -48,40 +48,40 @@
 <<else>>
 <body>
 
-<div class="tabBar">
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Arcologies')" id="defaultOpen">Arcologies</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Management')">Arcology Management</button>
+<div class="tabbar">
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Arcologies')" id="defaultOpen">Arcologies</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Management')">Arcology Management</button>
 	<<if $FSAnnounced > 0>>
-		<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Societies')">Society Development</button>
+		<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Societies')">Society Development</button>
 	<</if>>
 	<<if $corp.Incorporated == 1>>
-		<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Corporation')">Corporation Developments</button>
+		<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Corporation')">Corporation Developments</button>
 	<</if>>
 	<<if $secExpEnabled == 1>>
-		<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Authority')">Authority</button>
-		<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'securityReport')">Security</button>
+		<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Authority')">Authority</button>
+		<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'securityReport')">Security</button>
 	<</if>>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Reputation')">Reputation</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Business')">Personal Business</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Reputation')">Reputation</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Business')">Personal Business</button>
 	<<if $PC.boobs >= 1000 || $PC.pregKnown == 1 || $playerAging != 0>>
-		<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Personal')">Personal Notes</button>
+		<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Personal')">Personal Notes</button>
 	<</if>>
 </div>
 
-<div id="Arcologies" class="tabContent">
+<div id="Arcologies" class="tabcontent">
 	<div class="content">
 		<<include "Neighbors Development">>
 	</div>
 </div>
 
-<div id="Management" class="tabContent">
+<div id="Management" class="tabcontent">
 	<div class="content">
 		<<include "Arcology Management">>
 	</div>
 </div>
 
 <<if $FSAnnounced > 0>>
-	<div id="Societies" class="tabContent">
+	<div id="Societies" class="tabcontent">
 		<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="tabcontent">
 		<div class="content">
 			<<include "Corporation Developments">>
 		</div>
@@ -97,33 +97,33 @@
 <</if>>
 
 <<if $secExpEnabled > 0>>
-	<div id="Authority" class="tabContent">
+	<div id="Authority" class="tabcontent">
 		<div class="content">
 			<<include "authorityReport">>
 		</div>
 	</div>
 
-	<div id="securityReport" class="tabContent">
+	<div id="securityReport" class="tabcontent">
 		<div class="content">
 			<<include "securityReport">>
 		</div>
 	</div>
 <</if>>
 
-<div id="Reputation" class="tabContent">
+<div id="Reputation" class="tabcontent">
 	<div class="content">
 		<<include "Reputation">>
 	</div>
 </div>
 
-<div id="Business" class="tabContent">
+<div id="Business" class="tabcontent">
 	<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="tabcontent">
 		<div class="content">
 			<<include "Personal Notes">>
 		</div>
diff --git a/src/uncategorized/remoteSurgery.tw b/src/uncategorized/remoteSurgery.tw
index d65f6bd6a31..fb5f73c654b 100644
--- a/src/uncategorized/remoteSurgery.tw
+++ b/src/uncategorized/remoteSurgery.tw
@@ -26,7 +26,7 @@
 	})>>
 <</if>>
 
-<<run App.UI.tabBar.handlePreSelectedTab($tabChoice.RemoteSurgery)>>
+<<run App.UI.tabbar.handlePreSelectedTab($tabChoice.RemoteSurgery)>>
 
 <h1>The Remote Surgery</h1>
 
@@ -62,16 +62,16 @@
 	<</if>>
 </div>
 
-<div class="tabBar">
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'hairFace')" id="tab hairFace">Hair and Face</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'upper')" id="tab upper">Upper</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'lower')" id="tab lower">Lower</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Race')" id="tab Race">Race</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Structural')" id="tab Structural">Structural</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'ExtremeSurgery')" id="tab ExtremeSurgery">Extreme Surgery</button>
+<div class="tabbar">
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'hairFace')" id="tab hairFace">Hair and Face</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'upper')" id="tab upper">Upper</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'lower')" id="tab lower">Lower</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Race')" id="tab Race">Race</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Structural')" id="tab Structural">Structural</button>
+	<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="tabcontent">
 <div class="content">
 	/* 000-250-006 */
 	<<if $seeImages == 1>>
@@ -767,7 +767,7 @@
 	</div>
 </div>
 
-<div id="upper" class="tabContent">
+<div id="upper" class="tabcontent">
 	<div class="content">
 		/* 000-250-006 */
 		<<if $seeImages == 1>>
@@ -1214,7 +1214,7 @@
 	</div>
 </div>
 
-<div id="lower" class="tabContent">
+<div id="lower" class="tabcontent">
 	<div class="content">
 		/* 000-250-006 */
 		<<if $seeImages == 1>>
@@ -1740,7 +1740,7 @@
 	</div>
 </div>
 
-<div id="Race" class="tabContent">
+<div id="Race" class="tabcontent">
 	<div class="content">
 		/* 000-250-006 */
 		<<if $seeImages == 1>>
@@ -1800,7 +1800,7 @@
 	</div>
 </div>
 
-<div id="Structural" class="tabContent">
+<div id="Structural" class="tabcontent">
 	<div class="content">
 		/* 000-250-006 */
 		<<if $seeImages == 1>>
@@ -2309,7 +2309,7 @@
 	</div>
 </div>
 
-<div id="ExtremeSurgery" class="tabContent">
+<div id="ExtremeSurgery" class="tabcontent">
 	<div class="content">
 		/* 000-250-006 */
 		<<if $seeImages == 1>>
diff --git a/src/uncategorized/slaveInteract.tw b/src/uncategorized/slaveInteract.tw
index 9d608105d4f..b1e4f5796a8 100644
--- a/src/uncategorized/slaveInteract.tw
+++ b/src/uncategorized/slaveInteract.tw
@@ -12,7 +12,7 @@
 }
 </style>
 
-<<run App.UI.tabBar.handlePreSelectedTab($tabChoice.SlaveInteract)>>
+<<run App.UI.tabbar.handlePreSelectedTab($tabChoice.SlaveInteract)>>
 
 
 <<if !assignmentVisible(getSlave($AS))>>
@@ -80,16 +80,16 @@
 		<<print App.UI.Hotkeys.hotkeys("nextSlave")>>
 	</span>
 </p>
-<div class="tabBar">
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Description'), jQuery('#LSD').empty().append(App.Desc.longSlave(getSlave(V.activeSlave.ID)))" id="tab Description">Description</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Modify')" id="tab Modify">Modify</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Work')" id="tab Work">Work</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Appearance'), App.UI.Wardrobe.refreshAll(getSlave(V.activeSlave.ID))" id="tab Appearance">Appearance</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'PhysicalRegimen')" id="tab PhysicalRegimen">Physical Regimen</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Rules')" id="tab Rules">Rules</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Financial')" id="tab Financial">Financial</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'Customize'), App.UI.SlaveInteract.custom(getSlave(V.activeSlave.ID))" id="tab Customize">Customize</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'FamilyTab'), renderFamilyTree(V.slaves, V.activeSlave.ID)" id="tab FamilyTab">Family</button>
+<div class="tabbar">
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Description'), jQuery('#LSD').empty().append(App.Desc.longSlave(getSlave(V.activeSlave.ID)))" id="tab Description">Description</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Modify')" id="tab Modify">Modify</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Work')" id="tab Work">Work</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Appearance'), App.UI.Wardrobe.refreshAll(getSlave(V.activeSlave.ID))" id="tab Appearance">Appearance</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'PhysicalRegimen')" id="tab PhysicalRegimen">Physical Regimen</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Rules')" id="tab Rules">Rules</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Financial')" id="tab Financial">Financial</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'Customize'), App.UI.SlaveInteract.custom(getSlave(V.activeSlave.ID))" id="tab Customize">Customize</button>
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'FamilyTab'), renderFamilyTree(V.slaves, V.activeSlave.ID)" id="tab FamilyTab">Family</button>
 </div>
 
 <div id="artFrame">
@@ -102,7 +102,7 @@
 	<</if>>
 </div>
 
-<div id="Description" class="tabContent">
+<div id="Description" class="tabcontent">
 	<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="tabcontent">
 	<div class="content">
 		<p id="modifySection"></p>
 		<script>
@@ -142,7 +142,7 @@
 </div>
 
 
-<div id="Work" class="tabContent">
+<div id="Work" class="tabcontent">
 	<div class="content">
 		<p id="work"></p>
 		<script>
@@ -151,7 +151,7 @@
 	</div>
 </div>
 
-<div id="Appearance" class="tabContent">
+<div id="Appearance" class="tabcontent">
 	<div class="content">
 		<p>
 			<span id="clothes"></span>
@@ -211,7 +211,7 @@
 	</div>
 </div>
 
-<div id="PhysicalRegimen" class="tabContent">
+<div id="PhysicalRegimen" class="tabcontent">
 	<div class="content">
 		<p>
 			<span id="drugs"></span>
@@ -257,14 +257,14 @@
 	</div>
 </div>
 
-<div id="Rules" class="tabContent">
+<div id="Rules" class="tabcontent">
 	<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="tabcontent">
 	<div class="content">
 
 		<<if $studio == 1>>
@@ -361,7 +361,7 @@
 	</div>
 </div>
 
-<div id="Customize" class="tabContent">
+<div id="Customize" class="tabcontent">
 	<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="tabcontent">
 	<div class="content">
 		<p id="family">
 			<div id="familyTree"></div>
diff --git a/src/uncategorized/underperformingSlaves.tw b/src/uncategorized/underperformingSlaves.tw
index 3efb7562164..5fc39bb79b8 100644
--- a/src/uncategorized/underperformingSlaves.tw
+++ b/src/uncategorized/underperformingSlaves.tw
@@ -19,19 +19,19 @@
 		<</if>>
 	</div>
 </p>
-<<run App.UI.tabBar.handlePreSelectedTab($tabChoice.Options)>>
-<div class="tabBar">
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'highSale')" id="tab highSale">Worth much but earning little</button>
-	<button class="tabLinks" onclick="App.UI.tabBar.openTab(event, 'expensive')" id="tab expensive">Costing vs earning</button>
+<<run App.UI.tabbar.handlePreSelectedTab($tabChoice.Options)>>
+<div class="tabbar">
+	<button class="tablinks" onclick="App.UI.tabbar.openTab(event, 'highSale')" id="tab highSale">Worth much but earning little</button>
+	<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="tabcontent">
 	<div class="content">
 		<<includeDOM App.Underperformers.highSale()>>
 	</div>
 </div>
 
-<div id="expensive" class="tabContent">
+<div id="expensive" class="tabcontent">
 	<div class="content">
 		<<includeDOM App.Underperformers.expensive()>>
 	</div>
-- 
GitLab