diff --git a/src/003-assets/CSS/tabs.css b/src/003-assets/CSS/tabs.css
index 9f857f236db77b252b0db10cc200f936b2575f1a..a5e31ab91e13f282be2094ebb51d8f451bd5a5ee 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 33c4b31bc86a9999ac4b2d78b73ccf0108bef52f..0eea7a19a3af7714f5704a408fccd63b0f495ffd 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 b1a4bf3e90496775ec1645e299cbcd91d822e2e9..7663aa95c1909fd5fd87b0ce7b5cd7698a6d26ba 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 6be9f0a36f0c47b90beebb686cf9777b4d122043..1c00e29feedc5cdb967772918fee18f4d9b8316d 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 68e85c00ecc247dcbb188e5efd088b7fb130df94..18e3e4694f0d3859f9f026983b73daebd41b4ee4 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 6e7d67402070b710898e99e800d5b25cafa1af52..f0a64a14c38bfc6ba0b1a9e2f3d76497c2fb01b1 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 4d6636dd9a822c7403a704a431e223b9f15b12ff..865b94b3d5dadfebf129fe24dd583aed1ab4bb38 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 e04ae581a80e5c7e4e258547358975c09e8dc173..47d65b942ae85dee5df1a25f90afeb2e3f2a07bd 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 42e0b874f800f0d06bad3dcd10cf4c942173a695..24176214ba7c8756d426226a9c50d7f6f72eccd1 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 ee6a875b4b8b3812b41a7668857ebcd8ed74227b..1bfef6859f473f21a7de4d231a9cc21bb08673ca 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 c424d660b07a8ad10dd97262ec90e1717fb751bd..fbdb8c98615d929e661508710891bb0efec8559b 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 d07ae3a36e6872d7f87cc100acc6b95dfdc3291e..0b0818891790a69762f0effc1adfa991bd17b595 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 15845de1eb71f610de218374cde130427ef729fe..b4a7b215c4d598fddc4406664125516f52fc441d 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 d7a2fa55d62b81f8af9f49f6710b39e46968a640..23ce35ebf838c16bd353e11113a1022ef47c0011 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 43fd40fe338cda6f42ca4fd33eabdee742728f1b..8d11781d0af8b7a463d708ee5c29c28a380b262f 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 fb5f73c654bf65c8f9fcf785f5d5dfe28ccd89a3..5161d44f52afcf9a2b67729a199c66499e9568b4 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 b1e4f5796a89830351634b5ffd4e35321cfaa205..e86ebaeee27df6a6ffb5e3649b93b448deb2afd6 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 5fc39bb79b88343d17662c48e4678fa42608a6a9..059bd272be4f4f74ed50565f33a14ddc7c1532fe 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>