From fc4dc16971741baaf4faafb66fc47bfa8442bd95 Mon Sep 17 00:00:00 2001
From: Midnight <midnightdangerzone@gmail.com>
Date: Wed, 20 Dec 2023 00:59:21 +0000
Subject: [PATCH] Initial base.css file split in preparation for CSS refactor

---
 modules/css/animations.css      |  837 +++++
 modules/css/base.css            | 5277 ++-----------------------------
 modules/css/blackjack.css       |  109 +
 modules/css/characteristics.css |  238 ++
 modules/css/color-filters.css   | 1873 +++++++++++
 modules/css/combat-layers.css   |  621 ++++
 modules/css/debug.css           |   50 +
 modules/css/fontawesome.css     |  118 +
 modules/css/settings.css        |   53 +
 modules/css/skybox.css          |  106 +
 modules/css/social.css          |  222 ++
 modules/css/stalking.css        |   46 +
 modules/css/ui-hairstyles.css   |  215 ++
 modules/css/ui-start-menu.css   |  260 ++
 modules/css/wardrobe.css        |   78 +
 15 files changed, 5106 insertions(+), 4997 deletions(-)
 create mode 100644 modules/css/animations.css
 create mode 100644 modules/css/blackjack.css
 create mode 100644 modules/css/characteristics.css
 create mode 100644 modules/css/color-filters.css
 create mode 100644 modules/css/combat-layers.css
 create mode 100644 modules/css/fontawesome.css
 create mode 100644 modules/css/settings.css
 create mode 100644 modules/css/skybox.css
 create mode 100644 modules/css/social.css
 create mode 100644 modules/css/stalking.css
 create mode 100644 modules/css/ui-hairstyles.css
 create mode 100644 modules/css/ui-start-menu.css
 create mode 100644 modules/css/wardrobe.css

diff --git a/modules/css/animations.css b/modules/css/animations.css
new file mode 100644
index 0000000000..a1d4a70a35
--- /dev/null
+++ b/modules/css/animations.css
@@ -0,0 +1,837 @@
+/*
+ * Animation-related classes. Work-in-progress
+ * Expected document structure:
+ * <div class="i256" -- should have the image size-related class
+ *					(or have fixed size & overflow: hidden any other way)
+ *	<img class="anim-2s anim-2f" -- should have
+ *		1) duration-related class like "anim-2s" (2 seconds)
+ *		2) frame count-related class like "anim-2f" (2 frames)
+ *		OR
+ *	<img class="anim-doggy-4f-vfast"
+ *		-- should have frame count & speed class
+ *			like "anim-doggy-4f-vfast" (4 frames, very fast)
+ */
+.i256 {
+	width: 256px;
+	height: 256px;
+	overflow: hidden;
+}
+
+.i128 {
+	width: 128px;
+	height: 128px;
+	overflow: hidden;
+}
+
+.i64 {
+	width: 64px;
+	height: 64px;
+	overflow: hidden;
+}
+
+.i256 > *,
+.i128 > *,
+.i64 > * {
+	position: absolute;
+}
+
+.anim-1s,
+.anim-2s {
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+canvas {
+	max-width: unset;
+	/* fix sugarcube default css */
+}
+
+/* joint duration & frame-count classes */
+
+/* generic idle animation, -slow(default)/-mid/-fast */
+/* .anim-idle-1f,
+.anim-idle-1f-slow {} */
+
+.anim-idle-2f,
+.anim-idle-2f-slow {
+	-webkit-animation-duration: 2s;
+	/* 1s x 2 */
+	-webkit-animation-timing-function: steps(2);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 2s;
+	/* 1s x 2 */
+	animation-timing-function: steps(2);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-idle-3f,
+.anim-idle-3f-slow {
+	-webkit-animation-duration: 3s;
+	/* 1s x 3 */
+	-webkit-animation-timing-function: steps(3);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 3s;
+	/* 1s x 3 */
+	animation-timing-function: steps(3);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-idle-4f-mid {
+	-webkit-animation-duration: 1320ms;
+	/* 330ms x 4 */
+	-webkit-animation-timing-function: steps(4);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 1320ms;
+	/* 330ms x 4 */
+	animation-timing-function: steps(4);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-idle-4f-fast {
+	-webkit-animation-duration: 320ms;
+	/* 80ms x 4 */
+	-webkit-animation-timing-function: steps(4);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 320ms;
+	/* 80ms x 4 */
+	animation-timing-function: steps(4);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+/* sex animations, main slot */
+
+.anim-doggy-3f-vfast {
+	-webkit-animation-duration: 240ms;
+	/* 80ms x 3 */
+	-webkit-animation-timing-function: steps(3);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 240ms;
+	/* 80ms x 3 */
+	animation-timing-function: steps(3);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-doggy-3f-fast {
+	-webkit-animation-duration: 330ms;
+	/* 110ms x 3 */
+	-webkit-animation-timing-function: steps(3);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 330ms;
+	/* 110ms x 3 */
+	animation-timing-function: steps(3);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-doggy-3f-mid {
+	-webkit-animation-duration: 510ms;
+	/* 170ms x 3 */
+	-webkit-animation-timing-function: steps(3);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 510ms;
+	/* 170ms x 3 */
+	animation-timing-function: steps(3);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-doggy-3f-slow {
+	-webkit-animation-duration: 990ms;
+	/* 330ms x 3 */
+	-webkit-animation-timing-function: steps(3);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 1320ms;
+	/* 330ms x 3 */
+	animation-timing-function: steps(4);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-doggy-4f-vfast {
+	-webkit-animation-duration: 320ms;
+	/* 80ms x 4 */
+	-webkit-animation-timing-function: steps(4);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 320ms;
+	/* 80ms x 4 */
+	animation-timing-function: steps(4);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-doggy-4f-fast {
+	-webkit-animation-duration: 440ms;
+	/* 110ms x 4 */
+	-webkit-animation-timing-function: steps(4);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 440ms;
+	/* 110ms x 4 */
+	animation-timing-function: steps(4);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-doggy-4f-mid {
+	-webkit-animation-duration: 680ms;
+	/* 170ms x 4 */
+	-webkit-animation-timing-function: steps(4);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 680ms;
+	/* 170ms x 4 */
+	animation-timing-function: steps(4);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-doggy-4f-slow {
+	-webkit-animation-duration: 1320ms;
+	/* 330ms x 4 */
+	-webkit-animation-timing-function: steps(4);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 1320ms;
+	/* 330ms x 4 */
+	animation-timing-function: steps(4);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-doggy-5f-vfast {
+	-webkit-animation-duration: 400ms;
+	/* 80ms x 5 */
+	-webkit-animation-timing-function: steps(5);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 400ms;
+	/* 80ms x 5 */
+	animation-timing-function: steps(5);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-doggy-5f-fast {
+	-webkit-animation-duration: 550ms;
+	/* 110ms x 5 */
+	-webkit-animation-timing-function: steps(5);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 550ms;
+	/* 110ms x 5 */
+	animation-timing-function: steps(5);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-doggy-5f-mid {
+	-webkit-animation-duration: 850ms;
+	/* 170ms x 5 */
+	-webkit-animation-timing-function: steps(5);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 850ms;
+	/* 170ms x 5 */
+	animation-timing-function: steps(5);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-doggy-5f-slow {
+	-webkit-animation-duration: 1650ms;
+	/* 330ms x 5 */
+	-webkit-animation-timing-function: steps(5);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 1650ms;
+	/* 330ms x 5 */
+	animation-timing-function: steps(5);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-doggy-6f-vfast {
+	-webkit-animation-duration: 480ms;
+	/* 80ms x 6 */
+	-webkit-animation-timing-function: steps(6);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 480ms;
+	/* 80ms x 6 */
+	animation-timing-function: steps(6);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-doggy-6f-fast {
+	-webkit-animation-duration: 660ms;
+	/* 110ms x 6 */
+	-webkit-animation-timing-function: steps(6);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 660ms;
+	/* 110ms x 6 */
+	animation-timing-function: steps(6);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-doggy-6f-mid {
+	-webkit-animation-duration: 1020ms;
+	/* 170ms x 6 */
+	-webkit-animation-timing-function: steps(6);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 1020ms;
+	/* 170ms x 6 */
+	animation-timing-function: steps(6);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-doggy-6f-slow {
+	-webkit-animation-duration: 1980ms;
+	/* 330ms x 6 */
+	-webkit-animation-timing-function: steps(6);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 1980ms;
+	/* 330ms x 6 */
+	animation-timing-function: steps(6);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+/* sex animations, close-up slots */
+.anim-close-3f-vfast {
+	-webkit-animation-duration: 240ms;
+	/* 80ms x 3 */
+	-webkit-animation-timing-function: steps(3);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 240ms;
+	/* 80ms x 3 */
+	animation-timing-function: steps(3);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-close-3f-fast {
+	-webkit-animation-duration: 330ms;
+	/* 110ms x 3 */
+	-webkit-animation-timing-function: steps(3);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 330ms;
+	/* 110ms x 3 */
+	animation-timing-function: steps(3);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-close-3f-mid {
+	-webkit-animation-duration: 510ms;
+	/* 170ms x 3 */
+	-webkit-animation-timing-function: steps(3);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 510ms;
+	/* 170ms x 3 */
+	animation-timing-function: steps(3);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-close-3f-slow {
+	-webkit-animation-duration: 990ms;
+	/* 330ms x 3 */
+	-webkit-animation-timing-function: steps(3);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 990ms;
+	/* 330ms x 3 */
+	animation-timing-function: steps(3);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-close-4f-vfast {
+	-webkit-animation-duration: 320ms;
+	/* 80ms x 4 */
+	-webkit-animation-timing-function: steps(4);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 320ms;
+	/* 80ms x 4 */
+	animation-timing-function: steps(4);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-close-4f-fast {
+	-webkit-animation-duration: 440ms;
+	/* 110ms x 4 */
+	-webkit-animation-timing-function: steps(4);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 440ms;
+	/* 110ms x 4 */
+	animation-timing-function: steps(4);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-close-4f-mid {
+	-webkit-animation-duration: 680ms;
+	/* 170ms x 4 */
+	-webkit-animation-timing-function: steps(4);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 680ms;
+	/* 170ms x 4 */
+	animation-timing-function: steps(4);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-close-4f-slow {
+	-webkit-animation-duration: 1320ms;
+	/* 330ms x 4 */
+	-webkit-animation-timing-function: steps(4);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 1320ms;
+	/* 330ms x 4 */
+	animation-timing-function: steps(4);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-close-10f-vfast {
+	-webkit-animation-duration: 800ms;
+	/* 80ms x 10 */
+	-webkit-animation-timing-function: steps(10);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 800ms;
+	/* 80ms x 10 */
+	animation-timing-function: steps(10);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-close-10f-fast {
+	-webkit-animation-duration: 1100ms;
+	/* 110ms x 10 */
+	-webkit-animation-timing-function: steps(10);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 1100ms;
+	/* 110ms x 10 */
+	animation-timing-function: steps(10);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-close-10f-mid {
+	-webkit-animation-duration: 1700ms;
+	/* 170ms x 10 */
+	-webkit-animation-timing-function: steps(10);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 1700ms;
+	/* 170ms x 10 */
+	animation-timing-function: steps(10);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-close-10f-slow {
+	-webkit-animation-duration: 3300ms;
+	/* 330ms x 10 */
+	-webkit-animation-timing-function: steps(10);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 3300ms;
+	/* 330ms x 10 */
+	animation-timing-function: steps(10);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+/* Currently unused */
+.anim-close-5f-vfast {
+	-webkit-animation-duration: 400ms;
+	/* 80ms x 5 */
+	-webkit-animation-timing-function: steps(5);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 400ms;
+	/* 80ms x 5 */
+	animation-timing-function: steps(5);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-close-5f-fast {
+	-webkit-animation-duration: 550ms;
+	/* 110ms x 5 */
+	-webkit-animation-timing-function: steps(5);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 550ms;
+	/* 110ms x 5 */
+	animation-timing-function: steps(5);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-close-5f-mid {
+	-webkit-animation-duration: 850ms;
+	/* 170ms x 5 */
+	-webkit-animation-timing-function: steps(5);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 850ms;
+	/* 170ms x 5 */
+	animation-timing-function: steps(5);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-close-5f-slow {
+	-webkit-animation-duration: 1650ms;
+	/* 330ms x 5 */
+	-webkit-animation-timing-function: steps(5);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 1650ms;
+	/* 330ms x 5 */
+	animation-timing-function: steps(5);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-close-6f-vfast {
+	-webkit-animation-duration: 480ms;
+	/* 80ms x 6 */
+	-webkit-animation-timing-function: steps(6);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 480ms;
+	/* 80ms x 6 */
+	animation-timing-function: steps(6);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-close-6f-fast {
+	-webkit-animation-duration: 660ms;
+	/* 110ms x 6 */
+	-webkit-animation-timing-function: steps(6);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 660ms;
+	/* 110ms x 6 */
+	animation-timing-function: steps(6);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-close-6f-mid {
+	-webkit-animation-duration: 1020ms;
+	/* 170ms x 6 */
+	-webkit-animation-timing-function: steps(6);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 1020ms;
+	/* 170ms x 6 */
+	animation-timing-function: steps(6);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-close-6f-slow {
+	-webkit-animation-duration: 1980ms;
+	/* 330ms x 6 */
+	-webkit-animation-timing-function: steps(6);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 1980ms;
+	/* 330ms x 6 */
+	animation-timing-function: steps(6);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-xray-8f-vfast {
+	-webkit-animation-duration: 320ms;
+	/* 40ms x 8 */
+	-webkit-animation-timing-function: steps(8);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 320ms;
+	/* 40ms x 8 */
+	animation-timing-function: steps(8);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-xray-8f-fast {
+	-webkit-animation-duration: 480ms;
+	/* 60ms x 8 */
+	-webkit-animation-timing-function: steps(8);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 480ms;
+	/* 60ms x 8 */
+	animation-timing-function: steps(8);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-xray-8f-mid {
+	-webkit-animation-duration: 640ms;
+	/* 80ms x 8 */
+	-webkit-animation-timing-function: steps(8);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 640ms;
+	/* 80ms x 8 */
+	animation-timing-function: steps(8);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.anim-xray-8f-slow {
+	-webkit-animation-duration: 1320ms;
+	/* 170ms x 8 */
+	-webkit-animation-timing-function: steps(8);
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: anim-default;
+	animation-duration: 1320ms;
+	/* 170ms x 8 */
+	animation-timing-function: steps(8);
+	animation-iteration-count: infinite;
+	animation-name: anim-default;
+}
+
+.height64NoMargin {
+	height: 128px !important;
+}
+
+.height64 {
+	margin-top: 64px;
+	height: 128px;
+}
+
+.height128 {
+	margin-top: 128px;
+	height: 128px;
+}
+
+.colour-sample {
+	display: inline-block;
+	width: 0.8em;
+	height: 0.8em;
+	background: #f00;
+	border-radius: 1em;
+}
+
+.bgcolour-eyes {
+	background: #6e4e11;
+}
+
+.bgcolour-hair {
+	background: #fd6064;
+}
+
+.bgcolour-red {
+	background: #f00;
+}
+
+/* duration related-classes.
+	When adding, don't forget to add it to rule above with animation-iteration-count */
+.anim-1s {
+	-webkit-animation-duration: 1s;
+	animation-duration: 1s;
+}
+
+.anim-2s {
+	-webkit-animation-duration: 2s;
+	animation-duration: 2s;
+}
+
+/* frame-count related classes */
+.anim-2f {
+	-webkit-animation-timing-function: steps(2);
+	animation-timing-function: steps(2);
+}
+
+.anim-4f {
+	-webkit-animation-timing-function: steps(4);
+	animation-timing-function: steps(4);
+}
+
+@keyframes anim-default {
+	0% {
+		transform: translateX(0);
+	}
+
+	100% {
+		transform: translateX(-100%);
+	}
+}
+
+/* Eye blinking animation, 100 seconds loop to make 1% equal to 1s; eyes are closed for 0.05s */
+.eyes-blink {
+	-webkit-animation: anim-eyes-blink 180s infinite steps(1);
+	animation: anim-eyes-blink 180s infinite steps(1);
+}
+
+.eyes-blink-trauma {
+	-webkit-animation: anim-eyes-blink-trauma 180s infinite steps(1);
+	animation: anim-eyes-blink-trauma 180s infinite steps(1);
+}
+
+.eyes-closed {
+	transform: translateX(-50%);
+}
+
+@keyframes anim-eyes-blink {
+	0%,
+	5.05%,
+	13.1%,
+	16.15%,
+	16.8%,
+	23.8%,
+	36.85%,
+	41.9%,
+	42.95%,
+	47%,
+	53.05%,
+	57.1%,
+	61.15%,
+	66.2%,
+	73.25%,
+	79.3%,
+	82.35%,
+	83.4%,
+	83.95%,
+	89%,
+	93.05%,
+	99.1%,
+	100% {
+		transform: translateX(0);
+	}
+
+	5%,
+	13.05%,
+	16.1%,
+	16.75%,
+	23.75%,
+	36.8%,
+	41.85%,
+	42.9%,
+	46.95%,
+	53%,
+	57.05%,
+	61.1%,
+	66.15%,
+	73.2%,
+	79.25%,
+	82.3%,
+	83.35%,
+	83.9%,
+	88.95%,
+	93%,
+	99.05% {
+		transform: translateX(-50%);
+	}
+}
+
+@keyframes anim-eyes-blink-trauma {
+	0%,
+	13.1%,
+	23.2%,
+	38.3%,
+	51.4%,
+	69.5%,
+	77.6%,
+	90.7%,
+	100% {
+		transform: translateX(0);
+	}
+
+	13%,
+	23.1%,
+	38.2%,
+	51.3%,
+	69.4%,
+	77.5%,
+	90.6%,
+	99.9% {
+		transform: translateX(-50%);
+	}
+}
+
+.unconscious {
+	opacity: 0.6;
+	font-size: 0.9em;
+	-webkit-animation: anim-unconscious-fade-in 2s ease-out, anim-unconscious-blur infinite;
+	animation: anim-unconscious-fade-in 2s ease-out, anim-unconscious-blur infinite;
+}
+
+.fade-in {
+	-webkit-animation: anim-fade-in 2s ease-out;
+	animation: anim-fade-in 2s ease-out;
+}
+
+@keyframes anim-unconscious-blur {
+	0%,
+	100% {
+		-webkit-filter: blur(0);
+		filter: blur(0);
+	}
+
+	50% {
+		-webkit-filter: blur(1px);
+		filter: blur(1px);
+	}
+}
+
+@keyframes anim-unconscious-fade-in {
+	0% {
+		opacity: 0;
+	}
+
+	100% {
+		opacity: 0.6;
+	}
+}
+
+@keyframes anim-fade-in {
+	0% {
+		opacity: 0;
+	}
+
+	100% {
+		opacity: 1;
+	}
+}
diff --git a/modules/css/base.css b/modules/css/base.css
index 8eb38b2d91..baab966f12 100644
--- a/modules/css/base.css
+++ b/modules/css/base.css
@@ -76,11 +76,6 @@ textarea {
 	min-width: 200px;
 }
 
-.debugOverlay ul li input {
-	width: 85px;
-	margin: 0;
-}
-
 input:not(:disabled):focus,
 input:not(:disabled):hover,
 select:not(:disabled):focus,
@@ -1347,50 +1342,6 @@ body.no-images #ui-bar-body {
 	border: 1px solid var(--700);
 }
 
-.debugLines-audience {
-	border: dotted red 1px;
-}
-
-.debugLines-combat {
-	border: dotted yellow 1px;
-}
-
-.debugLines-effectsman {
-	border: dotted green 1px;
-}
-
-.debugLines-stateman {
-	border: dotted cyan 1px;
-}
-
-.debugLines-actionsman {
-	border: dotted pink 1px;
-}
-
-.debugLines-beast {
-	border: dotted blue 1px;
-}
-
-.debugLines-tentacles {
-	border: dotted yellow 1px;
-}
-
-.debugLines-actionstentacles {
-	border: dotted pink 1px;
-}
-
-.debugLines-effectstentacleadv {
-	border: dotted green 1px;
-}
-
-.debugLines-swarm {
-	border: dotted green 1px;
-}
-
-.debugLines-swarmactions {
-	border: dotted pink 1px;
-}
-
 .lineHeight1,
 .lineHeight1 .passage {
 	line-height: 1;
@@ -1781,33 +1732,6 @@ body.has-images #storyCaptionContent {
 	line-height: 1.4;
 }
 
-.highlow div > * {
-	float: none;
-}
-
-.card {
-	width: 50px;
-	height: 75px;
-	border: 1px solid var(--200);
-	margin-right: 7px;
-	margin-bottom: 7px;
-	border-radius: 7px;
-	padding-top: 10px;
-}
-
-span.number,
-span.suit {
-	width: 100%;
-	display: block;
-	text-align: center;
-	padding-top: 2px;
-	padding-bottom: 2px;
-}
-
-#numberslider-value-estatecardscurrentbetinput::before {
-	content: "£";
-}
-
 #numberslider-value-dgchance::after,
 #numberslider-value-cbchance::after,
 #numberslider-value-straponchance::after,
@@ -2039,112 +1963,6 @@ span.suit {
 	position: absolute;
 }
 
-#daystate,
-#weather,
-#location {
-	position: fixed;
-	left: 0;
-	z-index: 10;
-	user-select: none;
-}
-
-#daystate {
-	top: 0;
-}
-
-#weather {
-	top: 64px;
-}
-
-#location {
-	top: 128px;
-}
-
-.skybox,
-.skybox_dawn,
-.skybox_dawn_haze,
-.skybox_day,
-.skybox_day_haze,
-.skybox_dusk,
-.skybox_dusk_haze,
-.skybox_night,
-.skybox_night_haze,
-.skybox_bloodmoon,
-.skybox_bloodmoon_haze,
-.skybox_dawn_tentacle,
-.skybox_day_tentacle,
-.skybox_dusk_tentacle,
-.skybox_night_tentacle,
-.skybox_blank {
-	position: fixed;
-	left: 0;
-	z-index: 9;
-	user-select: none;
-	top: 0;
-	width: 64px;
-	height: 192px;
-}
-
-.skybox_dawn {
-	background-color: #fd7d01;
-}
-
-.skybox_dawn_haze {
-	background-image: linear-gradient(#fd7d01, #e5d397 65%);
-}
-
-.skybox_day {
-	background-color: #408aca;
-}
-
-.skybox_day_haze {
-	background-image: linear-gradient(#408aca, #d0ffea 65%);
-}
-
-.skybox_dusk {
-	background-color: #fad6a5;
-}
-
-.skybox_dusk_haze {
-	background-image: linear-gradient(#fad6a5, #d7a350 65%);
-}
-
-.skybox_night {
-	background-color: #280137;
-}
-
-.skybox_night_haze {
-	background-image: linear-gradient(#280137, #1a2753 65%);
-}
-
-.skybox_bloodmoon {
-	background-image: linear-gradient(#8b0804, #280137 20%);
-}
-
-.skybox_bloodmoon_haze {
-	background-image: linear-gradient(#8b0804, #280137 20%, #4f284e 65%);
-}
-
-.skybox_dawn_tentacle {
-	background-color: #44056d;
-}
-
-.skybox_day_tentacle {
-	background-color: #69159d;
-}
-
-.skybox_dusk_tentacle {
-	background-color: #550e81;
-}
-
-.skybox_night_tentacle {
-	background-color: #2e0854;
-}
-
-.skybox_blank {
-	background-color: #000;
-}
-
 #world_map {
 	position: relative;
 	left: 0%;
@@ -2478,4151 +2296,341 @@ span.suit {
 	max-width: 175px;
 }
 
-/* Body Layers */
-.layer-over_head-back {
-	z-index: 0;
-}
-
-.layer-head-back {
-	z-index: 1;
-}
-
-.layer-basehead {
-	z-index: 5;
+/* ! <<numberpool>> macro set for SugarCube v2 */
+div[id|="numberbox-body"] {
+	display: inline-block;
 }
 
-.layer-backhair {
-	z-index: 10;
+div[id|="numberbox-body"] input {
+	min-width: 3em;
+	width: 3em;
+	text-align: center;
 }
 
-.layer-back-lower {
-	z-index: 15;
+div[id|="numberbox-body"] button {
+	font-family: tme-fa-icons;
+	font-style: normal;
+	font-weight: normal;
+	font-variant: normal;
+	text-transform: none;
+	line-height: normal;
+	padding: 0.4em 0.6em;
 }
 
-.layer-base {
-	z-index: 20;
+div[id|="numberbox-body"] button[id|="numberbox-minus"] {
+	margin-right: 0.4em;
 }
 
-.layer-facebase {
-	z-index: 21;
+div[id|="numberbox-body"] button[id|="numberbox-plus"] {
+	margin-left: 0.4em;
 }
 
-.layer-tanBody {
-	z-index: 22;
+div[id|="numberslider-body"] {
+	display: inline-block;
+	width: 100%;
 }
 
-.layer-hirsute {
-	z-index: 25;
+div[id|="numberslider-body"] span {
+	display: inline-block;
+	/* font-size: 1.25em; */
+	margin-left: 0.25em;
+	min-width: 3em;
+	text-align: center;
+	vertical-align: middle;
 }
 
-.layer-eyes {
-	z-index: 30;
+div[id|="numberslider-body"] .small-description {
+	/* margin-left: -6em; */
+	text-align: left;
 }
 
-.layer-sclera {
-	z-index: 31;
+div[id|="numberslider-body"] span .inline-colour {
+	margin-left: unset;
+	min-width: unset;
+	vertical-align: unset;
 }
 
-.layer-iris {
-	z-index: 32;
+div[id|="numberslider-body"] input {
+	-webkit-appearance: none;
+	width: 95%;
+	height: 1.25em;
+	max-width: 20em;
+	vertical-align: middle;
+	cursor: pointer;
 }
 
-.layer-irisacc {
-	z-index: 33;
+div[id|="numberslider-body-humanpregnancymonths"] input,
+div[id|="numberslider-body-wolfpregnancyweeks"] input {
+	width: 75%;
+	margin-right: 5px;
 }
 
-.layer-bellyBase {
-	z-index: 33;
+div[id|="numberslider-body"] input:focus {
+	outline: none;
 }
 
-.layer-eyelids {
-	z-index: 34;
+div[id|="numberslider-body"] input::-webkit-slider-runnable-track {
+	background: var(--850);
+	border: 1px solid var(--750);
+	border-radius: 0;
+	cursor: pointer;
+	height: 10px;
+	width: 100%;
 }
 
-.layer-lashes {
-	z-index: 35;
+div[id|="numberslider-body"] input::-webkit-slider-thumb {
+	-webkit-appearance: none;
+	background: var(--200);
+	border: 3px solid var(--300);
+	border-radius: 0;
+	cursor: pointer;
+	height: 18px;
+	margin-top: -5px;
+	width: 33px;
 }
 
-.layer-mouth {
-	z-index: 40;
+div[id|="numberslider-body"] input:focus::-webkit-slider-runnable-track {
+	background: var(--850);
 }
 
-.layer-breasts {
-	z-index: 35;
+div[id|="numberslider-body"] input::-moz-range-track {
+	background: var(--850);
+	border: 1px solid var(--750);
+	border-radius: 0;
+	cursor: pointer;
+	height: 10px;
+	width: 100%;
 }
 
-.layer-tanbreasts {
-	z-index: 30;
+div[id|="numberslider-body"] input::-moz-range-thumb {
+	background: var(--200);
+	border: 3px solid var(--300);
+	border-radius: 0;
+	cursor: pointer;
+	height: 18px;
+	width: 33px;
 }
 
-.layer-blush {
-	z-index: 50;
+div[id|="numberslider-body"] input::-ms-track {
+	background: transparent;
+	border-color: transparent;
+	color: transparent;
+	cursor: pointer;
+	height: 10px;
+	width: 99%;
+	/* fallback for MS browsers without support for calc() */
+	width: calc(100% - 1px);
 }
 
-.layer-freckles {
-	z-index: 51;
+div[id|="numberslider-body"] input::-ms-fill-lower {
+	background: var(--850);
+	border: 1px solid var(--750);
+	border-radius: 0;
 }
 
-.layer-skin {
-	z-index: 52;
+div[id|="numberslider-body"] input::-ms-fill-upper {
+	background: var(--850);
+	border: 1px solid var(--750);
+	border-radius: 0;
 }
 
-.layer-tears {
-	z-index: 55;
+div[id|="numberslider-body"] input::-ms-thumb {
+	background: var(--200);
+	border: 3px solid var(--300);
+	border-radius: 0;
+	cursor: pointer;
+	height: 16px;
+	width: 33px;
 }
 
-.layer-backbrow {
-	z-index: 58;
+.description {
+	font-size: 0.9em;
+	color: var(--500);
 }
 
-.layer-hair {
-	z-index: 60;
+.small-description {
+	font-size: small;
+	color: var(--500);
 }
 
-.layer-brow {
-	z-index: 62;
+.x-small-description {
+	font-size: x-small;
+	color: var(--400);
 }
 
-.layer-penis-chastity {
-	z-index: 64;
+label {
+	cursor: pointer;
 }
 
-.layer-legs {
-	z-index: 64;
+.meter {
+	position: relative;
+	height: 0.25em;
+	width: 100%;
+	background-color: var(--600);
+	text-align: center;
+	z-index: -10;
 }
 
-.layer-pbhair {
-	z-index: 64;
+.rightMeterText {
+	width: 44%;
+	float: left;
+	text-align: right;
+	padding-right: 2px;
 }
 
-.layer-genitals {
-	z-index: 65;
+.rightMeter {
+	position: relative;
+	height: 0.375em;
+	width: 55%;
+	background-color: var(--600);
+	text-align: center;
+	z-index: -10;
+	float: right;
+	margin-top: 0.6em;
 }
 
-.layer-penis {
-	z-index: 160;
+.redbar {
+	position: absolute;
+	left: 0;
+	top: 0;
+	height: 0.25em;
+	background-color: var(--red);
+	z-index: 0;
+	max-width: 100%;
 }
 
-.layer-pbhairballs {
-	z-index: 161;
+.rightMeter .redbar {
+	height: 0.375em;
 }
 
-.layer-underParasite {
-	z-index: 66;
+.pinkbar {
+	position: absolute;
+	left: 0;
+	top: 0;
+	height: 0.25em;
+	background-color: var(--pink);
+	z-index: 0;
+	max-width: 100%;
 }
 
-.layer-under_lower {
-	z-index: 67;
+.rightMeter .pinkbar {
+	height: 0.375em;
 }
 
-.layer-under_lower-top {
-	z-index: 68;
-}
-
-.layer-under_upper {
-	z-index: 70;
-}
-
-.layer-under_upper-top {
-	z-index: 72;
-}
-
-.layer-under_lower-high {
-	z-index: 75;
-}
-
-.layer-under_lower_top-high {
-	z-index: 77;
-}
-
-.layer-under {
-	z-index: 75;
-}
-
-.layer-feet {
-	z-index: 85;
-}
-
-.layer-lower {
-	z-index: 90;
-}
-
-.layer-lower_top {
-	z-index: 92;
-}
-
-.layer-upper {
-	z-index: 95;
-}
-
-.layer-upper.tucked {
-	z-index: 89;
-}
-
-.layer-upper_top {
-	z-index: 97;
-}
-
-.layer-collar {
-	z-index: 103;
-}
-
-.layer-neck {
-	z-index: 103;
-}
-
-.layer-rightarm {
-	z-index: 105;
-}
-
-.layer-leftarm {
-	z-index: 105;
-}
-
-.layer-armSkin {
-	z-index: 106;
-}
-
-.layer-armTan {
-	z-index: 107;
-}
-
-.layer-leftarmunderclothes {
-	z-index: 109;
-}
-
-.layer-rightarmunderclothes {
-	z-index: 109;
-}
-
-.layer-hands {
-	z-index: 110;
-}
-
-.layer-rightarmclothes {
-	z-index: 112;
-}
-
-.layer-leftarmclothes {
-	z-index: 112;
-}
-
-.layer-lower-high {
-	z-index: 115;
-}
-
-.layer-lower-top-high {
-	z-index: 117;
-}
-
-.layer-hairforwards {
-	z-index: 132;
-}
-
-.layer-fronthair {
-	z-index: 133;
-}
-
-.layer-horns {
-	z-index: 140;
-}
-
-.layer-face {
-	z-index: 145;
-}
-
-.layer-head {
-	z-index: 150;
-}
-
-.layer-over_head {
-	z-index: 152;
-}
-
-.layer-parasite {
-	z-index: 160;
-}
-
-.layer-halo-front {
-	z-index: 160;
-}
-
-.layer-horns-chimera {
-	z-index: 161;
-}
-
-.layer-tailPenisCover {
-	z-index: 165;
-}
-
-.layer-over_lower {
-	z-index: 170;
-}
-
-.layer-over_upper {
-	z-index: 171;
-}
-
-.layer-leftarmoverclothes {
-	z-index: 174;
-}
-
-.layer-rightarmoverclothes {
-	z-index: 174;
-}
-
-#divsex {
-	position: relative;
-	display: inline-block;
-	user-select: none;
-	height: 256px;
-	width: 100%;
-}
-
-#divsex > *,
-#divandroidsex > * {
-	user-select: none;
-	position: absolute;
-	left: 256px;
-	top: 0;
-}
-
-#divandroidsex {
-	position: relative;
-	display: inline-block;
-	height: 256px;
-	width: 100%;
-	left: -256px;
-}
-
-#closepenis,
-#divsex #closepenis {
-	position: absolute;
-	left: 321px;
-	top: -30px;
-	z-index: 250;
-}
-
-#closeanus,
-#divsex #closeanus {
-	position: absolute;
-	left: 451px;
-	top: -30px;
-	z-index: 250;
-}
-
-#closevagina,
-#divsex #closevagina {
-	position: absolute;
-	left: 386px;
-	top: -30px;
-	z-index: 250;
-}
-
-#closechest,
-#divsex #closechest {
-	position: absolute;
-	left: 255px;
-	top: -30px;
-	z-index: 250;
-}
-
-.div_stalk {
-	width: 512px;
-	max-width: 100%;
-	height: 32px;
-	position: relative;
-}
-
-.div_stalk img {
-	max-width: 14.2%;
-	height: auto;
-}
-
-.stalk_1 {
-	left: 0;
-	position: absolute;
-}
-
-.stalk_2 {
-	left: 14.2%;
-	position: absolute;
-}
-
-.stalk_3 {
-	left: 28.4%;
-	position: absolute;
-}
-
-.stalk_4 {
-	left: 42.6%;
-	position: absolute;
-}
-
-.stalk_5 {
-	left: 56.8%;
-	position: absolute;
-}
-
-.stalk_6 {
-	left: 71%;
-	position: absolute;
-}
-
-.stalk_7 {
-	left: 85.2%;
-	position: absolute;
-}
-
-#closechestbreasts,
-#divsex #closechestbreasts {
-	z-index: 270;
-}
-
-#closechestnip,
-#divsex #closechestnip {
-	z-index: 280;
-}
-
-#closechestpenis,
-#divsex #closechestpenis {
-	z-index: 290;
-}
-
-.layer-behind {
-	z-index: -100;
-}
-
-.layer-voreback {
-	z-index: -20;
-}
-
-.layer-sexbaseback {
-	z-index: 1;
-}
-
-.layer-sexBackArm {
-	z-index: 2;
-}
-
-.layer-sexsleeveback {
-	z-index: 3;
-}
-
-.layer-sexpenis {
-	z-index: 5;
-}
-
-.layer-shadowmanbackground {
-	z-index: 5;
-}
-
-.layer-sexlegsback {
-	z-index: 6;
-}
-
-.layer-beastback {
-	z-index: 8;
-}
-
-.layer-sexbase {
-	z-index: 10;
-}
-
-.layer-sexlegsdoggy {
-	z-index: 10;
-}
-
-.layer-sexskinback {
-	z-index: 11;
-}
-
-.layer-sexlegsbackacc {
-	z-index: 13;
-}
-
-.layer-sexbaseoverlay {
-	z-index: 13;
-}
-
-.layer-sexfreckles {
-	z-index: 19;
-}
-
-.layer-sexeyes {
-	z-index: 20;
-}
-
-.layer-sexsclera {
-	z-index: 30;
-}
-
-.layer-sexmouth {
-	z-index: 40;
-}
-
-.layer-sexblush {
-	z-index: 50;
-}
-
-.layer-sexbelly {
-	z-index: 52;
-}
-
-.layer-sexskin {
-	z-index: 55;
-}
-
-.layer-sextears {
-	z-index: 60;
-}
-
-.layer-shadowman {
-	z-index: 60;
-}
-
-.layer-beastfront {
-	z-index: 65;
-}
-
-.layer-shadowmanforeground {
-	z-index: 66;
-}
-
-.layer-sexbrow {
-	z-index: 80;
-}
-
-.layer-sexlashes {
-	z-index: 90;
-}
-
-.layer-sexwings {
-	z-index: 90;
-}
-
-.layer-sexbreastunderupper {
-	z-index: 96;
-}
-
-.layer-sexbreastupper {
-	z-index: 97;
-}
-
-.layer-sextiedoggy {
-	z-index: 99;
-}
-
-/* z-index of bound hands 150, hair 140 */
-.layer-sextiemissionary {
-	z-index: 142;
-}
-
-.layer-sexbasefront {
-	z-index: 100;
-}
-
-.layer-doggyhirsute {
-	z-index: 101;
-}
-
-.layer-sexshoes {
-	z-index: 103;
-}
-
-.layer-sexlegs {
-	z-index: 102;
-}
-
-.layer-sexlegsacc {
-	z-index: 104;
-}
-
-.layer-sexunder {
-	z-index: 105;
-}
-
-.layer-sexbetweenlegs {
-	z-index: 99;
-}
-
-.layer-sexbetweenlegscondom {
-	z-index: 100;
-}
-
-.layer-sexrightleg {
-	z-index: 101;
-}
-
-.layer-sexrightlegskin {
-	z-index: 102;
-}
-
-.layer-sexarmsskin {
-	z-index: 104;
-}
-
-.layer-sexlower {
-	z-index: 106;
-}
-
-.layer-sexupper {
-	z-index: 108;
-}
-
-.layer-sexaboveclothes {
-	z-index: 108;
-}
-
-.layer-sexhands {
-	z-index: 110;
-}
-
-.layer-apparatus {
-	z-index: 130;
-}
-
-.layer-midapparatus {
-	z-index: 131;
-}
-
-.layer-frontapparatus {
-	z-index: 132;
-}
-
-.layer-sexhair {
-	z-index: 140;
-}
-
-.layer-beastaboveplayer {
-	z-index: 145;
-}
-
-.layer-sexarmsbound {
-	z-index: 150;
-}
-
-.layer-sexarmsboundskin {
-	z-index: 151;
-}
-
-.layer-sexmissionaryrightarm {
-	z-index: 153;
-}
-
-.layer-sexrightarmsskin {
-	z-index: 154;
-}
-
-.layer-sexsleeve {
-	z-index: 155;
-}
-
-.layer-beastforeground {
-	z-index: 205;
-}
-
-.layer-beastforeground.front {
-	z-index: 102;
-}
-
-.layer-foreground {
-	z-index: 200;
-}
-
-.layer-frontforeground {
-	z-index: 220;
-}
-
-.layer-frontfrontforeground {
-	z-index: 221;
-}
-
-.freckles {
-	mix-blend-mode: darken;
-	opacity: 0.75;
-}
-
-.shift-right-2 {
-	transform: translateX(2px);
-}
-
-/* ! <<numberpool>> macro set for SugarCube v2 */
-div[id|="numberbox-body"] {
-	display: inline-block;
-}
-
-div[id|="numberbox-body"] input {
-	min-width: 3em;
-	width: 3em;
-	text-align: center;
-}
-
-div[id|="numberbox-body"] button {
-	font-family: tme-fa-icons;
-	font-style: normal;
-	font-weight: normal;
-	font-variant: normal;
-	text-transform: none;
-	line-height: normal;
-	padding: 0.4em 0.6em;
-}
-
-div[id|="numberbox-body"] button[id|="numberbox-minus"] {
-	margin-right: 0.4em;
-}
-
-div[id|="numberbox-body"] button[id|="numberbox-plus"] {
-	margin-left: 0.4em;
-}
-
-div[id|="numberslider-body"] {
-	display: inline-block;
-	width: 100%;
-}
-
-div[id|="numberslider-body"] span {
-	display: inline-block;
-	/* font-size: 1.25em; */
-	margin-left: 0.25em;
-	min-width: 3em;
-	text-align: center;
-	vertical-align: middle;
-}
-
-div[id|="numberslider-body"] .small-description {
-	/* margin-left: -6em; */
-	text-align: left;
-}
-
-div[id|="numberslider-body"] span .inline-colour {
-	margin-left: unset;
-	min-width: unset;
-	vertical-align: unset;
-}
-
-div[id|="numberslider-body"] input {
-	-webkit-appearance: none;
-	width: 95%;
-	height: 1.25em;
-	max-width: 20em;
-	vertical-align: middle;
-	cursor: pointer;
-}
-
-div[id|="numberslider-body-humanpregnancymonths"] input,
-div[id|="numberslider-body-wolfpregnancyweeks"] input {
-	width: 75%;
-	margin-right: 5px;
-}
-
-div[id|="numberslider-body"] input:focus {
-	outline: none;
-}
-
-div[id|="numberslider-body"] input::-webkit-slider-runnable-track {
-	background: var(--850);
-	border: 1px solid var(--750);
-	border-radius: 0;
-	cursor: pointer;
-	height: 10px;
-	width: 100%;
-}
-
-div[id|="numberslider-body"] input::-webkit-slider-thumb {
-	-webkit-appearance: none;
-	background: var(--200);
-	border: 3px solid var(--300);
-	border-radius: 0;
-	cursor: pointer;
-	height: 18px;
-	margin-top: -5px;
-	width: 33px;
-}
-
-div[id|="numberslider-body"] input:focus::-webkit-slider-runnable-track {
-	background: var(--850);
-}
-
-div[id|="numberslider-body"] input::-moz-range-track {
-	background: var(--850);
-	border: 1px solid var(--750);
-	border-radius: 0;
-	cursor: pointer;
-	height: 10px;
-	width: 100%;
-}
-
-div[id|="numberslider-body"] input::-moz-range-thumb {
-	background: var(--200);
-	border: 3px solid var(--300);
-	border-radius: 0;
-	cursor: pointer;
-	height: 18px;
-	width: 33px;
-}
-
-div[id|="numberslider-body"] input::-ms-track {
-	background: transparent;
-	border-color: transparent;
-	color: transparent;
-	cursor: pointer;
-	height: 10px;
-	width: 99%;
-	/* fallback for MS browsers without support for calc() */
-	width: calc(100% - 1px);
-}
-
-div[id|="numberslider-body"] input::-ms-fill-lower {
-	background: var(--850);
-	border: 1px solid var(--750);
-	border-radius: 0;
-}
-
-div[id|="numberslider-body"] input::-ms-fill-upper {
-	background: var(--850);
-	border: 1px solid var(--750);
-	border-radius: 0;
-}
-
-div[id|="numberslider-body"] input::-ms-thumb {
-	background: var(--200);
-	border: 3px solid var(--300);
-	border-radius: 0;
-	cursor: pointer;
-	height: 16px;
-	width: 33px;
-}
-
-.description {
-	font-size: 0.9em;
-	color: var(--500);
-}
-
-.small-description {
-	font-size: small;
-	color: var(--500);
-}
-
-.x-small-description {
-	font-size: x-small;
-	color: var(--400);
-}
-
-label {
-	cursor: pointer;
-}
-
-.meter {
-	position: relative;
-	height: 0.25em;
-	width: 100%;
-	background-color: var(--600);
-	text-align: center;
-	z-index: -10;
-}
-
-.rightMeterText {
-	width: 44%;
-	float: left;
-	text-align: right;
-	padding-right: 2px;
-}
-
-.rightMeter {
-	position: relative;
-	height: 0.375em;
-	width: 55%;
-	background-color: var(--600);
-	text-align: center;
-	z-index: -10;
-	float: right;
-	margin-top: 0.6em;
-}
-
-.redbar {
-	position: absolute;
-	left: 0;
-	top: 0;
-	height: 0.25em;
-	background-color: var(--red);
-	z-index: 0;
-	max-width: 100%;
-}
-
-.rightMeter .redbar {
-	height: 0.375em;
-}
-
-.pinkbar {
-	position: absolute;
-	left: 0;
-	top: 0;
-	height: 0.25em;
-	background-color: var(--pink);
-	z-index: 0;
-	max-width: 100%;
-}
-
-.rightMeter .pinkbar {
-	height: 0.375em;
-}
-
-.purplebar {
-	position: absolute;
-	left: 0;
-	top: 0;
-	height: 0.25em;
-	background-color: var(--purple-secondary);
-	z-index: 0;
-	max-width: 100%;
-}
-
-.rightMeter .purplebar {
-	height: 0.375em;
-}
-
-.bluebar {
-	position: absolute;
-	left: 0;
-	top: 0;
-	height: 0.25em;
-	background-color: var(--blue);
-	z-index: 0;
-	max-width: 100%;
-}
-
-.rightMeter .bluebar {
-	height: 0.375em;
-}
-
-.lbluebar {
-	position: absolute;
-	left: 0;
-	top: 0;
-	height: 0.25em;
-	background-color: var(--blue-secondary);
-	z-index: 0;
-	max-width: 100%;
-}
-
-.rightMeter .lbluebar {
-	height: 0.375em;
-}
-
-.tealbar {
-	position: absolute;
-	left: 0;
-	top: 0;
-	height: 0.25em;
-	background-color: var(--teal);
-	z-index: 0;
-	max-width: 100%;
-}
-
-.rightMeter .tealbar {
-	height: 0.375em;
-}
-
-.greenbar {
-	position: absolute;
-	left: 0;
-	top: 0;
-	height: 0.25em;
-	background-color: var(--green);
-	z-index: 0;
-	max-width: 100%;
-}
-
-.rightMeter .greenbar {
-	height: 0.375em;
-}
-
-.goldbar {
-	position: absolute;
-	left: 0;
-	top: 0;
-	height: 0.25em;
-	background-color: var(--yellow);
-	z-index: 0;
-	max-width: 100%;
-}
-
-.rightMeter .goldbar {
-	height: 0.375em;
-}
-
-#journalNotesTextarea {
-	height: 80%;
-	height: calc(100% - 150px);
-	width: 90%;
-	width: calc(100% - 50px);
-}
-
-#journalNotesTextarea textarea {
-	height: 100%;
-	width: 100%;
-	min-width: 150px;
-}
-
-@media (max-height: 300px) {
-	#journalNotesTextarea {
-		height: 100px;
-	}
-}
-
-/*
- * Hair/Eye/Clothing colour filters
- * Expected document structure:
- * - some outer element has .hair-$haircolour (or .eye-/.lower-/.upper-/.under-) class
- * - inner image element has .colour-hair (or -eye/-lower/-upper/-under) class
- */
-/* Hair: base is red */
-.brows-black,
-.hair-black .colour-hair,
-.pbhair-black {
-	-webkit-filter: hue-rotate(0deg) saturate(15%) brightness(50%) contrast(100%);
-	filter: hue-rotate(0deg) saturate(15%) brightness(50%) contrast(100%);
-}
-
-.brows-platinum-blond,
-.brows-platinumblond,
-.hair-platinum-blond .colour-hair,
-.pbhair-platinum-blond,
-.hair-platinumblond .colour-hair,
-.pbhair-platinumblond {
-	-webkit-filter: hue-rotate(57deg) saturate(60%) brightness(170%) contrast(80%) sepia(0);
-	filter: hue-rotate(57deg) saturate(60%) brightness(170%) contrast(80%) sepia(0);
-}
-
-.brows-ashy-blond,
-.brows-ashyblond,
-.hair-ashy-blond .colour-hair,
-.pbhair-ashy-blond,
-.hair-ashyblond .colour-hair,
-.pbhair-ashyblond {
-	-webkit-filter: hue-rotate(50deg) saturate(30%) brightness(140%) contrast(80%);
-	filter: hue-rotate(50deg) saturate(30%) brightness(140%) contrast(80%);
-}
-
-.brows-blond,
-.hair-blond .colour-hair,
-.pbhair-blond {
-	-webkit-filter: hue-rotate(60deg) saturate(80%) brightness(135%) contrast(90%);
-	filter: hue-rotate(60deg) saturate(80%) brightness(135%) contrast(90%);
-}
-
-.brows-blue,
-.hair-blue .colour-hair,
-.pbhair-blue {
-	-webkit-filter: hue-rotate(200deg) saturate(200%) brightness(58%) contrast(150%);
-	filter: hue-rotate(200deg) saturate(200%) brightness(58%) contrast(150%);
-}
-
-.hair-neon-blue .colour-hair,
-.pbhair-neon-blue,
-.hair-neonblue .colour-hair,
-.pbhair-neonblue {
-	-webkit-filter: hue-rotate(200deg) saturate(220%) brightness(130%) contrast(100%);
-	filter: hue-rotate(200deg) saturate(220%) brightness(130%) contrast(100%);
-}
-
-.brows-neon-blue,
-.brows-neonblue {
-	-webkit-filter: hue-rotate(200deg) saturate(220%) brightness(300%) contrast(100%);
-	filter: hue-rotate(200deg) saturate(220%) brightness(300%) contrast(100%);
-}
-
-.brows-brown,
-.hair-brown .colour-hair,
-.pbhair-brown {
-	-webkit-filter: hue-rotate(40deg) saturate(60%) brightness(71%) contrast(100%);
-	filter: hue-rotate(40deg) saturate(60%) brightness(71%) contrast(100%);
-}
-
-.brows-light-brown,
-.brows-lightbrown,
-.hair-light-brown .colour-hair,
-.pbhair-light-brown,
-.hair-lightbrown .colour-hair,
-.pbhair-lightbrown {
-	-webkit-filter: hue-rotate(40deg) saturate(70%) brightness(100%) contrast(110%);
-	filter: hue-rotate(40deg) saturate(70%) brightness(100%) contrast(110%);
-}
-
-.brows-dark-brown,
-.brows-darkbrown,
-.hair-dark-brown .colour-hair,
-.pbhair-dark-brown,
-.hair-darkbrown .colour-hair,
-.pbhair-darkbrown {
-	-webkit-filter: hue-rotate(30deg) saturate(70%) brightness(50%) contrast(110%);
-	filter: hue-rotate(30deg) saturate(70%) brightness(50%) contrast(110%);
-}
-
-.brows-strawberry-blond,
-.brows-strawberryblond,
-.hair-strawberry-blond .colour-hair,
-.pbhair-strawberry-blond,
-.hair-strawberryblond .colour-hair,
-.pbhair-strawberryblond {
-	-webkit-filter: hue-rotate(30deg) saturate(80%) brightness(150%) contrast(90%);
-	filter: hue-rotate(30deg) saturate(80%) brightness(150%) contrast(90%) sepia(1%);
-}
-
-.hair-ginger .colour-hair,
-.pbhair-ginger {
-	-webkit-filter: hue-rotate(30deg) saturate(150%) brightness(110%) contrast(90%);
-	filter: hue-rotate(30deg) saturate(150%) brightness(110%) contrast(90%);
-}
-
-.brows-ginger {
-	-webkit-filter: hue-rotate(30deg) brightness(430%) saturate(60%) contrast(120%);
-	filter: hue-rotate(30deg) brightness(430%) saturate(60%) contrast(120%);
-}
-
-.brows-blood-orange,
-.brows-bloodorange,
-.hair-blood-orange .colour-hair,
-.pbhair-blood-orange,
-.hair-bloodorange .colour-hair,
-.pbhair-bloodorange {
-	-webkit-filter: hue-rotate(14deg) saturate(150%) brightness(100%) contrast(120%);
-	filter: hue-rotate(14deg) saturate(150%) brightness(100%) contrast(120%);
-}
-
-.brows-burnt-orange,
-.brows-burntorange,
-.hair-burnt-orange .colour-hair,
-.pbhair-burnt-orange,
-.hair-burntorange .colour-hair,
-.pbhair-burntorange {
-	-webkit-filter: hue-rotate(34deg) contrast(57%) saturate(154%) brightness(104%);
-	filter: hue-rotate(34deg) contrast(57%) saturate(154%) brightness(104%);
-}
-
-.brows-jet-black,
-.brows-jetblack,
-.hair-jet-black .colour-hair,
-.pbhair-jet-black,
-.hair-jetblack .colour-hair,
-.pbhair-jetblack {
-	-webkit-filter: hue-rotate(0deg) saturate(0%) brightness(40%) contrast(100%);
-	filter: hue-rotate(0deg) saturate(0%) brightness(40%) contrast(100%);
-}
-
-.brows-soft-blond,
-.brows-softblond,
-.hair-soft-blond .colour-hair,
-.pbhair-soft-blond,
-.hair-softblond .colour-hair,
-.pbhair-softblond {
-	-webkit-filter: hue-rotate(57deg) saturate(250%) brightness(180%) contrast(60%) sepia(0.75);
-	filter: hue-rotate(57deg) saturate(250%) brightness(180%) contrast(60%) sepia(0.75);
-}
-
-.brows-golden,
-.hair-golden .colour-hair,
-.pbhair-golden {
-	-webkit-filter: hue-rotate(60deg) saturate(130%) brightness(135%) contrast(100%);
-	filter: hue-rotate(60deg) saturate(130%) brightness(135%) contrast(100%);
-}
-
-.brows-soft-brown,
-.brows-softbrown,
-.hair-soft-brown .colour-hair,
-.pbhair-soft-brown,
-.hair-softbrown .colour-hair,
-.pbhair-softbrown {
-	-webkit-filter: hue-rotate(40deg) saturate(100%) brightness(80%) contrast(100%);
-	filter: hue-rotate(40deg) saturate(100%) brightness(80%) contrast(100%);
-}
-
-.brows-dark-lime,
-.brows-darklime,
-.hair-dark-lime .colour-hair,
-.pbhair-dark-lime,
-.hair-darklime .colour-hair,
-.pbhair-darklime {
-	-webkit-filter: hue-rotate(90deg) saturate(100%) brightness(100%) contrast(100%);
-	filter: hue-rotate(90deg) saturate(100%) brightness(100%) contrast(100%);
-}
-
-.brows-bright-pink,
-.brows-brightpink,
-.hair-bright-pink .colour-hair,
-.pbhair-bright-pink,
-.hair-brightpink .colour-hair,
-.pbhair-brightpink {
-	-webkit-filter: hue-rotate(-20deg) saturate(70%) brightness(130%) contrast(100%);
-	filter: hue-rotate(-20deg) saturate(70%) brightness(130%) contrast(100%);
-}
-
-.brows-medium-purple,
-.brows-mediumpurple,
-.hair-medium-purple .colour-hair,
-.pbhair-medium-purple,
-.hair-mediumpurple .colour-hair,
-.pbhair-mediumpurple {
-	-webkit-filter: hue-rotate(-80deg) saturate(110%) brightness(60%) contrast(200%);
-	filter: hue-rotate(-80deg) saturate(110%) brightness(60%) contrast(200%);
-}
-
-.brows-green,
-.hair-green .colour-hair,
-.pbhair-green {
-	-webkit-filter: hue-rotate(125deg) saturate(100%) brightness(80%) contrast(100%);
-	filter: hue-rotate(125deg) saturate(100%) brightness(80%) contrast(100%);
-}
-
-.hair-toxic-green .colour-hair,
-.pbhair-toxic-green,
-.hair-toxicgreen .colour-hair,
-.pbhair-toxicgreen {
-	-webkit-filter: hue-rotate(80deg) saturate(220%) brightness(130%) contrast(100%);
-	filter: hue-rotate(80deg) saturate(220%) brightness(130%) contrast(100%);
-}
-
-.brows-toxic-green,
-.brows-toxicgreen {
-	-webkit-filter: hue-rotate(80deg) saturate(220%) brightness(330%) contrast(100%);
-	filter: hue-rotate(80deg) saturate(220%) brightness(330%) contrast(100%);
-}
-
-.hair-teal .colour-hair,
-.pbhair-teal {
-	-webkit-filter: hue-rotate(155deg) saturate(100%) brightness(88%) contrast(100%);
-	filter: hue-rotate(155deg) saturate(100%) brightness(88%) contrast(100%);
-}
-
-.brows-teal {
-	-webkit-filter: hue-rotate(155deg) saturate(100%) brightness(168%) contrast(100%);
-	filter: hue-rotate(155deg) saturate(100%) brightness(168%) contrast(100%);
-}
-
-.brows-pink,
-.hair-pink .colour-hair,
-.pbhair-pink {
-	-webkit-filter: hue-rotate(-20deg) saturate(70%) brightness(100%) contrast(100%);
-	filter: hue-rotate(-20deg) saturate(70%) brightness(100%) contrast(100%);
-}
-
-.brows-hot-pink,
-.brows-hotpink,
-.hair-hot-pink .colour-hair,
-.pbhair-hot-pink,
-.hair-hotpink .colour-hair,
-.pbhair-hotpink {
-	-webkit-filter: hue-rotate(320deg) saturate(100%) brightness(120%) contrast(100%);
-	filter: hue-rotate(320deg) saturate(100%) brightness(120%) contrast(100%);
-}
-
-.brows-soft-pink,
-.brows-softpink,
-.hair-soft-pink .colour-hair,
-.pbhair-soft-pink,
-.hair-softpink .colour-hair,
-.pbhair-softpink {
-	-webkit-filter: hue-rotate(-20deg) saturate(30%) brightness(150%) contrast(100%);
-	filter: hue-rotate(20deg) saturate(30%) brightness(150%) contrast(100%);
-}
-
-.brows-purple,
-.hair-purple .colour-hair,
-.pbhair-purple {
-	-webkit-filter: hue-rotate(-70deg) saturate(110%) brightness(50%) contrast(200%);
-	filter: hue-rotate(-70deg) saturate(110%) brightness(50%) contrast(200%);
-}
-
-.brows-bright-purple,
-.brows-brightpurple,
-.hair-bright-purple .colour-hair,
-.pbhair-bright-purple,
-.hair-brightpurple .colour-hair,
-.pbhair-brightpurple {
-	-webkit-filter: hue-rotate(259deg) saturate(220%) brightness(130%) contrast(100%);
-	filter: hue-rotate(259deg) saturate(220%) brightness(130%) contrast(100%);
-}
-
-.brows-red,
-.hair-red .colour-hair,
-.pbhair-red {
-	-webkit-filter: hue-rotate(0deg) saturate(100%) brightness(100%) contrast(100%);
-	filter: hue-rotate(0deg) saturate(100%) brightness(100%) contrast(100%);
-}
-
-.brows-crimson,
-.hair-crimson .colour-hair,
-.pbhair-crimson {
-	-webkit-filter: hue-rotate(0deg) saturate(155%) brightness(65%) contrast(135%);
-	filter: hue-rotate(0deg) saturate(155%) brightness(65%) contrast(135%);
-}
-
-.hair-white .colour-hair,
-.pbhair-white {
-	-webkit-filter: hue-rotate(0deg) saturate(0%) brightness(160%) contrast(100%);
-	filter: hue-rotate(0deg) saturate(0%) brightness(160%) contrast(100%);
-}
-
-.brows-white {
-	-webkit-filter: hue-rotate(250deg) saturate(0%) brightness(620%) contrast(100%);
-	filter: hue-rotate(250deg) saturate(0%) brightness(620%) contrast(100%);
-}
-
-.hair-snow-white .colour-hair,
-.pbhair-snow-white,
-.hair-snowwhite .colour-hair,
-.pbhair-snowwhite {
-	-webkit-filter: hue-rotate(0deg) saturate(0%) brightness(190%) contrast(100%);
-	filter: hue-rotate(0deg) saturate(0%) brightness(190%) contrast(100%);
-}
-
-.brows-snow-white,
-.brows-snowwhite {
-	-webkit-filter: hue-rotate(0deg) saturate(0%) brightness(690%) contrast(100%);
-	filter: hue-rotate(0deg) saturate(0%) brightness(690%) contrast(100%);
-}
-
-.hair-deep-blue .colour-hair,
-.pbhair-deep-blue,
-.hair-deepblue .colour-hair,
-.pbhair-deepblue {
-	-webkit-filter: hue-rotate(240deg) saturate(100%) brightness(40%) contrast(120%);
-	filter: hue-rotate(240deg) saturate(100%) brightness(40%) contrast(120%);
-}
-
-.brows-deep-blue,
-.brows-deepblue {
-	-webkit-filter: hue-rotate(240deg) saturate(100%) brightness(120%) contrast(120%);
-	filter: hue-rotate(240deg) saturate(100%) brightness(120%) contrast(120%);
-}
-
-/* Eye: base is hazel */
-.eye-dark-blue {
-	-webkit-filter: hue-rotate(170deg) brightness(90%) saturate(100%) contrast(140%);
-	filter: hue-rotate(170deg) brightness(90%) saturate(100%) contrast(140%);
-}
-
-.eye-light-blue {
-	-webkit-filter: hue-rotate(160deg) brightness(180%) saturate(120%) contrast(100%);
-	filter: hue-rotate(160deg) brightness(180%) saturate(120%) contrast(100%);
-}
-
-.eye-purple {
-	-webkit-filter: hue-rotate(-120deg) brightness(80%) saturate(200%) contrast(190%);
-	filter: hue-rotate(-120deg) brightness(80%) saturate(200%) contrast(190%);
-}
-
-.eye-hazel {
-	-webkit-filter: hue-rotate(0deg) saturate(100%) brightness(100%) contrast(100%);
-	filter: hue-rotate(0deg) saturate(100%) brightness(100%) contrast(100%);
-}
-
-.eye-amber {
-	-webkit-filter: hue-rotate(0deg) brightness(170%) saturate(100%) contrast(100%);
-	filter: hue-rotate(0deg) brightness(170%) saturate(100%) contrast(100%);
-}
-
-.eye-green {
-	-webkit-filter: hue-rotate(30deg) brightness(140%) saturate(100%) contrast(100%);
-	filter: hue-rotate(30deg) brightness(140%) saturate(100%) contrast(100%);
-}
-
-.eye-light-green {
-	-webkit-filter: hue-rotate(30deg) brightness(170%) saturate(160%) contrast(100%);
-	filter: hue-rotate(30deg) brightness(170%) saturate(160%) contrast(100%);
-}
-
-.eye-limegreen,
-.eye-lime-green {
-	-webkit-filter: hue-rotate(85deg) brightness(155%) saturate(124%) contrast(140%);
-	filter: hue-rotate(85deg) brightness(155%) saturate(124%) contrast(140%);
-}
-
-.eye-red {
-	-webkit-filter: hue-rotate(335deg) saturate(200%) brightness(100%) contrast(140%);
-	filter: hue-rotate(335deg) saturate(200%) brightness(100%) contrast(140%);
-}
-
-.eye-pink {
-	-webkit-filter: hue-rotate(-105deg) brightness(150%) saturate(120%) contrast(120%);
-	filter: hue-rotate(-105deg) brightness(150%) saturate(120%) contrast(120%);
-}
-
-.eye-grey {
-	-webkit-filter: hue-rotate(0deg) brightness(140%) saturate(0%) contrast(100%);
-	filter: hue-rotate(0deg) brightness(140%) saturate(0%) contrast(100%);
-}
-
-.eye-lightgrey,
-.eye-light-grey {
-	-webkit-filter: hue-rotate(0deg) brightness(220%) saturate(0%) contrast(100%);
-	filter: hue-rotate(0deg) brightness(220%) saturate(0%) contrast(100%);
-}
-
-.eye-redPossessed {
-	-webkit-filter: hue-rotate(335deg) saturate(200%) brightness(90%) contrast(140%);
-	filter: hue-rotate(335deg) saturate(200%) brightness(90%) contrast(140%);
-}
-
-.eye-bluePossessed {
-	-webkit-filter: hue-rotate(180deg) brightness(100%) saturate(100%) contrast(140%);
-	filter: hue-rotate(180deg) brightness(100%) saturate(100%) contrast(140%);
-}
-
-.eye-cat_tf_stage_0_left {
-	-webkit-filter: hue-rotate(245deg) brightness(99%) saturate(90%) contrast(137%);
-	filter: hue-rotate(245deg) brightness(99%) saturate(90%) contrast(137%);
-}
-
-.eye-cat_tf_stage_0_right {
-	-webkit-filter: hue-rotate(245deg) brightness(99%) saturate(90%) contrast(137%);
-	filter: hue-rotate(245deg) brightness(99%) saturate(90%) contrast(137%);
-}
-
-.eye-cat_tf_stage_1_left {
-	-webkit-filter: hue-rotate(211deg) brightness(105%) saturate(109%) contrast(160%);
-	filter: hue-rotate(211deg) brightness(105%) saturate(109%) contrast(160%);
-}
-
-.eye-cat_tf_stage_1_right {
-	-webkit-filter: hue-rotate(211deg) brightness(105%) saturate(109%) contrast(160%);
-	filter: hue-rotate(211deg) brightness(105%) saturate(109%) contrast(160%);
-}
-
-.eye-cat_tf_stage_2_left {
-	-webkit-filter: hue-rotate(117deg) brightness(139%) saturate(0%) contrast(210%);
-	filter: hue-rotate(117deg) brightness(139%) saturate(0%) contrast(210%);
-}
-
-.eye-cat_tf_stage_2_right {
-	-webkit-filter: hue-rotate(211deg) brightness(107%) saturate(140%) contrast(100%);
-	filter: hue-rotate(211deg) brightness(107%) saturate(140%) contrast(100%);
-}
-
-.eye-cat_tf_stage_3_left {
-	-webkit-filter: hue-rotate(127deg) brightness(120%) saturate(109%) contrast(100%);
-	filter: hue-rotate(127deg) brightness(120%) saturate(109%) contrast(100%);
-}
-
-.eye-cat_tf_stage_3_right {
-	-webkit-filter: hue-rotate(140deg) brightness(100%) saturate(210%) contrast(200%);
-	filter: hue-rotate(140deg) brightness(100%) saturate(210%) contrast(200%);
-}
-
-/* Clothing specific classes */
-/* Clothing opacity classes need to be applied to a div with the images inside */
-.clothes-div img {
-	position: absolute;
-}
-
-.clothes-damp {
-	-webkit-filter: opacity(0.9);
-	filter: opacity(0.9);
-}
-
-.clothes-wet {
-	-webkit-filter: opacity(0.7);
-	filter: opacity(0.7);
-}
-
-.clothes-drenshed {
-	-webkit-filter: opacity(0.5);
-	filter: opacity(0.5);
-}
-
-/* Clothing: base is red */
-.clothes-lime-green {
-	-webkit-filter: hue-rotate(85deg) brightness(185%) saturate(294%) contrast(120%);
-	filter: hue-rotate(85deg) brightness(185%) saturate(294%) contrast(120%);
-}
-
-.clothes-blue {
-	-webkit-filter: hue-rotate(-120deg) saturate(100%) brightness(100%) contrast(100%);
-	filter: hue-rotate(-120deg) saturate(100%) brightness(100%) contrast(100%);
-}
-
-.clothes-light-blue {
-	-webkit-filter: hue-rotate(210deg) saturate(20%) brightness(260%) contrast(100%);
-	filter: hue-rotate(210deg) saturate(20%) brightness(260%) contrast(100%);
-}
-
-.clothes-white {
-	-webkit-filter: hue-rotate(0deg) saturate(0%) brightness(440%) contrast(140%);
-	filter: hue-rotate(0deg) saturate(0%) brightness(440%) contrast(140%);
-}
-
-.clothes-pale-white {
-	-webkit-filter: hue-rotate(0deg) saturate(0%) brightness(250%) contrast(100%);
-	filter: hue-rotate(0deg) saturate(0%) brightness(250%) contrast(100%);
-}
-
-.clothes-red {
-	-webkit-filter: hue-rotate(0deg) saturate(100%) brightness(100%) contrast(100%);
-	filter: hue-rotate(0deg) saturate(100%) brightness(100%) contrast(100%);
-}
-
-.clothes-green {
-	-webkit-filter: hue-rotate(120deg) saturate(100%) brightness(150%) contrast(100%);
-	filter: hue-rotate(120deg) saturate(100%) brightness(150%) contrast(100%);
-}
-
-.clothes-light-green {
-	-webkit-filter: hue-rotate(90deg) saturate(20%) brightness(260%) contrast(100%);
-	filter: hue-rotate(90deg) saturate(20%) brightness(260%) contrast(100%);
-}
-
-.clothes-black {
-	-webkit-filter: hue-rotate(0deg) saturate(0%) brightness(110%) contrast(110%);
-	filter: hue-rotate(0deg) saturate(0%) brightness(110%) contrast(110%);
-}
-
-.clothes-fleshy {
-	-webkit-filter: hue-rotate(30deg) saturate(20%) brightness(410%) contrast(100%);
-	filter: hue-rotate(30deg) saturate(20%) brightness(410%) contrast(100%);
-}
-
-.clothes-pink {
-	-webkit-filter: hue-rotate(-30deg) saturate(50%) contrast(100%) brightness(160%);
-	filter: hue-rotate(-30deg) saturate(50%) contrast(100%) brightness(160%);
-}
-
-.clothes-light-pink {
-	-webkit-filter: hue-rotate(-40deg) saturate(20%) brightness(260%) contrast(100%);
-	filter: hue-rotate(-40deg) saturate(20%) brightness(260%) contrast(100%);
-}
-
-.clothes-purple {
-	-webkit-filter: hue-rotate(-80deg) saturate(100%) brightness(100%) contrast(100%);
-	filter: hue-rotate(-80deg) saturate(100%) brightness(100%) contrast(100%);
-}
-
-.clothes-tangerine {
-	-webkit-filter: hue-rotate(60deg) saturate(150%) brightness(200%) contrast(100%);
-	filter: hue-rotate(60deg) saturate(150%) brightness(200%) contrast(100%);
-}
-
-.clothes-pale-tangerine {
-	-webkit-filter: hue-rotate(60deg) saturate(400%) brightness(130%) contrast(100%);
-	filter: hue-rotate(60deg) saturate(400%) brightness(130%) contrast(100%);
-}
-
-.clothes-teal {
-	-webkit-filter: hue-rotate(-180deg) saturate(75%) brightness(200%) contrast(100%);
-	filter: hue-rotate(-180deg) saturate(75%) brightness(200%) contrast(100%);
-}
-
-.clothes-yellow {
-	-webkit-filter: hue-rotate(65deg) saturate(100%) brightness(290%) contrast(300%) sepia(0.55);
-	filter: hue-rotate(65deg) saturate(100%) brightness(290%) contrast(300%) sepia(0.55);
-}
-
-.clothes-pale-yellow {
-	-webkit-filter: hue-rotate(65deg) saturate(100%) brightness(250%) contrast(120%);
-	filter: hue-rotate(65deg) saturate(100%) brightness(250%) contrast(120%);
-}
-
-.clothes-brown {
-	-webkit-filter: hue-rotate(55deg) saturate(100%) brightness(90%) contrast(100%);
-	filter: hue-rotate(55deg) saturate(100%) brightness(90%) contrast(100%);
-}
-
-.clothes-tan {
-	-webkit-filter: hue-rotate(60.3deg) saturate(17.5%) brightness(270%);
-	filter: hue-rotate(60.3deg) saturate(17.5%) brightness(270%);
-}
-
-.clothes-grey {
-	-webkit-filter: hue-rotate(58.8deg) saturate(5%) brightness(270%);
-	filter: hue-rotate(58.8deg) saturate(5%) brightness(270%);
-}
-
-.clothes-sand {
-	-webkit-filter: hue-rotate(61deg) saturate(20%) brightness(370%);
-	filter: hue-rotate(61deg) saturate(20%) brightness(370%);
-}
-
-.clothes-off-white {
-	-webkit-filter: hue-rotate(70deg) saturate(1.3%) brightness(360%);
-	filter: hue-rotate(70deg) saturate(1.3%) brightness(360%);
-}
-
-.clothes-navy {
-	-webkit-filter: hue-rotate(250deg) saturate(7%) brightness(77%);
-	filter: hue-rotate(250deg) saturate(7%) brightness(77%);
-}
-
-.clothes-olive {
-	-webkit-filter: hue-rotate(67deg) saturate(24.5%) brightness(137%);
-	filter: hue-rotate(67deg) saturate(24.5%) brightness(137%);
-}
-
-.clothes-wine {
-	-webkit-filter: hue-rotate(351deg) saturate(28%) brightness(90%);
-	filter: hue-rotate(351deg) saturate(28%) brightness(90%);
-}
-
-.clothes-steel {
-	-webkit-filter: saturate(0%) brightness(310%) sepia(10%);
-	filter: saturate(0%) brightness(310%) sepia(10%);
-}
-
-.clothes-blue-steel {
-	-webkit-filter: saturate(0%) brightness(160%) sepia(80%) hue-rotate(180deg);
-	filter: saturate(0%) brightness(160%) sepia(80%) hue-rotate(180deg);
-}
-
-.clothes-bronze {
-	-webkit-filter: hue-rotate(63deg) saturate(60%) brightness(260%);
-	filter: hue-rotate(63deg) saturate(60%) brightness(260%);
-}
-
-.clothes-gold {
-	-webkit-filter: hue-rotate(68deg) saturate(220%) brightness(340%);
-	filter: hue-rotate(68deg) saturate(220%) brightness(340%);
-}
-
-.clothes-silver {
-	-webkit-filter: saturate(0%) brightness(400%);
-	filter: saturate(0%) brightness(400%);
-}
-
-/* adult shop fleshy colour begin; once Old Clothing classes become obsolete delete these classes as well */
-.upper-fleshy .colour-upper,
-.lower-fleshy .colour-lower,
-.under_lower-fleshy .colour-under_lower,
-.under_upper-fleshy .colour-under_upper,
-.genitals-fleshy .colour-genitals,
-.head-fleshy .colour-head,
-.face-fleshy .colour-face,
-.neck-fleshy .colour-neck,
-.hands-fleshy .colour-hands,
-.legs-fleshy .colour-legs,
-.feet-fleshy .colour-feet,
-.upper_acc-fleshy .colour-upper_acc,
-.lower_acc-fleshy .colour-lower_acc,
-.under_lower_acc-fleshy .colour-under_lower_acc,
-.under_upper_acc-fleshy .colour-under_upper_acc,
-.head_acc-fleshy .colour-head_acc,
-.face_acc-fleshy .colour-face_acc,
-.neck_acc-fleshy .colour-neck_acc,
-.hands_acc-fleshy .colour-hands_acc,
-.legs_acc-fleshy .colour-legs_acc,
-.feet_acc-fleshy .colour-feet_acc,
-.icon-fleshy {
-	-webkit-filter: hue-rotate(30deg) saturate(20%) brightness(410%) contrast(100%);
-	filter: hue-rotate(30deg) saturate(20%) brightness(410%) contrast(100%);
-}
-/* adult shop fleshy colour end */
-
-/* Old Clothing classes, need to be removed once all use of them is replaced, this includes the wetness classes */
-.upper-blue .colour-upper,
-.lower-blue .colour-lower,
-.under_lower-blue .colour-under_lower,
-.under_upper-blue .colour-under_upper,
-.head-blue .colour-head,
-.face-blue .colour-face,
-.neck-blue .colour-neck,
-.hands-blue .colour-hands,
-.legs-blue .colour-legs,
-.feet-blue .colour-feet,
-.upper_acc-blue .colour-upper_acc,
-.lower_acc-blue .colour-lower_acc,
-.under_lower_acc-blue .colour-under_lower_acc,
-.under_upper_acc-blue .colour-under_upper_acc,
-.head_acc-blue .colour-head_acc,
-.face_acc-blue .colour-face_acc,
-.neck_acc-blue .colour-neck_acc,
-.hands_acc-blue .colour-hands_acc,
-.legs_acc-blue .colour-legs_acc,
-.feet_acc-blue .colour-feet_acc,
-.icon-blue {
-	-webkit-filter: hue-rotate(-120deg) saturate(100%) brightness(100%) contrast(100%);
-	filter: hue-rotate(-120deg) saturate(100%) brightness(100%) contrast(100%);
-}
-
-.upper-blue-steel .colour-upper,
-.lower-blue-steel .colour-lower,
-.under_lower-blue-steel .colour-under_lower,
-.under_upper-blue-steel .colour-under_upper,
-.head-blue-steel .colour-head,
-.face-blue-steel .colour-face,
-.neck-blue-steel .colour-neck,
-.hands-blue-steel .colour-hands,
-.legs-blue-steel .colour-legs,
-.feet-blue-steel .colour-feet,
-.upper_acc-blue-steel .colour-upper_acc,
-.lower_acc-blue-steel .colour-lower_acc,
-.under_lower_acc-blue-steel .colour-under_lower_acc,
-.under_upper_acc-blue-steel .colour-under_upper_acc,
-.head_acc-blue-steel .colour-head_acc,
-.face_acc-blue-steel .colour-face_acc,
-.neck_acc-blue-steel .colour-neck_acc,
-.hands_acc-blue-steel .colour-hands_acc,
-.legs_acc-blue-steel .colour-legs_acc,
-.feet_acc-blue-steel .colour-feet_acc,
-.icon-blue-steel {
-	-webkit-filter: saturate(0%) brightness(160%) sepia(80%) hue-rotate(180deg);
-	filter: saturate(0%) brightness(160%) sepia(80%) hue-rotate(180deg);
-}
-
-.upper-light-blue .colour-upper,
-.lower-light-blue .colour-lower,
-.under_lower-light-blue .colour-under_lower,
-.under_upper-light-blue .colour-under_upper,
-.head-light-blue .colour-head,
-.face-light-blue .colour-face,
-.neck-light-blue .colour-neck,
-.hands-light-blue .colour-hands,
-.legs-light-blue .colour-legs,
-.feet-light-blue .colour-feet,
-.upper_acc-light-blue .colour-upper_acc,
-.lower_acc-light-blue .colour-lower_acc,
-.under_lower_acc-light-blue .colour-under_lower_acc,
-.under_upper_acc-light-blue .colour-under_upper_acc,
-.head_acc-light-blue .colour-head_acc,
-.face_acc-light-blue .colour-face_acc,
-.neck_acc-light-blue .colour-neck_acc,
-.hands_acc-light-blue .colour-hands_acc,
-.legs_acc-light-blue .colour-legs_acc,
-.feet_acc-light-blue .colour-feet_acc,
-.icon-light-blue {
-	-webkit-filter: hue-rotate(210deg) saturate(20%) brightness(260%) contrast(100%);
-	filter: hue-rotate(210deg) saturate(20%) brightness(260%) contrast(100%);
-}
-
-.upper-white .colour-upper,
-.lower-white .colour-lower,
-.under_lower-white .colour-under_lower,
-.under_upper-white .colour-under_upper,
-.head-white .colour-head,
-.face-white .colour-face,
-.neck-white .colour-neck,
-.hands-white .colour-hands,
-.legs-white .colour-legs,
-.feet-white .colour-feet,
-.upper_acc-white .colour-upper_acc,
-.lower_acc-white .colour-lower_acc,
-.under_lower_acc-white .colour-under_lower_acc,
-.under_upper_acc-white .colour-under_upper_acc,
-.head_acc-white .colour-head_acc,
-.face_acc-white .colour-face_acc,
-.neck_acc-white .colour-neck_acc,
-.hands_acc-white .colour-hands_acc,
-.legs_acc-white .colour-legs_acc,
-.feet_acc-white .colour-feet_acc,
-.icon-white,
-.upper-pale-white .colour-upper,
-.lower-pale-white .colour-lower,
-.under_lower-pale-white .colour-under_lower,
-.under_upper-pale-white .colour-under_upper,
-.head-pale-white .colour-head,
-.face-pale-white .colour-face,
-.neck-pale-white .colour-neck,
-.hands-pale-white .colour-hands,
-.legs-pale-white .colour-legs,
-.feet-pale-white .colour-feet,
-.upper_acc-pale-white .colour-upper_acc,
-.lower_acc-pale-white .colour-lower_acc,
-.under_lower_acc-pale-white .colour-under_lower_acc,
-.under_upper_acc-pale-white .colour-under_upper_acc,
-.head_acc-pale-white .colour-head_acc,
-.face_acc-pale-white .colour-face_acc,
-.neck_acc-pale-white .colour-neck_acc,
-.hands_acc-pale-white .colour-hands_acc,
-.legs_acc-pale-white .colour-legs_acc,
-.feet_acc-pale-white .colour-feet_acc,
-.icon-pale-white {
-	-webkit-filter: hue-rotate(0deg) saturate(0%) brightness(440%) contrast(140%);
-	filter: hue-rotate(0deg) saturate(0%) brightness(440%) contrast(140%);
-}
-
-.upper-red .colour-upper,
-.lower-red .colour-lower,
-.under_lower-red .colour-under_lower,
-.under_upper-red .colour-under_upper,
-.head-red .colour-head,
-.face-red .colour-face,
-.neck-red .colour-neck,
-.hands-red .colour-hands,
-.legs-red .colour-legs,
-.feet-red .colour-feet,
-.upper_acc-red .colour-upper_acc,
-.lower_acc-red .colour-lower_acc,
-.under_lower_acc-red .colour-under_lower_acc,
-.under_upper_acc-red .colour-under_upper_acc,
-.head_acc-red .colour-head_acc,
-.face_acc-red .colour-face_acc,
-.neck_acc-red .colour-neck_acc,
-.hands_acc-red .colour-hands_acc,
-.legs_acc-red .colour-legs_acc,
-.feet_acc-red .colour-feet_acc,
-.icon-red {
-	-webkit-filter: hue-rotate(0deg) saturate(100%) brightness(100%) contrast(100%);
-	filter: hue-rotate(0deg) saturate(100%) brightness(100%) contrast(100%);
-}
-
-.upper-green .colour-upper,
-.lower-green .colour-lower,
-.under_lower-green .colour-under_lower,
-.under_upper-green .colour-under_upper,
-.head-green .colour-head,
-.face-green .colour-face,
-.neck-green .colour-neck,
-.hands-green .colour-hands,
-.legs-green .colour-legs,
-.feet-green .colour-feet,
-.upper_acc-green .colour-upper_acc,
-.lower_acc-green .colour-lower_acc,
-.under_lower_acc-green .colour-under_lower_acc,
-.under_upper_acc-green .colour-under_upper_acc,
-.head_acc-green .colour-head_acc,
-.face_acc-green .colour-face_acc,
-.neck_acc-green .colour-neck_acc,
-.hands_acc-green .colour-hands_acc,
-.legs_acc-green .colour-legs_acc,
-.feet_acc-green .colour-feet_acc,
-.icon-green {
-	-webkit-filter: hue-rotate(120deg) saturate(100%) brightness(150%) contrast(100%);
-	filter: hue-rotate(120deg) saturate(100%) brightness(150%) contrast(100%);
-}
-
-.upper-light-green .colour-upper,
-.lower-light-green .colour-lower,
-.under_lower-light-green .colour-under_lower,
-.under_upper-light-green .colour-under_upper,
-.head-light-green .colour-head,
-.face-light-green .colour-face,
-.neck-light-green .colour-neck,
-.hands-light-green .colour-hands,
-.legs-light-green .colour-legs,
-.feet-light-green .colour-feet,
-.upper_acc-light-green .colour-upper_acc,
-.lower_acc-light-green .colour-lower_acc,
-.under_lower_acc-light-green .colour-under_lower_acc,
-.under_upper_acc-light-green .colour-under_upper_acc,
-.head_acc-light-green .colour-head_acc,
-.face_acc-light-green .colour-face_acc,
-.neck_acc-light-green .colour-neck_acc,
-.hands_acc-light-green .colour-hands_acc,
-.legs_acc-light-green .colour-legs_acc,
-.feet_acc-light-green .colour-feet_acc,
-.icon-light-green {
-	-webkit-filter: hue-rotate(90deg) saturate(20%) brightness(260%) contrast(100%);
-	filter: hue-rotate(90deg) saturate(20%) brightness(260%) contrast(100%);
-}
-
-.upper-black .colour-upper,
-.lower-black .colour-lower,
-.under_lower-black .colour-under_lower,
-.under_upper-black .colour-under_upper,
-.head-black .colour-head,
-.face-black .colour-face,
-.neck-black .colour-neck,
-.hands-black .colour-hands,
-.legs-black .colour-legs,
-.feet-black .colour-feet,
-.upper_acc-black .colour-upper_acc,
-.lower_acc-black .colour-lower_acc,
-.under_lower_acc-black .colour-under_lower_acc,
-.under_upper_acc-black .colour-under_upper_acc,
-.head_acc-black .colour-head_acc,
-.face_acc-black .colour-face_acc,
-.neck_acc-black .colour-neck_acc,
-.hands_acc-black .colour-hands_acc,
-.legs_acc-black .colour-legs_acc,
-.feet_acc-black .colour-feet_acc,
-.icon-black {
-	-webkit-filter: hue-rotate(0deg) saturate(0%) brightness(110%) contrast(110%);
-	filter: hue-rotate(0deg) saturate(0%) brightness(110%) contrast(110%);
-}
-
-.upper-pink .colour-upper,
-.lower-pink .colour-lower,
-.under_lower-pink .colour-under_lower,
-.under_upper-pink .colour-under_upper,
-.genitals-pink .colour-genitals,
-.head-pink .colour-head,
-.face-pink .colour-face,
-.neck-pink .colour-neck,
-.hands-pink .colour-hands,
-.legs-pink .colour-legs,
-.feet-pink .colour-feet,
-.upper_acc-pink .colour-upper_acc,
-.lower_acc-pink .colour-lower_acc,
-.under_lower_acc-pink .colour-under_lower_acc,
-.under_upper_acc-pink .colour-under_upper_acc,
-.head_acc-pink .colour-head_acc,
-.face_acc-pink .colour-face_acc,
-.neck_acc-pink .colour-neck_acc,
-.hands_acc-pink .colour-hands_acc,
-.legs_acc-pink .colour-legs_acc,
-.feet_acc-pink .colour-feet_acc,
-.icon-pink {
-	-webkit-filter: hue-rotate(-30deg) saturate(50%) contrast(100%) brightness(160%);
-	filter: hue-rotate(-30deg) saturate(50%) contrast(100%) brightness(160%);
-}
-
-.upper-light-pink .colour-upper,
-.lower-light-pink .colour-lower,
-.under_lower-light-pink .colour-under_lower,
-.under_upper-light-pink .colour-under_upper,
-.head-light-pink .colour-head,
-.face-light-pink .colour-face,
-.neck-light-pink .colour-neck,
-.hands-light-pink .colour-hands,
-.legs-light-pink .colour-legs,
-.feet-light-pink .colour-feet,
-.upper_acc-light-pink .colour-upper_acc,
-.lower_acc-light-pink .colour-lower_acc,
-.under_lower_acc-light-pink .colour-under_lower_acc,
-.under_upper_acc-light-pink .colour-under_upper_acc,
-.head_acc-light-pink .colour-head_acc,
-.face_acc-light-pink .colour-face_acc,
-.neck_acc-light-pink .colour-neck_acc,
-.hands_acc-light-pink .colour-hands_acc,
-.legs_acc-light-pink .colour-legs_acc,
-.feet_acc-light-pink .colour-feet_acc,
-.icon-light-pink {
-	-webkit-filter: hue-rotate(-40deg) saturate(20%) brightness(260%) contrast(100%);
-	filter: hue-rotate(-40deg) saturate(20%) brightness(260%) contrast(100%);
-}
-
-.upper-purple .colour-upper,
-.lower-purple .colour-lower,
-.under_lower-purple .colour-under_lower,
-.under_upper-purple .colour-under_upper,
-.head-purple .colour-head,
-.face-purple .colour-face,
-.neck-purple .colour-neck,
-.hands-purple .colour-hands,
-.legs-purple .colour-legs,
-.feet-purple .colour-feet,
-.upper_acc-purple .colour-upper_acc,
-.lower_acc-purple .colour-lower_acc,
-.under_lower_acc-purple .colour-under_lower_acc,
-.under_upper_acc-purple .colour-under_upper_acc,
-.head_acc-purple .colour-head_acc,
-.face_acc-purple .colour-face_acc,
-.neck_acc-purple .colour-neck_acc,
-.hands_acc-purple .colour-hands_acc,
-.legs_acc-purple .colour-legs_acc,
-.feet_acc-purple .colour-feet_acc,
-.icon-purple {
-	-webkit-filter: hue-rotate(-80deg) saturate(100%) brightness(100%) contrast(100%);
-	filter: hue-rotate(-80deg) saturate(100%) brightness(100%) contrast(100%);
-}
-
-.upper-tangerine .colour-upper,
-.lower-tangerine .colour-lower,
-.under_lower-tangerine .colour-under_lower,
-.under_upper-tangerine .colour-under_upper,
-.head-tangerine .colour-head,
-.face-tangerine .colour-face,
-.neck-tangerine .colour-neck,
-.hands-tangerine .colour-hands,
-.legs-tangerine .colour-legs,
-.feet-tangerine .colour-feet,
-.upper_acc-tangerine .colour-upper_acc,
-.lower_acc-tangerine .colour-lower_acc,
-.under_lower_acc-tangerine .colour-under_lower_acc,
-.under_upper_acc-tangerine .colour-under_upper_acc,
-.head_acc-tangerine .colour-head_acc,
-.face_acc-tangerine .colour-face_acc,
-.neck_acc-tangerine .colour-neck_acc,
-.hands_acc-tangerine .colour-hands_acc,
-.legs_acc-tangerine .colour-legs_acc,
-.feet_acc-tangerine .colour-feet_acc,
-.icon-tangerine,
-.upper-pale-tangerine .colour-upper,
-.lower-pale-tangerine .colour-lower,
-.under_lower-pale-tangerine .colour-under_lower,
-.under_upper-pale-tangerine .colour-under_upper,
-.head-pale-tangerine .colour-head,
-.face-pale-tangerine .colour-face,
-.neck-pale-tangerine .colour-neck,
-.hands-pale-tangerine .colour-hands,
-.legs-pale-tangerine .colour-legs,
-.feet-pale-tangerine .colour-feet,
-.upper_acc-pale-tangerine .colour-upper_acc,
-.lower_acc-pale-tangerine .colour-lower_acc,
-.under_lower_acc-pale-tangerine .colour-under_lower_acc,
-.under_upper_acc-pale-tangerine .colour-under_upper_acc,
-.head_acc-pale-tangerine .colour-head_acc,
-.face_acc-pale-tangerine .colour-face_acc,
-.neck_acc-pale-tangerine .colour-neck_acc,
-.hands_acc-pale-tangerine .colour-hands_acc,
-.legs_acc-pale-tangerine .colour-legs_acc,
-.feet_acc-pale-tangerine .colour-feet_acc,
-.icon-pale-tangerine {
-	-webkit-filter: hue-rotate(60deg) saturate(150%) brightness(200%) contrast(100%);
-	filter: hue-rotate(60deg) saturate(150%) brightness(200%) contrast(100%);
-}
-
-.upper-teal .colour-upper,
-.lower-teal .colour-lower,
-.under_lower-teal .colour-under_lower,
-.under_upper-teal .colour-under_upper,
-.head-teal .colour-head,
-.face-teal .colour-face,
-.neck-teal .colour-neck,
-.hands-teal .colour-hands,
-.legs-teal .colour-legs,
-.feet-teal .colour-feet,
-.upper_acc-teal .colour-upper_acc,
-.lower_acc-teal .colour-lower_acc,
-.under_lower_acc-teal .colour-under_lower_acc,
-.under_upper_acc-teal .colour-under_upper_acc,
-.head_acc-teal .colour-head_acc,
-.face_acc-teal .colour-face_acc,
-.neck_acc-teal .colour-neck_acc,
-.hands_acc-teal .colour-hands_acc,
-.legs_acc-teal .colour-legs_acc,
-.feet_acc-teal .colour-feet_acc,
-.icon-teal {
-	-webkit-filter: hue-rotate(-180deg) saturate(75%) brightness(200%) contrast(100%);
-	filter: hue-rotate(-180deg) saturate(75%) brightness(200%) contrast(100%);
-}
-
-.upper-yellow .colour-upper,
-.lower-yellow .colour-lower,
-.under_lower-yellow .colour-under_lower,
-.under_upper-yellow .colour-under_upper,
-.head-yellow .colour-head,
-.face-yellow .colour-face,
-.neck-yellow .colour-neck,
-.hands-yellow .colour-hands,
-.legs-yellow .colour-legs,
-.feet-yellow .colour-feet,
-.upper_acc-yellow .colour-upper_acc,
-.lower_acc-yellow .colour-lower_acc,
-.under_lower_acc-yellow .colour-under_lower_acc,
-.under_upper_acc-yellow .colour-under_upper_acc,
-.head_acc-yellow .colour-head_acc,
-.face_acc-yellow .colour-face_acc,
-.neck_acc-yellow .colour-neck_acc,
-.hands_acc-yellow .colour-hands_acc,
-.legs_acc-yellow .colour-legs_acc,
-.feet_acc-yellow .colour-feet_acc,
-.icon-yellow,
-.upper-pale-yellow .colour-upper,
-.lower-pale-yellow .colour-lower,
-.under_lower-pale-yellow .colour-under_lower,
-.under_upper-pale-yellow .colour-under_upper,
-.head-pale-yellow .colour-head,
-.face-pale-yellow .colour-face,
-.neck-pale-yellow .colour-neck,
-.hands-pale-yellow .colour-hands,
-.legs-pale-yellow .colour-legs,
-.feet-pale-yellow .colour-feet,
-.upper_acc-pale-yellow .colour-upper_acc,
-.lower_acc-pale-yellow .colour-lower_acc,
-.under_lower_acc-pale-yellow .colour-under_lower_acc,
-.under_upper_acc-pale-yellow .colour-under_upper_acc,
-.head_acc-pale-yellow .colour-head_acc,
-.face_acc-pale-yellow .colour-face_acc,
-.neck_acc-pale-yellow .colour-neck_acc,
-.hands_acc-pale-yellow .colour-hands_acc,
-.legs_acc-pale-yellow .colour-legs_acc,
-.feet_acc-pale-yellow .colour-feet_acc,
-.icon-pale-yellow {
-	-webkit-filter: hue-rotate(65deg) saturate(100%) brightness(290%) contrast(300%) sepia(0.55);
-	filter: hue-rotate(65deg) saturate(100%) brightness(290%) contrast(300%) sepia(0.55);
-}
-
-.upper-brown .colour-upper,
-.lower-brown .colour-lower,
-.under_lower-brown .colour-under_lower,
-.under_upper-brown .colour-under_upper,
-.head-brown .colour-head,
-.face-brown .colour-face,
-.neck-brown .colour-neck,
-.hands-brown .colour-hands,
-.legs-brown .colour-legs,
-.feet-brown .colour-feet,
-.upper_acc-brown .colour-upper_acc,
-.lower_acc-brown .colour-lower_acc,
-.under_lower_acc-brown .colour-under_lower_acc,
-.under_upper_acc-brown .colour-under_upper_acc,
-.head_acc-brown .colour-head_acc,
-.face_acc-brown .colour-face_acc,
-.neck_acc-brown .colour-neck_acc,
-.hands_acc-brown .colour-hands_acc,
-.legs_acc-brown .colour-legs_acc,
-.feet_acc-brown .colour-feet_acc,
-.icon-brown {
-	-webkit-filter: hue-rotate(55deg) saturate(100%) brightness(90%) contrast(100%);
-	filter: hue-rotate(55deg) saturate(100%) brightness(90%) contrast(100%);
-}
-
-/*
-*	ATTENTION: The following colours are not their actually recognised HSB value, as browsers are special little cunts that don't conform to standards
-*	Instead, I had to create these colours laboriously by hand, and they are as close as I could seemingly get to the real deal
-*	I have no idea how to actually replicate any of these colours properly without resorting to a pact with Satan
-*	Fuck browsers
-*/
-
-.upper-tan .colour-upper,
-.lower-tan .colour-lower,
-.under_lower-tan .colour-under_lower,
-.under_upper-tan .colour-under_upper,
-.head-tan .colour-head,
-.face-tan .colour-face,
-.neck-tan .colour-neck,
-.legs-tan .colour-legs,
-.feet-tan .colour-feet,
-.upper_acc-tan .colour-upper_acc,
-.lower_acc-tan .colour-lower_acc,
-.under_lower_acc-tan .colour-under_lower_acc,
-.under_upper_acc-tan .colour-under_upper_acc,
-.head_acc-tan .colour-head_acc,
-.face_acc-tan .colour-face_acc,
-.neck_acc-tan .colour-neck_acc,
-.legs_acc-tan .colour-legs_acc,
-.feet_acc-tan .colour-feet_acc,
-.icon-tan {
-	-webkit-filter: hue-rotate(60.3deg) saturate(17.5%) brightness(270%);
-	filter: hue-rotate(60.3deg) saturate(17.5%) brightness(270%);
-}
-
-.upper-grey .colour-upper,
-.lower-grey .colour-lower,
-.under_lower-grey .colour-under_lower,
-.under_upper-grey .colour-under_upper,
-.head-grey .colour-head,
-.face-grey .colour-face,
-.neck-grey .colour-neck,
-.legs-grey .colour-legs,
-.feet-grey .colour-feet,
-.upper_acc-grey .colour-upper_acc,
-.lower_acc-grey .colour-lower_acc,
-.under_lower_acc-grey .colour-under_lower_acc,
-.under_upper_acc-grey .colour-under_upper_acc,
-.head_acc-grey .colour-head_acc,
-.face_acc-grey .colour-face_acc,
-.neck_acc-grey .colour-neck_acc,
-.legs_acc-grey .colour-legs_acc,
-.feet_acc-grey .colour-feet_acc,
-.icon-grey {
-	-webkit-filter: hue-rotate(58.8deg) saturate(5%) brightness(270%);
-	filter: hue-rotate(58.8deg) saturate(5%) brightness(270%);
-}
-
-.upper-sand .colour-upper,
-.lower-sand .colour-lower,
-.under_lower-sand .colour-under_lower,
-.under_upper-sand .colour-under_upper,
-.head-sand .colour-head,
-.face-sand .colour-face,
-.neck-sand .colour-neck,
-.legs-sand .colour-legs,
-.feet-sand .colour-feet,
-.upper_acc-sand .colour-upper_acc,
-.lower_acc-sand .colour-lower_acc,
-.under_lower_acc-sand .colour-under_lower_acc,
-.under_upper_acc-sand .colour-under_upper_acc,
-.head_acc-sand .colour-head_acc,
-.face_acc-sand .colour-face_acc,
-.neck_acc-sand .colour-neck_acc,
-.legs_acc-sand .colour-legs_acc,
-.feet_acc-sand .colour-feet_acc,
-.icon-sand {
-	-webkit-filter: hue-rotate(61deg) saturate(20%) brightness(370%);
-	filter: hue-rotate(61deg) saturate(20%) brightness(370%);
-}
-
-.upper-off-white .colour-upper,
-.lower-off-white .colour-lower,
-.under_lower-off-white .colour-under_lower,
-.under_upper-off-white .colour-under_upper,
-.head-off-white .colour-head,
-.face-off-white .colour-face,
-.neck-off-white .colour-neck,
-.legs-off-white .colour-legs,
-.feet-off-white .colour-feet,
-.upper_acc-off-white .colour-upper_acc,
-.lower_acc-off-white .colour-lower_acc,
-.under_lower_acc-off-white .colour-under_lower_acc,
-.under_upper_acc-off-white .colour-under_upper_acc,
-.head_acc-off-white .colour-head_acc,
-.face_acc-off-white .colour-face_acc,
-.neck_acc-off-white .colour-neck_acc,
-.legs_acc-off-white .colour-legs_acc,
-.feet_acc-off-white .colour-feet_acc,
-.icon-off-white {
-	-webkit-filter: hue-rotate(70deg) saturate(1.3%) brightness(360%);
-	filter: hue-rotate(70deg) saturate(1.3%) brightness(360%);
-}
-
-.upper-navy .colour-upper,
-.lower-navy .colour-lower,
-.under_lower-navy .colour-under_lower,
-.under_upper-navy .colour-under_upper,
-.head-navy .colour-head,
-.face-navy .colour-face,
-.neck-navy .colour-neck,
-.legs-navy .colour-legs,
-.feet-navy .colour-feet,
-.upper_acc-navy .colour-upper_acc,
-.lower_acc-navy .colour-lower_acc,
-.under_lower_acc-navy .colour-under_lower_acc,
-.under_upper_acc-navy .colour-under_upper_acc,
-.head_acc-navy .colour-head_acc,
-.face_acc-navy .colour-face_acc,
-.neck_acc-navy .colour-neck_acc,
-.legs_acc-navy .colour-legs_acc,
-.feet_acc-navy .colour-feet_acc,
-.icon-navy {
-	-webkit-filter: hue-rotate(250deg) saturate(7%) brightness(77%);
-	filter: hue-rotate(250deg) saturate(7%) brightness(77%);
-}
-
-.upper-olive .colour-upper,
-.lower-olive .colour-lower,
-.under_lower-olive .colour-under_lower,
-.under_upper-olive .colour-under_upper,
-.head-olive .colour-head,
-.face-olive .colour-face,
-.neck-olive .colour-neck,
-.legs-olive .colour-legs,
-.feet-olive .colour-feet,
-.upper_acc-olive .colour-upper_acc,
-.lower_acc-olive .colour-lower_acc,
-.under_lower_acc-olive .colour-under_lower_acc,
-.under_upper_acc-olive .colour-under_upper_acc,
-.head_acc-olive .colour-head_acc,
-.face_acc-olive .colour-face_acc,
-.neck_acc-olive .colour-neck_acc,
-.legs_acc-olive .colour-legs_acc,
-.feet_acc-olive .colour-feet_acc,
-.icon-olive {
-	-webkit-filter: hue-rotate(67deg) saturate(24.5%) brightness(137%);
-	filter: hue-rotate(67deg) saturate(24.5%) brightness(137%);
-}
-
-.upper-wine .colour-upper,
-.lower-wine .colour-lower,
-.under_lower-wine .colour-under_lower,
-.under_upper-wine .colour-under_upper,
-.head-wine .colour-head,
-.face-wine .colour-face,
-.neck-wine .colour-neck,
-.legs-wine .colour-legs,
-.feet-wine .colour-feet,
-.upper_acc-wine .colour-upper_acc,
-.lower_acc-wine .colour-lower_acc,
-.under_lower_acc-wine .colour-under_lower_acc,
-.under_upper_acc-wine .colour-under_upper_acc,
-.head_acc-wine .colour-head_acc,
-.face_acc-wine .colour-face_acc,
-.neck_acc-wine .colour-neck_acc,
-.legs_acc-wine .colour-legs_acc,
-.feet_acc-wine .colour-feet_acc,
-.icon-wine {
-	-webkit-filter: hue-rotate(351deg) saturate(28%) brightness(90%);
-	filter: hue-rotate(351deg) saturate(28%) brightness(90%);
-}
-
-/* wet clothes */
-.upper-wetblue .colour-upper,
-.lower-wetblue .colour-lower,
-.under_lower-wetblue .colour-under_lower,
-.under_upper-wetblue .colour-under_upper {
-	-webkit-filter: hue-rotate(-120deg) saturate(0.5) brightness(90%) contrast(100%) opacity(0.5);
-	filter: hue-rotate(-120deg) saturate(0.5) brightness(90%) contrast(100%) opacity(0.5);
-}
-
-.upper-wetlight-blue .colour-upper,
-.lower-wetlight-blue .colour-lower,
-.under_lower-wetlight-blue .colour-under_lower,
-.under_upper-wetlight-blue .colour-under_upper,
-.head-wetlight-blue .colour-head,
-.face-wetlight-blue .colour-face,
-.neck-wetlight-blue .colour-neck,
-.hands-wetlight-blue .colour-hands,
-.legs-wetlight-blue .colour-legs,
-.feet-wetlight-blue .colour-feet,
-.upper_acc-wetlight-blue .colour-upper_acc,
-.lower_acc-wetlight-blue .colour-lower_acc,
-.under_lower_acc-wetlight-blue .colour-under_lower_acc,
-.under_upper_acc-wetlight-blue .colour-under_upper_acc,
-.head_acc-wetlight-blue .colour-head_acc,
-.face_acc-wetlight-blue .colour-face_acc,
-.neck_acc-wetlight-blue .colour-neck_acc,
-.hands_acc-wetlight-blue .colour-hands_acc,
-.legs_acc-wetlight-blue .colour-legs_acc,
-.feet_acc-wetlight-blue .colour-feet_acc,
-.icon-wetlight-blue {
-	-webkit-filter: hue-rotate(210deg) saturate(20%) brightness(260%) contrast(100%) opacity(0.5);
-	filter: hue-rotate(210deg) saturate(20%) brightness(260%) contrast(100%) opacity(0.5);
-}
-
-.upper-wetwhite .colour-upper,
-.lower-wetwhite .colour-lower,
-.under_lower-wetwhite .colour-under_lower,
-.under_upper-wetwhite .colour-under_upper,
-.upper-wetpale-white .colour-upper,
-.lower-wetpale-white .colour-lower,
-.under_lower-wetpale-white .colour-under_lower,
-.under_upper-wetpale-white .colour-under_upper {
-	-webkit-filter: hue-rotate(0deg) saturate(0%) brightness(430%) contrast(140%) opacity(0.5);
-	filter: hue-rotate(0deg) saturate(0%) brightness(430%) contrast(140%) opacity(0.5);
-}
-
-.upper-wetred .colour-upper,
-.lower-wetred .colour-lower,
-.under_lower-wetred .colour-under_lower,
-.under_upper-wetred .colour-under_upper {
-	-webkit-filter: hue-rotate(0deg) saturate(0.5) brightness(90%) contrast(100%) opacity(0.5);
-	filter: hue-rotate(0deg) saturate(0.5) brightness(90%) contrast(100%) opacity(0.5);
-}
-
-.upper-wetgreen .colour-upper,
-.lower-wetgreen .colour-lower,
-.under_lower-wetgreen .colour-under_lower,
-.under_upper-wetgreen .colour-under_upper {
-	-webkit-filter: hue-rotate(120deg) saturate(0.5) brightness(140%) contrast(100%) opacity(0.5);
-	filter: hue-rotate(120deg) saturate(0.5) brightness(140%) contrast(100%) opacity(0.5);
-}
-
-.upper-wetlight-green .colour-upper,
-.lower-wetlight-green .colour-lower,
-.under_lower-wetlight-green .colour-under_lower,
-.under_upper-wetlight-green .colour-under_upper,
-.head-wetlight-green .colour-head,
-.face-wetlight-green .colour-face,
-.neck-wetlight-green .colour-neck,
-.hands-wetlight-green .colour-hands,
-.legs-wetlight-green .colour-legs,
-.feet-wetlight-green .colour-feet,
-.upper_acc-wetlight-green .colour-upper_acc,
-.lower_acc-wetlight-green .colour-lower_acc,
-.under_lower_acc-wetlight-green .colour-under_lower_acc,
-.under_upper_acc-wetlight-green .colour-under_upper_acc,
-.head_acc-wetlight-green .colour-head_acc,
-.face_acc-wetlight-green .colour-face_acc,
-.neck_acc-wetlight-green .colour-neck_acc,
-.hands_acc-wetlight-green .colour-hands_acc,
-.legs_acc-wetlight-green .colour-legs_acc,
-.feet_acc-wetlight-green .colour-feet_acc,
-.icon-wetlight-green {
-	-webkit-filter: hue-rotate(90deg) saturate(20%) brightness(260%) contrast(100%) opacity(0.5);
-	filter: hue-rotate(90deg) saturate(20%) brightness(260%) contrast(100%) opacity(0.5);
-}
-
-.upper-wetblack .colour-upper,
-.lower-wetblack .colour-lower,
-.under_lower-wetblack .colour-under_lower,
-.under_upper-wetblack .colour-under_upper {
-	-webkit-filter: hue-rotate(0deg) saturate(0%) brightness(90%) contrast(110%) opacity(0.5);
-	filter: hue-rotate(0deg) saturate(0%) brightness(90%) contrast(110%) opacity(0.5);
-}
-
-.upper-wetpink .colour-upper,
-.lower-wetpink .colour-lower,
-.under_lower-wetpink .colour-under_lower,
-.under_upper-wetpink .colour-under_upper {
-	-webkit-filter: hue-rotate(-30deg) saturate(25%) contrast(100%) brightness(150%) opacity(0.5);
-	filter: hue-rotate(-30deg) saturate(25%) contrast(100%) brightness(150%) opacity(0.5);
-}
-
-.upper-wetlight-pink .colour-upper,
-.lower-wetlight-pink .colour-lower,
-.under_lower-wetlight-pink .colour-under_lower,
-.under_upper-wetlight-pink .colour-under_upper,
-.head-wetlight-pink .colour-head,
-.face-wetlight-pink .colour-face,
-.neck-wetlight-pink .colour-neck,
-.hands-wetlight-pink .colour-hands,
-.legs-wetlight-pink .colour-legs,
-.feet-wetlight-pink .colour-feet,
-.upper_acc-wetlight-pink .colour-upper_acc,
-.lower_acc-wetlight-pink .colour-lower_acc,
-.under_lower_acc-wetlight-pink .colour-under_lower_acc,
-.under_upper_acc-wetlight-pink .colour-under_upper_acc,
-.head_acc-wetlight-pink .colour-head_acc,
-.face_acc-wetlight-pink .colour-face_acc,
-.neck_acc-wetlight-pink .colour-neck_acc,
-.hands_acc-wetlight-pink .colour-hands_acc,
-.legs_acc-wetlight-pink .colour-legs_acc,
-.feet_acc-wetlight-pink .colour-feet_acc,
-.icon-wetlight-pink {
-	-webkit-filter: hue-rotate(-40deg) saturate(20%) brightness(260%) contrast(100%) opacity(0.5);
-	filter: hue-rotate(-40deg) saturate(20%) brightness(260%) contrast(100%) opacity(0.5);
-}
-
-.upper-wetpurple .colour-upper,
-.lower-wetpurple .colour-lower,
-.under_lower-wetpurple .colour-under_lower,
-.under_upper-wetpurple .colour-under_upper {
-	-webkit-filter: hue-rotate(-90deg) saturate(0.5) brightness(90%) contrast(100%) opacity(0.5);
-	filter: hue-rotate(-90deg) saturate(0.5) brightness(90%) contrast(100%) opacity(0.5);
-}
-
-.upper-wettangerine .colour-upper,
-.lower-wettangerine .colour-lower,
-.under_lower-wettangerine .colour-under_lower,
-.under_upper-wettangerine .colour-under_upper,
-.upper-wetpale-tangerine .colour-upper,
-.lower-wetpale-tangerine .colour-lower,
-.under_lower-wetpale-tangerine .colour-under_lower,
-.under_upper-wetpale-tangerine .colour-under_upper {
-	-webkit-filter: hue-rotate(60deg) saturate(0.75) brightness(190%) contrast(100%) opacity(0.5);
-	filter: hue-rotate(60deg) saturate(0.75) brightness(190%) contrast(100%) opacity(0.5);
-}
-
-.upper-wetteal .colour-upper,
-.lower-wetteal .colour-lower,
-.under_lower-wetteal .colour-under_lower,
-.under_upper-wetteal .colour-under_upper {
-	-webkit-filter: hue-rotate(-180deg) saturate(50%) brightness(150%) contrast(100%) opacity(0.5);
-	filter: hue-rotate(-180deg) saturate(50%) brightness(150%) contrast(100%) opacity(0.5);
-}
-
-.upper-wetyellow .colour-upper,
-.lower-wetyellow .colour-lower,
-.under_lower-wetyellow .colour-under_lower,
-.under_upper-wetyellow .colour-under_upper,
-.upper-wetpale-yellow .colour-upper,
-.lower-wetpale-yellow .colour-lower,
-.under_lower-wetpale-yellow .colour-under_lower,
-.under_upper-wetpale-yellow .colour-under_upper {
-	-webkit-filter: hue-rotate(65deg) saturate(0.5) brightness(280%) contrast(300%) sepia(0.55) opacity(0.5);
-	filter: hue-rotate(65deg) saturate(0.5) brightness(280%) contrast(300%) sepia(0.55) opacity(0.5);
-}
-
-.upper-wetbrown .colour-upper,
-.lower-wetbrown .colour-lower,
-.under_lower-wetbrown .colour-under_lower,
-.under_upper-wetbrown .colour-under_upper {
-	-webkit-filter: hue-rotate(60deg) saturate(150%) brightness(200%) contrast(100%) opacity(0.5);
-	filter: hue-rotate(60deg) saturate(150%) brightness(200%) contrast(100%) opacity(0.5);
-}
-
-.upper-wet .colour-upper,
-.lower-wet .colour-lower,
-.under_lower-wet .colour-under_lower,
-.under_upper-wet .colour-under_upper {
-	-webkit-filter: opacity(0.5);
-	filter: opacity(0.5);
-}
-
-.upper-wettan .colour-upper,
-.lower-wettan .colour-lower,
-.under_lower-wettan .colour-under_lower,
-.under_upper-wettan .colour-under_upper,
-.head-wettan .colour-head,
-.face-wettan .colour-face,
-.neck-wettan .colour-neck,
-.legs-wettan .colour-legs,
-.feet-wettan .colour-feet,
-.upper_acc-wettan .colour-upper_acc,
-.lower_acc-wettan .colour-lower_acc,
-.under_lower_acc-wettan .colour-under_lower_acc,
-.under_upper_acc-wettan .colour-under_upper_acc,
-.head_acc-wettan .colour-head_acc,
-.face_acc-wettan .colour-face_acc,
-.neck_acc-wettan .colour-neck_acc,
-.legs_acc-wettan .colour-legs_acc,
-.feet_acc-wettan .colour-feet_acc,
-.icon-wettan {
-	-webkit-filter: hue-rotate(60.3deg) saturate(17.5%) brightness(270%) opacity(0.5);
-	filter: hue-rotate(60.3deg) saturate(17.5%) brightness(270%) opacity(0.5);
-}
-
-.upper-wetgrey .colour-upper,
-.lower-wetgrey .colour-lower,
-.under_lower-wetgrey .colour-under_lower,
-.under_upper-wetgrey .colour-under_upper,
-.head-wetgrey .colour-head,
-.face-wetgrey .colour-face,
-.neck-wetgrey .colour-neck,
-.legs-wetgrey .colour-legs,
-.feet-wetgrey .colour-feet,
-.upper_acc-wetgrey .colour-upper_acc,
-.lower_acc-wetgrey .colour-lower_acc,
-.under_lower_acc-wetgrey .colour-under_lower_acc,
-.under_upper_acc-wetgrey .colour-under_upper_acc,
-.head_acc-wetgrey .colour-head_acc,
-.face_acc-wetgrey .colour-face_acc,
-.neck_acc-wetgrey .colour-neck_acc,
-.legs_acc-wetgrey .colour-legs_acc,
-.feet_acc-wetgrey .colour-feet_acc,
-.icon-wetgrey {
-	-webkit-filter: hue-rotate(58.8deg) saturate(5%) brightness(270%) opacity(0.5);
-	filter: hue-rotate(58.8deg) saturate(5%) brightness(270%) opacity(0.5);
-}
-
-.upper-wetsand .colour-upper,
-.lower-wetsand .colour-lower,
-.under_lower-wetsand .colour-under_lower,
-.under_upper-wetsand .colour-under_upper,
-.head-wetsand .colour-head,
-.face-wetsand .colour-face,
-.neck-wetsand .colour-neck,
-.legs-wetsand .colour-legs,
-.feet-wetsand .colour-feet,
-.upper_acc-wetsand .colour-upper_acc,
-.lower_acc-wetsand .colour-lower_acc,
-.under_lower_acc-wetsand .colour-under_lower_acc,
-.under_upper_acc-wetsand .colour-under_upper_acc,
-.head_acc-wetsand .colour-head_acc,
-.face_acc-wetsand .colour-face_acc,
-.neck_acc-wetsand .colour-neck_acc,
-.legs_acc-wetsand .colour-legs_acc,
-.feet_acc-wetsand .colour-feet_acc,
-.icon-wetsand {
-	-webkit-filter: hue-rotate(61deg) saturate(20%) brightness(370%) opacity(0.5);
-	filter: hue-rotate(61deg) saturate(20%) brightness(370%) opacity(0.5);
-}
-
-.upper-wetoff-white .colour-upper,
-.lower-wetoff-white .colour-lower,
-.under_lower-wetoff-white .colour-under_lower,
-.under_upper-wetoff-white .colour-under_upper,
-.head-wetoff-white .colour-head,
-.face-wetoff-white .colour-face,
-.neck-wetoff-white .colour-neck,
-.legs-wetoff-white .colour-legs,
-.feet-wetoff-white .colour-feet,
-.upper_acc-wetoff-white .colour-upper_acc,
-.lower_acc-wetoff-white .colour-lower_acc,
-.under_lower_acc-wetoff-white .colour-under_lower_acc,
-.under_upper_acc-wetoff-white .colour-under_upper_acc,
-.head_acc-wetoff-white .colour-head_acc,
-.face_acc-wetoff-white .colour-face_acc,
-.neck_acc-wetoff-white .colour-neck_acc,
-.legs_acc-wetoff-white .colour-legs_acc,
-.feet_acc-wetoff-white .colour-feet_acc,
-.icon-wetoff-white {
-	-webkit-filter: hue-rotate(70deg) saturate(1.3%) brightness(360%) opacity(0.5);
-	filter: hue-rotate(70deg) saturate(1.3%) brightness(360%) opacity(0.5);
-}
-
-.upper-wetnavy .colour-upper,
-.lower-wetnavy .colour-lower,
-.under_lower-wetnavy .colour-under_lower,
-.under_upper-wetnavy .colour-under_upper,
-.head-wetnavy .colour-head,
-.face-wetnavy .colour-face,
-.neck-wetnavy .colour-neck,
-.legs-wetnavy .colour-legs,
-.feet-wetnavy .colour-feet,
-.upper_acc-wetnavy .colour-upper_acc,
-.lower_acc-wetnavy .colour-lower_acc,
-.under_lower_acc-wetnavy .colour-under_lower_acc,
-.under_upper_acc-wetnavy .colour-under_upper_acc,
-.head_acc-wetnavy .colour-head_acc,
-.face_acc-wetnavy .colour-face_acc,
-.neck_acc-wetnavy .colour-neck_acc,
-.legs_acc-wetnavy .colour-legs_acc,
-.feet_acc-wetnavy .colour-feet_acc,
-.icon-wetnavy {
-	-webkit-filter: hue-rotate(250deg) saturate(7%) brightness(77%) opacity(0.5);
-	filter: hue-rotate(250deg) saturate(7%) brightness(77%) opacity(0.5);
-}
-
-.upper-wetolive .colour-upper,
-.lower-wetolive .colour-lower,
-.under_lower-wetolive .colour-under_lower,
-.under_upper-wetolive .colour-under_upper,
-.head-wetolive .colour-head,
-.face-wetolive .colour-face,
-.neck-wetolive .colour-neck,
-.legs-wetolive .colour-legs,
-.feet-wetolive .colour-feet,
-.upper_acc-wetolive .colour-upper_acc,
-.lower_acc-wetolive .colour-lower_acc,
-.under_lower_acc-wetolive .colour-under_lower_acc,
-.under_upper_acc-wetolive .colour-under_upper_acc,
-.head_acc-wetolive .colour-head_acc,
-.face_acc-wetolive .colour-face_acc,
-.neck_acc-wetolive .colour-neck_acc,
-.legs_acc-wetolive .colour-legs_acc,
-.feet_acc-wetolive .colour-feet_acc,
-.icon-wetolive {
-	-webkit-filter: hue-rotate(67deg) saturate(24.5%) brightness(137%) opacity(0.5);
-	filter: hue-rotate(67deg) saturate(24.5%) brightness(137%) opacity(0.5);
-}
-
-.upper-wetwine .colour-upper,
-.lower-wetwine .colour-lower,
-.under_lower-wetwine .colour-under_lower,
-.under_upper-wetwine .colour-under_upper,
-.head-wetwine .colour-head,
-.face-wetwine .colour-face,
-.neck-wetwine .colour-neck,
-.legs-wetwine .colour-legs,
-.feet-wetwine .colour-feet,
-.upper_acc-wetwine .colour-upper_acc,
-.lower_acc-wetwine .colour-lower_acc,
-.under_lower_acc-wetwine .colour-under_lower_acc,
-.under_upper_acc-wetwine .colour-under_upper_acc,
-.head_acc-wetwine .colour-head_acc,
-.face_acc-wetwine .colour-face_acc,
-.neck_acc-wetwine .colour-neck_acc,
-.legs_acc-wetwine .colour-legs_acc,
-.feet_acc-wetwine .colour-feet_acc,
-.icon-wetwine {
-	-webkit-filter: hue-rotate(351deg) saturate(28%) brightness(90%) opacity(0.5);
-	filter: hue-rotate(351deg) saturate(28%) brightness(90%) opacity(0.5);
-}
-
-/* Makeup colours */
-.lipstick-red {
-	-webkit-filter: hue-rotate(0deg);
-	filter: hue-rotate(0deg);
-}
-
-.lipstick-blue {
-	-webkit-filter: hue-rotate(240deg);
-	filter: hue-rotate(240deg);
-}
-
-.lipstick-green {
-	-webkit-filter: hue-rotate(140deg);
-	filter: hue-rotate(140deg);
-}
-
-.lipstick-purple {
-	-webkit-filter: hue-rotate(270deg);
-	filter: hue-rotate(270deg);
-}
-
-.lipstick-orange {
-	-webkit-filter: hue-rotate(60deg) brightness(2.5);
-	filter: hue-rotate(60deg) brightness(2.5);
-}
-
-.lipstick-lime {
-	-webkit-filter: hue-rotate(75deg) saturate(1.5) brightness(2.5);
-	filter: hue-rotate(75deg) saturate(1.5) brightness(2.5);
-}
-
-.lipstick-pink {
-	-webkit-filter: hue-rotate(270deg) brightness(2.5);
-	filter: hue-rotate(270deg) brightness(2.5);
-}
-
-.lipstick-light-pink {
-	-webkit-filter: hue-rotate(270deg) brightness(7.5);
-	filter: hue-rotate(270deg) brightness(7.5);
-}
-
-.lipstick-dark-red {
-	-webkit-filter: hue-rotate(0deg) brightness(0.8);
-	filter: hue-rotate(0deg) brightness(0.8);
-}
-
-.lipstick-black {
-	-webkit-filter: hue-rotate(0deg) brightness(0) contrast(0.8);
-	filter: hue-rotate(0deg) brightness(0) contrast(0.8);
-}
-
-.eyeshadow-red {
-	-webkit-filter: hue-rotate(0deg) brightness(2) contrast(0.6);
-	filter: hue-rotate(0deg) brightness(2) contrast(0.6);
-}
-
-.eyeshadow-pink {
-	-webkit-filter: hue-rotate(-40deg) brightness(3) contrast(0.5);
-	filter: hue-rotate(-40deg) brightness(3) contrast(0.5);
-}
-
-.eyeshadow-light-pink {
-	-webkit-filter: hue-rotate(280deg) brightness(15);
-	filter: hue-rotate(280deg) brightness(15);
-}
-
-.eyeshadow-green {
-	-webkit-filter: hue-rotate(90deg) brightness(2) contrast(0.5);
-	filter: hue-rotate(90deg) brightness(2) contrast(0.5);
-}
-
-.eyeshadow-light-green {
-	-webkit-filter: hue-rotate(150deg) brightness(4) saturate(0.8) contrast(0.5);
-	filter: hue-rotate(150deg) brightness(4) saturate(0.8) contrast(0.5);
-}
-
-.eyeshadow-blue {
-	-webkit-filter: hue-rotate(245deg) brightness(2) contrast(0.7);
-	filter: hue-rotate(245deg) brightness(2) contrast(0.7);
-}
-
-.eyeshadow-light-blue {
-	-webkit-filter: hue-rotate(245deg) brightness(4) saturate(0.8) contrast(0.5);
-	filter: hue-rotate(245deg) brightness(4) saturate(0.8) contrast(0.5);
-}
-
-.eyeshadow-purple {
-	-webkit-filter: hue-rotate(262deg) brightness(2) contrast(0.6);
-	filter: hue-rotate(262deg) brightness(2) contrast(0.6);
-}
-
-.eyeshadow-orange {
-	-webkit-filter: hue-rotate(45deg) brightness(2.2) saturate(0.8);
-	filter: hue-rotate(45deg) brightness(2.2) saturate(0.8);
-}
-
-.eyeshadow-yellow {
-	-webkit-filter: hue-rotate(69deg) brightness(4) saturate(1) contrast(0.7);
-	filter: hue-rotate(69deg) brightness(4) saturate(1) contrast(0.7);
-}
-
-.eyeshadow-brown {
-	-webkit-filter: hue-rotate(45deg) brightness(1) saturate(1) contrast(0.6);
-	filter: hue-rotate(45deg) brightness(1) saturate(1) contrast(0.6);
-}
-
-.eyeshadow-light-brown,
-.eyeshadow-lightbrown {
-	-webkit-filter: hue-rotate(40deg) brightness(4) saturate(0.7) contrast(0.5);
-	filter: hue-rotate(40deg) brightness(4) saturate(0.7) contrast(0.5);
-}
-
-.eyeshadow-dark-brown {
-	-webkit-filter: hue-rotate(40deg) brightness(0.5) saturate(0.8) contrast(0.6);
-	filter: hue-rotate(40deg) brightness(0.5) saturate(0.8) contrast(0.6);
-}
-
-.eyeshadow-black,
-.mascara-black,
-.mascara-black-waterproof {
-	-webkit-filter: hue-rotate(0deg) brightness(0.1) saturate(0) contrast(0.7);
-	filter: hue-rotate(0deg) brightness(0.1) saturate(0) contrast(0.7);
-}
-
-.eyeshadow-white,
-.mascara-white {
-	-webkit-filter: hue-rotate(250deg) brightness(8) saturate(0) contrast(1);
-	filter: hue-rotate(250deg) brightness(8) saturate(0) contrast(1);
-}
-
-.eyeshadow-silver {
-	-webkit-filter: hue-rotate(0deg) saturate(0) brightness(2.4);
-	filter: hue-rotate(0deg) saturate(0) brightness(2.4);
-}
-
-/* Condom colours */
-.condom-red {
-	-webkit-filter: hue-rotate(0deg);
-	filter: hue-rotate(0deg);
-	opacity: 0.4;
-}
-
-.condom-blue {
-	-webkit-filter: hue-rotate(240deg);
-	filter: hue-rotate(240deg);
-	opacity: 0.4;
-}
-
-.condom-lblue {
-	-webkit-filter: hue-rotate(210deg);
-	filter: hue-rotate(210deg);
-	opacity: 0.4;
-}
-
-.condom-green {
-	-webkit-filter: hue-rotate(140deg);
-	filter: hue-rotate(140deg);
-	opacity: 0.4;
-}
-
-.condom-lime {
-	-webkit-filter: hue-rotate(75deg) saturate(1.5) brightness(2.5);
-	filter: hue-rotate(75deg) saturate(1.5) brightness(2.5);
-	opacity: 0.4;
-}
-
-.condom-purple {
-	-webkit-filter: hue-rotate(270deg);
-	filter: hue-rotate(270deg);
-	opacity: 0.4;
-}
-
-.condom-orange {
-	-webkit-filter: hue-rotate(60deg) brightness(2.5);
-	filter: hue-rotate(60deg) brightness(2.5);
-	opacity: 0.4;
-}
-
-.condom-pink {
-	-webkit-filter: hue-rotate(270deg) brightness(2.5);
-	filter: hue-rotate(270deg) brightness(2.5);
-	opacity: 0.4;
-}
-
-.condom-plain {
-	-webkit-filter: hue-rotate(50deg) brightness(2.5);
-	filter: hue-rotate(60deg) brightness(2.5);
-	opacity: 0.4;
-}
-
-/*
- * Animation-related classes. Work-in-progress
- * Expected document structure:
- * <div class="i256" -- should have the image size-related class
- *					(or have fixed size & overflow: hidden any other way)
- *	<img class="anim-2s anim-2f" -- should have
- *		1) duration-related class like "anim-2s" (2 seconds)
- *		2) frame count-related class like "anim-2f" (2 frames)
- *		OR
- *	<img class="anim-doggy-4f-vfast"
- *		-- should have frame count & speed class
- *			like "anim-doggy-4f-vfast" (4 frames, very fast)
- */
-.i256 {
-	width: 256px;
-	height: 256px;
-	overflow: hidden;
-}
-
-.i128 {
-	width: 128px;
-	height: 128px;
-	overflow: hidden;
-}
-
-.i64 {
-	width: 64px;
-	height: 64px;
-	overflow: hidden;
-}
-
-.i256 > *,
-.i128 > *,
-.i64 > * {
-	position: absolute;
-}
-
-.anim-1s,
-.anim-2s {
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-canvas {
-	max-width: unset;
-	/* fix sugarcube default css */
-}
-
-/* joint duration & frame-count classes */
-
-/* generic idle animation, -slow(default)/-mid/-fast */
-/* .anim-idle-1f,
-.anim-idle-1f-slow {} */
-
-.anim-idle-2f,
-.anim-idle-2f-slow {
-	-webkit-animation-duration: 2s;
-	/* 1s x 2 */
-	-webkit-animation-timing-function: steps(2);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 2s;
-	/* 1s x 2 */
-	animation-timing-function: steps(2);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-idle-3f,
-.anim-idle-3f-slow {
-	-webkit-animation-duration: 3s;
-	/* 1s x 3 */
-	-webkit-animation-timing-function: steps(3);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 3s;
-	/* 1s x 3 */
-	animation-timing-function: steps(3);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-idle-4f-mid {
-	-webkit-animation-duration: 1320ms;
-	/* 330ms x 4 */
-	-webkit-animation-timing-function: steps(4);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 1320ms;
-	/* 330ms x 4 */
-	animation-timing-function: steps(4);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-idle-4f-fast {
-	-webkit-animation-duration: 320ms;
-	/* 80ms x 4 */
-	-webkit-animation-timing-function: steps(4);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 320ms;
-	/* 80ms x 4 */
-	animation-timing-function: steps(4);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-/* sex animations, main slot */
-
-.anim-doggy-3f-vfast {
-	-webkit-animation-duration: 240ms;
-	/* 80ms x 3 */
-	-webkit-animation-timing-function: steps(3);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 240ms;
-	/* 80ms x 3 */
-	animation-timing-function: steps(3);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-doggy-3f-fast {
-	-webkit-animation-duration: 330ms;
-	/* 110ms x 3 */
-	-webkit-animation-timing-function: steps(3);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 330ms;
-	/* 110ms x 3 */
-	animation-timing-function: steps(3);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-doggy-3f-mid {
-	-webkit-animation-duration: 510ms;
-	/* 170ms x 3 */
-	-webkit-animation-timing-function: steps(3);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 510ms;
-	/* 170ms x 3 */
-	animation-timing-function: steps(3);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-doggy-3f-slow {
-	-webkit-animation-duration: 990ms;
-	/* 330ms x 3 */
-	-webkit-animation-timing-function: steps(3);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 1320ms;
-	/* 330ms x 3 */
-	animation-timing-function: steps(4);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-doggy-4f-vfast {
-	-webkit-animation-duration: 320ms;
-	/* 80ms x 4 */
-	-webkit-animation-timing-function: steps(4);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 320ms;
-	/* 80ms x 4 */
-	animation-timing-function: steps(4);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-doggy-4f-fast {
-	-webkit-animation-duration: 440ms;
-	/* 110ms x 4 */
-	-webkit-animation-timing-function: steps(4);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 440ms;
-	/* 110ms x 4 */
-	animation-timing-function: steps(4);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-doggy-4f-mid {
-	-webkit-animation-duration: 680ms;
-	/* 170ms x 4 */
-	-webkit-animation-timing-function: steps(4);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 680ms;
-	/* 170ms x 4 */
-	animation-timing-function: steps(4);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-doggy-4f-slow {
-	-webkit-animation-duration: 1320ms;
-	/* 330ms x 4 */
-	-webkit-animation-timing-function: steps(4);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 1320ms;
-	/* 330ms x 4 */
-	animation-timing-function: steps(4);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-doggy-5f-vfast {
-	-webkit-animation-duration: 400ms;
-	/* 80ms x 5 */
-	-webkit-animation-timing-function: steps(5);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 400ms;
-	/* 80ms x 5 */
-	animation-timing-function: steps(5);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-doggy-5f-fast {
-	-webkit-animation-duration: 550ms;
-	/* 110ms x 5 */
-	-webkit-animation-timing-function: steps(5);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 550ms;
-	/* 110ms x 5 */
-	animation-timing-function: steps(5);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-doggy-5f-mid {
-	-webkit-animation-duration: 850ms;
-	/* 170ms x 5 */
-	-webkit-animation-timing-function: steps(5);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 850ms;
-	/* 170ms x 5 */
-	animation-timing-function: steps(5);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-doggy-5f-slow {
-	-webkit-animation-duration: 1650ms;
-	/* 330ms x 5 */
-	-webkit-animation-timing-function: steps(5);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 1650ms;
-	/* 330ms x 5 */
-	animation-timing-function: steps(5);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-doggy-6f-vfast {
-	-webkit-animation-duration: 480ms;
-	/* 80ms x 6 */
-	-webkit-animation-timing-function: steps(6);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 480ms;
-	/* 80ms x 6 */
-	animation-timing-function: steps(6);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-doggy-6f-fast {
-	-webkit-animation-duration: 660ms;
-	/* 110ms x 6 */
-	-webkit-animation-timing-function: steps(6);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 660ms;
-	/* 110ms x 6 */
-	animation-timing-function: steps(6);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-doggy-6f-mid {
-	-webkit-animation-duration: 1020ms;
-	/* 170ms x 6 */
-	-webkit-animation-timing-function: steps(6);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 1020ms;
-	/* 170ms x 6 */
-	animation-timing-function: steps(6);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-doggy-6f-slow {
-	-webkit-animation-duration: 1980ms;
-	/* 330ms x 6 */
-	-webkit-animation-timing-function: steps(6);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 1980ms;
-	/* 330ms x 6 */
-	animation-timing-function: steps(6);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-/* sex animations, close-up slots */
-.anim-close-3f-vfast {
-	-webkit-animation-duration: 240ms;
-	/* 80ms x 3 */
-	-webkit-animation-timing-function: steps(3);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 240ms;
-	/* 80ms x 3 */
-	animation-timing-function: steps(3);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-close-3f-fast {
-	-webkit-animation-duration: 330ms;
-	/* 110ms x 3 */
-	-webkit-animation-timing-function: steps(3);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 330ms;
-	/* 110ms x 3 */
-	animation-timing-function: steps(3);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-close-3f-mid {
-	-webkit-animation-duration: 510ms;
-	/* 170ms x 3 */
-	-webkit-animation-timing-function: steps(3);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 510ms;
-	/* 170ms x 3 */
-	animation-timing-function: steps(3);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-close-3f-slow {
-	-webkit-animation-duration: 990ms;
-	/* 330ms x 3 */
-	-webkit-animation-timing-function: steps(3);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 990ms;
-	/* 330ms x 3 */
-	animation-timing-function: steps(3);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-close-4f-vfast {
-	-webkit-animation-duration: 320ms;
-	/* 80ms x 4 */
-	-webkit-animation-timing-function: steps(4);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 320ms;
-	/* 80ms x 4 */
-	animation-timing-function: steps(4);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-close-4f-fast {
-	-webkit-animation-duration: 440ms;
-	/* 110ms x 4 */
-	-webkit-animation-timing-function: steps(4);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 440ms;
-	/* 110ms x 4 */
-	animation-timing-function: steps(4);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-close-4f-mid {
-	-webkit-animation-duration: 680ms;
-	/* 170ms x 4 */
-	-webkit-animation-timing-function: steps(4);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 680ms;
-	/* 170ms x 4 */
-	animation-timing-function: steps(4);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-close-4f-slow {
-	-webkit-animation-duration: 1320ms;
-	/* 330ms x 4 */
-	-webkit-animation-timing-function: steps(4);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 1320ms;
-	/* 330ms x 4 */
-	animation-timing-function: steps(4);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-close-10f-vfast {
-	-webkit-animation-duration: 800ms;
-	/* 80ms x 10 */
-	-webkit-animation-timing-function: steps(10);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 800ms;
-	/* 80ms x 10 */
-	animation-timing-function: steps(10);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-close-10f-fast {
-	-webkit-animation-duration: 1100ms;
-	/* 110ms x 10 */
-	-webkit-animation-timing-function: steps(10);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 1100ms;
-	/* 110ms x 10 */
-	animation-timing-function: steps(10);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-close-10f-mid {
-	-webkit-animation-duration: 1700ms;
-	/* 170ms x 10 */
-	-webkit-animation-timing-function: steps(10);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 1700ms;
-	/* 170ms x 10 */
-	animation-timing-function: steps(10);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-close-10f-slow {
-	-webkit-animation-duration: 3300ms;
-	/* 330ms x 10 */
-	-webkit-animation-timing-function: steps(10);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 3300ms;
-	/* 330ms x 10 */
-	animation-timing-function: steps(10);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-/* Currently unused */
-.anim-close-5f-vfast {
-	-webkit-animation-duration: 400ms;
-	/* 80ms x 5 */
-	-webkit-animation-timing-function: steps(5);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 400ms;
-	/* 80ms x 5 */
-	animation-timing-function: steps(5);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-close-5f-fast {
-	-webkit-animation-duration: 550ms;
-	/* 110ms x 5 */
-	-webkit-animation-timing-function: steps(5);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 550ms;
-	/* 110ms x 5 */
-	animation-timing-function: steps(5);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-close-5f-mid {
-	-webkit-animation-duration: 850ms;
-	/* 170ms x 5 */
-	-webkit-animation-timing-function: steps(5);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 850ms;
-	/* 170ms x 5 */
-	animation-timing-function: steps(5);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-close-5f-slow {
-	-webkit-animation-duration: 1650ms;
-	/* 330ms x 5 */
-	-webkit-animation-timing-function: steps(5);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 1650ms;
-	/* 330ms x 5 */
-	animation-timing-function: steps(5);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-close-6f-vfast {
-	-webkit-animation-duration: 480ms;
-	/* 80ms x 6 */
-	-webkit-animation-timing-function: steps(6);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 480ms;
-	/* 80ms x 6 */
-	animation-timing-function: steps(6);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-close-6f-fast {
-	-webkit-animation-duration: 660ms;
-	/* 110ms x 6 */
-	-webkit-animation-timing-function: steps(6);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 660ms;
-	/* 110ms x 6 */
-	animation-timing-function: steps(6);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-close-6f-mid {
-	-webkit-animation-duration: 1020ms;
-	/* 170ms x 6 */
-	-webkit-animation-timing-function: steps(6);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 1020ms;
-	/* 170ms x 6 */
-	animation-timing-function: steps(6);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-close-6f-slow {
-	-webkit-animation-duration: 1980ms;
-	/* 330ms x 6 */
-	-webkit-animation-timing-function: steps(6);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 1980ms;
-	/* 330ms x 6 */
-	animation-timing-function: steps(6);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-xray-8f-vfast {
-	-webkit-animation-duration: 320ms;
-	/* 40ms x 8 */
-	-webkit-animation-timing-function: steps(8);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 320ms;
-	/* 40ms x 8 */
-	animation-timing-function: steps(8);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-xray-8f-fast {
-	-webkit-animation-duration: 480ms;
-	/* 60ms x 8 */
-	-webkit-animation-timing-function: steps(8);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 480ms;
-	/* 60ms x 8 */
-	animation-timing-function: steps(8);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-xray-8f-mid {
-	-webkit-animation-duration: 640ms;
-	/* 80ms x 8 */
-	-webkit-animation-timing-function: steps(8);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 640ms;
-	/* 80ms x 8 */
-	animation-timing-function: steps(8);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.anim-xray-8f-slow {
-	-webkit-animation-duration: 1320ms;
-	/* 170ms x 8 */
-	-webkit-animation-timing-function: steps(8);
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: anim-default;
-	animation-duration: 1320ms;
-	/* 170ms x 8 */
-	animation-timing-function: steps(8);
-	animation-iteration-count: infinite;
-	animation-name: anim-default;
-}
-
-.height64NoMargin {
-	height: 128px !important;
-}
-
-.height64 {
-	margin-top: 64px;
-	height: 128px;
-}
-
-.height128 {
-	margin-top: 128px;
-	height: 128px;
-}
-
-.capitalize,
-.capitalize * {
-	text-transform: capitalize;
-}
-
-.colour-sample {
-	display: inline-block;
-	width: 0.8em;
-	height: 0.8em;
-	background: #f00;
-	border-radius: 1em;
-}
-
-.bgcolour-eyes {
-	background: #6e4e11;
-}
-
-.bgcolour-hair {
-	background: #fd6064;
-}
-
-.bgcolour-red {
-	background: #f00;
-}
-
-.link-disabled {
-	pointer-events: none;
-	cursor: default;
-	text-decoration: none;
-	color: dimgrey;
-	filter: saturate(0);
-}
-
-/* duration related-classes.
-	When adding, don't forget to add it to rule above with animation-iteration-count */
-.anim-1s {
-	-webkit-animation-duration: 1s;
-	animation-duration: 1s;
-}
-
-.anim-2s {
-	-webkit-animation-duration: 2s;
-	animation-duration: 2s;
-}
-
-/* frame-count related classes */
-.anim-2f {
-	-webkit-animation-timing-function: steps(2);
-	animation-timing-function: steps(2);
-}
-
-.anim-4f {
-	-webkit-animation-timing-function: steps(4);
-	animation-timing-function: steps(4);
-}
-
-@keyframes anim-default {
-	0% {
-		transform: translateX(0);
-	}
-
-	100% {
-		transform: translateX(-100%);
-	}
-}
-
-#characteristics-display,
-#socials-display {
-	position: relative;
-	z-index: 0;
-}
-
-.characteristic-box-list,
-.relation-box-list {
-	display: flex;
-	flex-wrap: wrap;
-	position: relative;
-}
-
-.characteristic-box-list .characteristic-box {
-	position: relative;
-	display: inline-flex;
-	flex-direction: column;
-	align-items: center;
-	flex: 1 1 100px;
-	min-width: 18%;
-	margin: 0.15rem;
-	border: 1px solid var(--300);
-	padding: 0.3rem;
-	text-align: center;
-}
-
-#base-characteristics .characteristic-box {
-	min-width: 23%;
-}
-
-.characteristic-box-list .characteristic-top-line {
-	align-self: flex-start;
-	display: flex;
-	width: 100%;
-	justify-content: space-between;
-	font-size: 1.1em;
-}
-
-#base-characteristics .characteristic-top-line {
-	font-size: 1.2em;
-}
-
-.characteristic-box-list .characteristic-title,
-.relation-box .relation-top-line .relation-name {
-	flex: 1;
-	align-self: flex-end;
-	text-align: left;
-	padding-left: 0.5rem;
-}
-
-.farm-status .characteristic-title,
-.relation-box .relation-top-line .relation-name {
-	flex: 1;
-	align-self: flex-end;
-	text-align: center;
-	padding-left: 0.5rem;
-}
-
-.characteristic-box-list .characteristic-top-line .characteristic-level .grade-percent,
-.characteristic-modifier,
-.relation-box .relation-top-line .relation-title {
-	display: inline-block;
-	min-width: 37px;
-}
-
-.characteristic-box-list .characteristic-description {
-	padding: 0.3rem;
-}
-
-.characteristic-box-list .characteristic-description.grade-progress {
-	border-bottom: 1px solid var(--600);
-	width: 80%;
-	padding-bottom: 0;
-	margin-bottom: 0.3rem;
-}
-
-.characteristic-box-list .meter {
-	position: absolute;
-	bottom: 0;
-}
-
-#characteristics-display h4,
-#relation-display h4 {
-	margin-top: 2rem;
-	margin-bottom: 0;
-	font-weight: normal;
-}
-
-#base-skills.characteristic-box-list .characteristic-box {
-	min-width: var(--min-width);
-}
-
-.characteristic-box-extras {
-	margin-left: 0.5rem;
-}
-
-.characteristic-icon {
-	height: 32px;
-	width: 32px;
-}
-
-#player-body {
-	position: absolute;
-	width: 256px;
-	left: calc(50% - 127px + 0.3rem);
-	display: flex;
-	justify-content: center;
-	pointer-events: none;
-	z-index: 0;
-}
-
-#player-body #img {
-	position: relative;
-}
-
-#sex-diagram {
-	display: flex;
-	width: calc(100% - 0.3rem);
-	padding: 0.3rem 0.15rem;
-}
-
-#sex-diagram .sex-diagram-box {
-	display: flex;
-}
-
-#sex-diagram .characteristic-box-list {
-	flex-flow: column nowrap;
-	width: 50%;
-	padding: 0;
-	margin: 0;
-}
-
-#sex-diagram .characteristic-box-list .characteristic-box {
-	width: 50%;
-	margin: 0.15rem 0;
-	/* z-index: 1; Disable due to causing issue with modifier tooltips (+20%), its intended effect was unclear */
-}
-
-#sex-diagram .connector-box {
-	position: relative;
-	height: 100%;
-	flex: 1;
-	margin: 0.15rem 0;
-	/* z-index: 1; Disable due to causing issue with modifier tooltips (+20%), its intended effect was unclear */
-}
-
-#sex-diagram .connector-box > div {
+.purplebar {
 	position: absolute;
+	left: 0;
 	top: 0;
+	height: 0.25em;
+	background-color: var(--purple-secondary);
+	z-index: 0;
+	max-width: 100%;
 }
 
-#sex-diagram .connector-box-top {
-	border-top: 1px solid var(--300);
-}
-
-#sex-diagram .connector-box-bottom {
-	height: var(--connector-height);
-	border-bottom: 1px solid var(--300);
-}
-
-#sex-diagram .connector-box.invert .connector-box-bottom {
-	top: calc(-1 * var(--connector-height));
-	border-top: 1px solid var(--300);
-	border-bottom: none;
+.rightMeter .purplebar {
+	height: 0.375em;
 }
 
-#sex-diagram .left-column .connector-box-top {
+.bluebar {
+	position: absolute;
 	left: 0;
-	right: var(--center-offset);
-}
-
-#sex-diagram .left-column .connector-box-bottom {
-	left: calc(100% - var(--center-offset));
-	right: var(--end-offset);
-	border-left: 1px solid var(--300);
-}
-
-#sex-diagram .right-column .connector-box-top {
-	left: var(--center-offset);
-	right: 0;
-}
-
-#sex-diagram .right-column .connector-box-bottom {
-	left: var(--end-offset);
-	right: calc(100% - var(--center-offset));
-	border-right: 1px solid var(--300);
-}
-
-@media (max-width: 1200px) {
-	#base-characteristics .characteristic-box,
-	.characteristic-box-list .characteristic-box {
-		min-width: 45%;
-	}
-
-	#base-skills.characteristic-box-list .characteristic-box {
-		min-width: 30%;
-	}
-
-	#player-body {
-		display: none;
-	}
-
-	#sex-diagram .connector-box {
-		display: none;
-	}
-
-	#sex-diagram .left-column .connector-box {
-		margin-right: 0.15rem;
-	}
-
-	#sex-diagram .right-column {
-		margin-left: 0.15rem;
-	}
-}
-
-@media (max-width: 450px) {
-	#base-characteristics .characteristic-box,
-	.characteristic-box-list .characteristic-box,
-	#base-skills.characteristic-box-list .characteristic-box {
-		min-width: 46%;
-	}
-
-	#sex-diagram {
-		display: block;
-	}
-
-	#sex-diagram .characteristic-box-list {
-		width: 100%;
-	}
-
-	#sex-diagram .left-column .connector-box {
-		margin-right: 0;
-	}
-
-	#sex-diagram .right-column {
-		margin-left: 0;
-	}
-}
-
-.relation-box-list .relation-box {
-	position: relative;
-	display: inline-flex;
-	flex-direction: column;
-	align-items: center;
-	min-width: 250px;
+	top: 0;
+	height: 0.25em;
+	background-color: var(--blue);
+	z-index: 0;
 	max-width: 100%;
-	margin: 0.15rem;
-	border: 1px solid var(--300);
-	text-align: center;
-	overflow: hidden;
-	flex: 1 1 32.4%;
-}
-
-.relation-box .relation-top-line {
-	display: flex;
-	align-items: space-between;
-	font-size: 1.1em;
-	border-bottom: 1px solid var(--750);
-	padding: 0.3em;
-	align-self: stretch;
-}
-
-.relation-box .relation-top-line .relation-title {
-	margin-right: 5px;
-	text-transform: capitalize;
-}
-
-.relation-box .relation-top-line .love-interest-icon {
-	width: 24px;
-	height: 24px;
 }
 
-.relation-box .relation-description {
-	padding: 0.5em;
-	font-size: 90%;
+.rightMeter .bluebar {
+	height: 0.375em;
 }
 
-.relation-box .relation-description .meter {
+.lbluebar {
 	position: absolute;
-	bottom: 0;
 	left: 0;
-}
-
-.relation-box .relation-stat-list {
-	display: flex;
-	flex-wrap: wrap;
-	background-image: linear-gradient(transparent 50%, var(--750) 0.1em, transparent calc(50% + 0.1em)),
-		linear-gradient(90deg, transparent 50%, var(--750) 0.1em, transparent calc(50% + 0.1em));
-	border-top: 1px solid var(--750);
-	background-size: contain;
-	background-repeat: no-repeat;
-	flex: 1;
-	width: 100%;
-	min-height: 130px;
-}
-
-.relation-box .relation-stat-list.no-images {
-	min-height: 80px;
-}
-
-.relation-box .relation-stat-list .relation-stat-block {
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	height: calc(50% - 0.6em);
-	padding: 0.3em;
-	width: calc(50% - 0.6em);
-	margin: 0;
-}
-
-.relation-box .relation-stat-list.no-images .relation-stat-block {
-	flex-direction: row;
-	justify-content: center;
-}
-
-.relation-box .relation-stat {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
+	top: 0;
+	height: 0.25em;
+	background-color: var(--blue-secondary);
 	z-index: 0;
+	max-width: 100%;
 }
 
-.relation-box .relation-stat-icon {
-	position: relative;
-	display: inline-block;
-	width: 32px;
-	height: 32px;
-	margin-right: 5px;
-}
-
-.relation-box .relation-stat-icon .active-icon-img {
-	position: relative;
-	z-index: 1;
-	clip-path: inset(0 calc(100% - var(--progress)) 0 0);
-}
-
-.relation-box .relation-stat-icon.vertical .active-icon-img {
-	clip-path: inset(calc(100% - var(--progress)) 0 0 0);
-}
-
-.relation-box .relation-stat-icon.vertical-inverted .active-icon-img {
-	clip-path: inset(0 0 calc(100% - var(--progress)) 0);
-}
-
-.relation-box .relation-stat-icon.horizontal-inverted .active-icon-img {
-	clip-path: inset(0 0 0 calc(100% - var(--progress)));
-}
-
-.relation-box .relation-stat-icon img.inactive-icon-img.outlined {
-	filter: contrast(0.35) brightness(0.25) saturate(0) drop-shadow(0 0 0 white);
+.rightMeter .lbluebar {
+	height: 0.375em;
 }
 
-.relation-box .relation-stat-icon img {
+.tealbar {
 	position: absolute;
-	width: 100%;
-	height: 100%;
-	top: 0;
-	bottom: 0;
 	left: 0;
-	right: 0;
-}
-
-.relation-box .relation-stat .relation-stat-percent {
-	text-align: left;
-}
-
-.relation-box .relation-stat-block .progress-bar {
-	width: var(--progress);
-	top: auto;
-	bottom: 0;
-}
-
-#npc-relations .relation-box {
-	max-width: 32.4%;
-}
-
-#secondary-npcs,
-#farm-status {
-	font-size: 85%;
-}
-
-#secondary-npcs .relation-box,
-#farm-status .relation-box {
-	min-width: 220px;
-	border-color: var(--500);
-	flex: 0 1 24.3%;
-}
-
-#secondary-npcs .relation-box .relation-top-line #farm-status .relation-box .relation-top-line {
-	padding: 0.2rem 0 0.1rem;
-}
-
-#secondary-npcs .relation-box .quick-stats {
-	display: inline-flex;
-	padding-right: 0.3em;
-	align-self: flex-end;
+	top: 0;
+	height: 0.25em;
+	background-color: var(--teal);
 	z-index: 0;
+	max-width: 100%;
 }
 
-#secondary-npcs .relation-box .quick-stats .relation-stat-block:not(:first-child) {
-	margin-left: 0.3em;
-}
-
-#secondary-npcs .relation-box .relation-stat .relation-stat-icon {
-	width: 20px;
-	height: 20px;
-}
-
-#secondary-npcs .relation-box .relation-stat .relation-stat-percent {
-	font-size: 85%;
-}
-
-#secondary-npcs .relation-box .relation-description,
-#farm-status .relation-box .relation-description,
-#global-recognition .relation-box .relation-description {
-	padding: 0.3em;
-}
-
-#faction-reputations .relation-box {
-	flex: 1 1 49%;
-}
-
-#global-recognition .relation-box {
-	flex: 1 1 30%;
-	min-width: 220px;
-	border-color: var(--700);
-}
-
-#global-recognition .relation-box:last-child {
-	font-size: 110%;
-	flex-basis: 100%;
-}
-
-#farm-status .relation-box:last-child {
-	font-size: 120%;
-	flex-basis: 100%;
-	text-align: center;
-	align-items: center;
-}
-
-#global-recognition .relation-box:nth-child(12n) {
-	font-size: 120%;
-	flex-basis: 100%;
-	text-align: center;
-}
-
-#global-recognition .relation-box:not(:last-child) .relation-box:not(:nth-child(12n)) .relation-description #farm-status .relation-box:not(:last-child) {
-	align-self: flex-start;
-}
-
-@media (max-width: 869px) {
-	#npc-relations .relation-box {
-		max-width: 100%;
-	}
-
-	#secondary-npcs .relation-box,
-	#farm-status .relation-box {
-		flex: 1 1 24.3%;
-	}
-}
-
-/* Eye blinking animation, 100 seconds loop to make 1% equal to 1s; eyes are closed for 0.05s */
-.eyes-blink {
-	-webkit-animation: anim-eyes-blink 180s infinite steps(1);
-	animation: anim-eyes-blink 180s infinite steps(1);
-}
-
-.eyes-blink-trauma {
-	-webkit-animation: anim-eyes-blink-trauma 180s infinite steps(1);
-	animation: anim-eyes-blink-trauma 180s infinite steps(1);
-}
-
-.eyes-closed {
-	transform: translateX(-50%);
-}
-
-@keyframes anim-eyes-blink {
-	0%,
-	5.05%,
-	13.1%,
-	16.15%,
-	16.8%,
-	23.8%,
-	36.85%,
-	41.9%,
-	42.95%,
-	47%,
-	53.05%,
-	57.1%,
-	61.15%,
-	66.2%,
-	73.25%,
-	79.3%,
-	82.35%,
-	83.4%,
-	83.95%,
-	89%,
-	93.05%,
-	99.1%,
-	100% {
-		transform: translateX(0);
-	}
-
-	5%,
-	13.05%,
-	16.1%,
-	16.75%,
-	23.75%,
-	36.8%,
-	41.85%,
-	42.9%,
-	46.95%,
-	53%,
-	57.05%,
-	61.1%,
-	66.15%,
-	73.2%,
-	79.25%,
-	82.3%,
-	83.35%,
-	83.9%,
-	88.95%,
-	93%,
-	99.05% {
-		transform: translateX(-50%);
-	}
-}
-
-@keyframes anim-eyes-blink-trauma {
-	0%,
-	13.1%,
-	23.2%,
-	38.3%,
-	51.4%,
-	69.5%,
-	77.6%,
-	90.7%,
-	100% {
-		transform: translateX(0);
-	}
-
-	13%,
-	23.1%,
-	38.2%,
-	51.3%,
-	69.4%,
-	77.5%,
-	90.6%,
-	99.9% {
-		transform: translateX(-50%);
-	}
-}
-
-.unconscious {
-	opacity: 0.6;
-	font-size: 0.9em;
-	-webkit-animation: anim-unconscious-fade-in 2s ease-out, anim-unconscious-blur infinite;
-	animation: anim-unconscious-fade-in 2s ease-out, anim-unconscious-blur infinite;
-}
-
-.fade-in {
-	-webkit-animation: anim-fade-in 2s ease-out;
-	animation: anim-fade-in 2s ease-out;
-}
-
-@keyframes anim-unconscious-blur {
-	0%,
-	100% {
-		-webkit-filter: blur(0);
-		filter: blur(0);
-	}
-
-	50% {
-		-webkit-filter: blur(1px);
-		filter: blur(1px);
-	}
-}
-
-@keyframes anim-unconscious-fade-in {
-	0% {
-		opacity: 0;
-	}
-
-	100% {
-		opacity: 0.6;
-	}
-}
-
-@keyframes anim-fade-in {
-	0% {
-		opacity: 0;
-	}
-
-	100% {
-		opacity: 1;
-	}
+.rightMeter .tealbar {
+	height: 0.375em;
 }
 
-.clothes-price-container .numberslider-group {
-	display: flex;
-	flex-direction: column;
-	border: 1px solid var(--750);
-	border-left: none;
-	border-right: none;
-	margin-top: 4px;
-	padding: 0.5em 0;
+.greenbar {
+	position: absolute;
+	left: 0;
+	top: 0;
+	height: 0.25em;
+	background-color: var(--green);
+	z-index: 0;
+	max-width: 100%;
 }
 
-.clothes-price-container .numberslider-inline {
-	display: flex;
-	flex-direction: column;
-	min-width: 50%;
-	margin-bottom: 0.5em;
+.rightMeter .greenbar {
+	height: 0.375em;
 }
 
-.clothes-price-container .numberslider-inline > span {
-	font-size: 0.9em;
+.goldbar {
+	position: absolute;
+	left: 0;
+	top: 0;
+	height: 0.25em;
+	background-color: var(--yellow);
+	z-index: 0;
+	max-width: 100%;
 }
 
-.clothes-price-container .numberslider-inline > .macro-numberslider {
-	display: flex;
+.rightMeter .goldbar {
+	height: 0.375em;
 }
 
-.settings-container {
-	margin-top: 10px;
+#journalNotesTextarea {
+	height: 80%;
+	height: calc(100% - 150px);
+	width: 90%;
+	width: calc(100% - 50px);
 }
 
-.settings-container .numberslider-group {
-	display: flex;
-	flex-direction: column;
-	border: 1px solid var(--750);
-	border-left: none;
-	border-right: none;
-	margin-top: 4px;
-	padding: 5px;
+#journalNotesTextarea textarea {
+	height: 100%;
+	width: 100%;
+	min-width: 150px;
 }
 
-.settings-container .numberslider-inline {
-	display: flex;
-	flex-direction: column;
-	min-width: 50%;
-	margin-bottom: 0.5em;
+@media (max-height: 300px) {
+	#journalNotesTextarea {
+		height: 100px;
+	}
 }
 
-.settings-intro {
-	padding: 10px;
+.capitalize,
+.capitalize * {
+	text-transform: capitalize;
 }
 
-.settings-intro ul {
-	margin: 0;
+.link-disabled {
+	pointer-events: none;
+	cursor: default;
+	text-decoration: none;
+	color: dimgrey;
+	filter: saturate(0);
 }
 
 .normal {
@@ -6648,89 +2656,6 @@ canvas {
 	background-color: #b74444 !important;
 }
 
-#card-cover-options {
-	display: flex;
-	flex-wrap: wrap;
-}
-
-.card.active {
-	filter: drop-shadow(-1px -1px 0 var(--000)) drop-shadow(1px -1px 0 var(--000)) drop-shadow(-1px 1px 0 var(--000)) drop-shadow(1px 1px 0 var(--000));
-}
-
-#card-cover-options .cardcover0 {
-	background-color: var(--850);
-	line-height: 1.75;
-}
-
-/* patterns are taken from http://projects.verou.me/css3pattern */
-.cardcover1 {
-	background-color: #600;
-	background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, #a88 6px, transparent 7px),
-		repeating-linear-gradient(225deg, transparent, transparent 5px, #a88 6px, transparent 7px);
-	box-shadow: inset 0 0 0 2px #400;
-}
-
-.cardcover2 {
-	background-color: #300;
-	background-image: radial-gradient(maroon 3px, transparent 3.33px),
-		repeating-radial-gradient(
-			maroon 0,
-			maroon 1.33px,
-			transparent 1.66px,
-			transparent 6.66px,
-			maroon 7px,
-			maroon 8.33px,
-			transparent 8.66px,
-			transparent 16.66px
-		);
-	background-size: 10px 10px, 30px 30px;
-	background-position: -5px -2px;
-	box-shadow: inset 0 0 0 2px #400;
-}
-
-.cardcover3 {
-	background-color: #900;
-	background-image: repeating-linear-gradient(120deg, rgba(255 255 255 10%), rgba(255 255 255 10%) 1px, transparent 1px, transparent 60px),
-		repeating-linear-gradient(60deg, rgba(255 255 255 -80%), rgba(255 255 255 10%) 1px, transparent 2px, transparent 60px),
-		linear-gradient(60deg, rgba(0 0 0 / 20%) 25%, transparent 25%, transparent 75%, rgba(0 0 0 / 20%) 75%),
-		linear-gradient(120deg, rgba(0 0 0 / 20%) 25%, transparent 25%, transparent 75%, rgba(0 0 0 / 20%) 75%);
-	background-size: 70px 120px;
-	background-position: -10px -17px;
-	box-shadow: inset 0 0 0 2px #600;
-}
-
-.cardcover4 {
-	background-color: #400;
-	background-image: linear-gradient(135deg, rgba(200 0 0 / 50%) 50%, transparent 50%), linear-gradient(225deg, rgba(200 0 0 / 50%) 50%, transparent 50%);
-	background-size: 14px 17px;
-	background-position: 11px 17px;
-	box-shadow: inset 0 0 0 2px #400;
-}
-
-.cardcover5 {
-	background-color: #400;
-	background-image: linear-gradient(90deg, rgba(200 0 0 / 50%) 50%, transparent 50%), linear-gradient(0deg, rgba(200 0 0 / 50%) 50%, transparent 50%);
-	background-size: 12px 12px;
-	background-position: -2px 4px;
-	box-shadow: inset 0 0 0 2px #400;
-}
-
-.cardcover6 {
-	background: linear-gradient(135deg, maroon 25%, transparent 25%) -50px 0, linear-gradient(225deg, maroon 25%, transparent 25%) -50px 0,
-		linear-gradient(315deg, maroon 25%, transparent 25%), linear-gradient(45deg, maroon 25%, transparent 25%);
-	background-size: 20px 21px;
-	background-position: 5px 1px, 5px 1px, 15px 1px, 15px 1px;
-	background-color: #300;
-	box-shadow: inset 0 0 0 2px #400;
-}
-
-.cardcover7 {
-	background-image: url("img/ui/vrellogo.png");
-	background-position: 0 3px;
-	background-color: #600;
-	box-shadow: inset 0 0 0 2px #300;
-}
-
 #new-version-notification {
 	position: fixed;
 	top: 0.5em;
@@ -6802,31 +2727,6 @@ a[target="_blank"]::after {
 	display: none;
 }
 
-#wardrobewear {
-	display: table;
-	background-color: var(--900);
-	border-radius: 3px;
-	transition: all 1.25s;
-}
-
-#wardrobewear.flash {
-	background-color: #edd464aa;
-}
-
-.wardrobe-action {
-	display: inline-block;
-	transition: all 1.25s;
-}
-
-.action-flash {
-	border-color: #edd464 !important;
-	color: #edd464 !important;
-}
-
-.action-flash a {
-	color: #edd464 !important;
-}
-
 .notransition {
 	transition: none !important;
 }
@@ -7001,387 +2901,85 @@ a[target="_blank"]::after {
 	color: transparent;
 	animation: 3s wraith-flicker alternate infinite;
 }
-
-.ironmade-ul {
-	padding-left: 1.5em;
-	margin: 0 0 5px;
-}
-
-.tentacles-blue {
-	-webkit-filter: hue-rotate(-120deg) saturate(100%) brightness(100%) contrast(100%);
-	filter: hue-rotate(-120deg) saturate(100%) brightness(100%) contrast(100%);
-}
-
-.tentacles-vines {
-	-webkit-filter: hue-rotate(160deg) saturate(80%) brightness(160%) contrast(100%);
-	filter: hue-rotate(160deg) saturate(80%) brightness(160%) contrast(100%);
-}
-
-.tentacles-roots {
-	-webkit-filter: hue-rotate(50deg) saturate(70%) brightness(140%) contrast(100%);
-	filter: hue-rotate(50deg) saturate(70%) brightness(140%) contrast(100%);
-}
-
-.tentacles-red {
-	-webkit-filter: hue-rotate(0deg) saturate(100%) brightness(100%) contrast(100%);
-	filter: hue-rotate(0deg) saturate(100%) brightness(100%) contrast(100%);
-}
-
-.tentacles-purple {
-	-webkit-filter: hue-rotate(300deg) saturate(100%) brightness(100%) contrast(100%);
-	filter: hue-rotate(300deg) saturate(100%) brightness(100%) contrast(100%);
-}
-
-.tentacles-peach {
-	-webkit-filter: hue-rotate(20deg) saturate(50%) brightness(250%) contrast(80%);
-	filter: hue-rotate(20deg) saturate(50%) brightness(250%) contrast(80%);
-}
-
-.tentacles-wraith {
-	-webkit-filter: hue-rotate(0deg) saturate(0%) brightness(500%) contrast(100%);
-	filter: hue-rotate(0deg) saturate(0%) brightness(500%) contrast(100%);
-	opacity: 0.5;
-}
-
-.tentacles-wraith-penetrated {
-	-webkit-filter: hue-rotate(0deg) saturate(0%) brightness(250%) contrast(60%);
-	filter: hue-rotate(0deg) saturate(0%) brightness(250%) contrast(60%);
-	opacity: 0.8;
-}
-
-#die_text {
-	font-size: 200%;
-}
-
-.strapon-purple {
-	-webkit-filter: saturate(0%) sepia(1) brightness(250%) contrast(140%) hue-rotate(230deg);
-	filter: saturate(0%) sepia(1) brightness(250%) contrast(140%) hue-rotate(230deg);
-}
-
-.strapon-red {
-	-webkit-filter: hue-rotate(0deg) saturate(120%) brightness(70%) contrast(140%);
-	filter: hue-rotate(0deg) saturate(120%) brightness(70%) contrast(140%);
-}
-
-.strapon-blue {
-	-webkit-filter: saturate(30%) sepia(1) hue-rotate(190deg) brightness(200%) contrast(140%);
-	filter: saturate(30%) sepia(1) hue-rotate(190deg) brightness(200%) contrast(140%);
-}
-
-.strapon-black {
-	-webkit-filter: hue-rotate(0deg) saturate(5%) brightness(120%) contrast(120%);
-	filter: hue-rotate(0deg) saturate(5%) brightness(120%) contrast(120%);
-}
-
-.strapon-pink {
-	-webkit-filter: hue-rotate(330deg) saturate(110%) brightness(120%) contrast(100%);
-	filter: hue-rotate(330deg) saturate(110%) brightness(120%) contrast(100%);
-}
-
-.strapon-fleshy {
-	-webkit-filter: hue-rotate(30deg) saturate(20%) brightness(410%) contrast(100%);
-	filter: hue-rotate(30deg) saturate(20%) brightness(410%) contrast(100%);
-}
-
-.strapon-green {
-	-webkit-filter: saturate(40%) sepia(1) hue-rotate(50deg) brightness(200%) contrast(125%);
-	filter: saturate(40%) sepia(1) hue-rotate(50deg) brightness(200%) contrast(125%);
-}
-
-.strapon-brown {
-	-webkit-filter: hue-rotate(0deg) saturate(10%) brightness(100%) contrast(120%);
-	filter: hue-rotate(0deg) saturate(10%) brightness(100%) contrast(120%);
-}
-
-/* Jimmy: Error display CSS.
-	Includes custom error handlers for <<error>> macros. */
-.error-view {
-	z-index: 999;
-}
-
-.error-view > .error {
-	display: flex;
-	align-items: center;
-}
-
-.error-export.macro-button {
-	width: unset;
-	margin: 0.1em 0.1em 0.1em 1em;
-}
-
-.dol-error > .error-toggle {
-	top: 8px;
-}
-
-.error-view > .error-toggle.exportable {
-	height: 2.5em;
-}
-
-.error-view > .error-toggle + span {
-	margin-left: 1.5em;
-}
-
-.error-view > span {
-	display: inline-block;
-	margin-left: 0.25em;
-}
-
-.error-view > span::before {
-	content: "\e80d\00a0\00a0";
-	font-family: tme-fa-icons;
-	font-style: normal;
-	font-weight: 400;
-	font-variant: normal;
-	text-transform: none;
-	line-height: 1;
-}
-
-.dol-error > .error-export {
-	width: unset;
-	max-width: unset;
-	margin: 0.2rem;
-}
-
-/* End of error CSS */
-
-.icon.infront {
-	position: absolute;
-}
-
-#hairDresserDiv {
-	display: flex;
-	align-items: center;
-}
-
-.ironman-icon {
-	height: 1rem;
-	width: 1rem;
-	filter: brightness(2.2);
-}
-
-.grid {
-	display: grid;
-}
-
-.grid > * {
-	padding: 1rem;
-}
-
-/* Updated Hairstyle UI: Start */
-
-#hairContainerHeader,
-#hairContainerFooter {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-}
-
-#hairContainerHeader .tab,
-#hairContainerPages .tab,
-#hairContainerSave .tab,
-#hairContainerFilter .tab {
-	width: inherit;
-	border: 0;
-	border-radius: 0;
-	background-color: inherit;
-}
-
-#hairContainerHeader .tab-selected {
-	width: inherit;
-	border: 0;
-	border-radius: 0;
-}
-
-#hairContainerHeader .tab button {
-	background-color: var(--850);
-	border: 1px solid var(--600);
-	border-bottom: 0;
-	border-right: 0;
-	border-radius: 0;
-	color: var(--600);
-}
-
-#hairContainerHeader .tab-selected button {
-	background-color: var(--800);
-	border: 1px solid var(--150);
-	border-bottom: 0;
-	border-radius: 0;
-	color: var(--gold);
-}
-
-#hairContainerHeader button:hover {
-	background-color: var(--500);
-	border: 1px solid var(--000);
-	border-bottom: 0;
-	color: var(--000);
-}
-
-#hairContainerPages .tab button:hover,
-.hairContainerSave .tab button:hover,
-#hairContainerFilter .tab button:hover {
-	background-color: var(--500);
-	border: 1px solid var(--000);
-	border-top: 0;
-}
-
-#hairContainerHeader div:last-child {
-	border-right: 1px solid var(--600);
-}
-
-#hairContainerHairstyle {
-	padding: 20px;
-	background-color: var(--850);
-	border: 1px solid var(--150);
-	display: grid;
-	grid-gap: 10px;
-	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-}
-
-#hairContainerHairstyle .gridItem {
-	padding: 20px;
-	margin: 0 5px;
-}
-
-#hairContainerTraits {
-	background-color: var(--850);
-	border: 1px solid var(--150);
-	padding: 10px;
-}
-
-#hairContainerPages .tab button,
-.hairContainerSave .tab button,
-#hairContainerFilter .tab button {
-	border: 1px solid var(--150);
-	border-top: 0;
-	background-color: var(--800);
-
-	--max-width: max-content;
-
-	width: calc(var(--max-width) + 100px);
-	padding: 5px 15px;
-	border-radius: 0;
-}
-
-.tab #buttonpage button {
-	min-width: 50px;
-	cursor: initial;
-}
-
-.tab #buttonpage button:hover {
-	background-color: var(--800);
-	border: 1px solid var(--150);
-	border-top: 0;
-}
-
-#hairGridSides a {
-	color: var(--000);
-}
-
-#hairGridSides a:hover {
-	text-decoration: none;
-}
-
-.hairHeader {
-	display: grid;
-	padding: 2px;
-	text-align: center;
-	font-size: 22px;
-}
-
-.hairHeaderCollapsed {
-	display: grid;
-	padding: 2px;
-	text-align: center;
-	font-size: 22px;
-	background-color: var(--850);
-}
-
-.arrow {
-	border: solid var(--850);
-	border-width: 0 3px 3px 0;
-	padding: 5px;
-	margin: 10px 15px 10px 0;
-	float: right;
-	transform: rotate(-45deg);
-	-webkit-transform: rotate(-45deg);
+
+.ironmade-ul {
+	padding-left: 1.5em;
+	margin: 0 0 5px;
 }
 
-.arrowdown {
-	transform: rotate(45deg);
-	-webkit-transform: rotate(45deg);
+/* Jimmy: Error display CSS.
+	Includes custom error handlers for <<error>> macros. */
+.error-view {
+	z-index: 999;
 }
 
-.hairGrid {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-	grid-gap: 4px;
-	background-color: var(--850);
-	padding: 20px;
-	border: 1px solid var(--150);
+.error-view > .error {
+	display: flex;
+	align-items: center;
 }
 
-#textbox--hairstylename {
-	min-width: 25%;
-	margin: 0 5px;
+.error-export.macro-button {
+	width: unset;
+	margin: 0.1em 0.1em 0.1em 1em;
 }
 
-#hairGridFringe {
-	border-top: 2px solid var(--000);
+.dol-error > .error-toggle {
+	top: 8px;
 }
 
-.hairGridTraits {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+.error-view > .error-toggle.exportable {
+	height: 2.5em;
 }
 
-#hairContainerFilter .tab button:first-child {
-	color: var(--gold);
+.error-view > .error-toggle + span {
+	margin-left: 1.5em;
 }
 
-.gridItem,
-.saveHair {
-	border: 2px solid var(--600);
-	border-radius: 3px;
-	padding: 2px;
-	text-align: center;
-	cursor: pointer;
+.error-view > span {
+	display: inline-block;
+	margin-left: 0.25em;
 }
 
-.saveHair {
-	padding: 20px;
-	margin: 0 5px;
-	cursor: default;
+.error-view > span::before {
+	content: "\e80d\00a0\00a0";
+	font-family: tme-fa-icons;
+	font-style: normal;
+	font-weight: 400;
+	font-variant: normal;
+	text-transform: none;
+	line-height: 1;
 }
 
-.traitCategory {
-	border: 2px solid var(--600);
-	border-radius: 3px;
-	padding: 2px;
-	margin: 10px;
+.dol-error > .error-export {
+	width: unset;
+	max-width: unset;
+	margin: 0.2rem;
 }
 
-.gridItem:hover {
-	background-color: var(--500);
-	border: 2px solid var(--000);
+/* End of error CSS */
+
+.icon.infront {
+	position: absolute;
 }
 
-.selectedHair {
-	background-color: var(--750);
-	border: 2px solid var(--gold);
+#hairDresserDiv {
+	display: flex;
+	align-items: center;
 }
 
-.selectedHair a {
-	color: var(--gold);
+.ironman-icon {
+	height: 1rem;
+	width: 1rem;
+	filter: brightness(2.2);
 }
 
-.hairstyleMannequin {
-	width: 100px;
-	height: 100px;
-	object-fit: none;
-	object-position: 45% 14%;
+.grid {
+	display: grid;
 }
 
-/* Updated Hairstyle UI: End */
+.grid > * {
+	padding: 1rem;
+}
 
 .list {
 	display: flex;
@@ -7600,124 +3198,6 @@ a[target="_blank"]::after {
 	float: right;
 }
 
-/* FONT AWESOME ICONS:
-Complete list of FA icons available in Sugarcube: http://www.motoslave.net/sugarcube/tmp/tme-fa-icons/
-Built-in icons go from e800 - e84b. Click on 'show codes' to find the corresponding number for the icon you wish to add.
-*/
-.fa {
-	font-family: tme-fa-icons;
-	font-style: normal;
-	font-weight: 400;
-	font-variant: normal;
-	text-transform: none;
-	line-height: 1;
-}
-
-.fa-icon {
-	padding-left: 5px;
-}
-
-.fa-icon::before {
-	font-family: tme-fa-icons;
-	font-style: normal;
-	font-weight: 400;
-	font-variant: normal;
-	text-transform: none;
-	line-height: 1;
-}
-
-.fa-star::before {
-	content: "\e800\00a0"; /* to add a new icon, replace e800 with the corresponding number for the icon you wish to add */
-}
-
-.fa-star-empty::before {
-	content: "\e801\00a0";
-}
-
-.fa-asterisk::before {
-	content: "\e83b\00a0";
-}
-
-.fa-help-circled::before {
-	content: "\e808\00a0";
-}
-
-.fa-info::before {
-	content: "\e809\00a0";
-}
-
-.fa-info-circled::before {
-	content: "\e80a\00a0";
-}
-
-.fa-triangular-bullet::before {
-	content: "\e81a\00a0";
-}
-
-.fa-right::before {
-	content: "\e81e\00a0";
-}
-
-.fa-left::before {
-	content: "\e81d\00a0";
-}
-
-.fa-down::before {
-	content: "\e81c\00a0";
-}
-
-.fa-up::before {
-	content: "\e81f\00a0";
-}
-
-.fa-delete::before {
-	content: "\e828\00a0";
-}
-
-.fa-save::before {
-	content: "\e82b\00a0";
-}
-
-.fa-export::before {
-	content: "\e82a\00a0";
-}
-
-.fa-import::before {
-	content: "\e829\00a0";
-}
-
-.fa-overwrite::before {
-	content: "\e826\00a0";
-}
-
-.fa-check::before {
-	content: "\e803\00a0";
-}
-
-.fa-selected::before {
-	content: "\e832\00a0";
-}
-
-.fa-unselected::before {
-	content: "\e833\00a0";
-}
-
-.fa-reset::before {
-	content: "\e826\00a0";
-}
-
-.fa-right-arrow::before {
-	content: "\e822\00a0";
-}
-
-.fa-left-arrow::before {
-	content: "\e821\00a0";
-}
-
-.fa-plus::before {
-	content: "\e805\00a0";
-}
-
 /* Toggle */
 .tattoo-header h3 {
 	margin-left: 0;
@@ -7781,200 +3261,3 @@ Built-in icons go from e800 - e84b. Click on 'show codes' to find the correspond
 .tattoo-parts input:checked + label {
 	color: gold;
 }
-
-/* Start Menu UI */
-.containerStart {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-	grid-gap: 24px;
-}
-
-.startTabContainer {
-	display: flex;
-}
-
-.buttonStart {
-	width: 100%;
-	display: inline-block;
-}
-
-.buttonStartSelected {
-	width: 100%;
-	display: inline-block;
-	border: 1px solid var(--gold);
-}
-
-.buttonStart button,
-.buttonStartSelected button {
-	height: 100%;
-}
-
-.buttonSettings {
-	display: grid;
-}
-
-#listbox--upgradenameid {
-	margin-left: 10px;
-	padding-left: 10px;
-}
-
-#containerStart {
-	display: flex;
-	margin: -5px;
-}
-
-.containerWrap {
-	flex-wrap: wrap;
-}
-
-.containerWrap > div {
-	margin: 5px;
-	flex: 1 1 165px;
-}
-
-.containerWrap > div .buttonSettings,
-.containerWrap > div .buttonSettingsSelected {
-	height: 100%;
-}
-
-.buttonSettingsSelected {
-	display: grid;
-}
-
-.buttonSettingsSelected button {
-	border: 1px solid var(--gold);
-}
-
-.buttonSettings button,
-.buttonSettingsSelected button {
-	max-width: none;
-}
-
-.presetButtons button {
-	max-width: 100px;
-}
-
-.settingsGrid {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(49%, 1fr));
-	grid-gap: 14px;
-	margin: 10px;
-}
-
-.settingsGridFeats {
-	display: grid;
-	grid-gap: 14px;
-	margin: 10px;
-}
-
-.settingsHeader {
-	grid-column: 1/-1;
-	color: var(--gold);
-	text-align: center;
-	font-weight: bold;
-	font-size: 125%;
-	padding: 4px;
-	border: 1px solid var(--700);
-	background-color: var(--850);
-}
-
-.settingsToggleItem {
-	border: 1px solid var(--700);
-	padding: 8px;
-}
-
-.settingsToggleItem .macro-numberslider .small-description,
-.settingsToggleItemWide .macro-numberslider .small-description {
-	display: block;
-}
-
-.settingsToggleButton button {
-	max-width: 100%;
-	height: 100%;
-}
-
-.settingsToggleButtonGold button {
-	max-width: 100%;
-	height: 100%;
-	color: var(--gold);
-	border-color: var(--gold);
-}
-
-.settingsToggleItemWide {
-	border: 1px solid var(--700);
-	padding: 8px;
-	grid-column: 1/-1;
-}
-
-.settingsToggleIndent {
-	padding: 5px 0 0 15px;
-	grid-column: 1/-1;
-}
-
-.settingsToggleGroupWide {
-	grid-column: 1/-1;
-}
-
-.settingsToggleItemTall {
-	border: 1px solid var(--700);
-	padding: 8px;
-	min-height: 120px;
-}
-
-.featButton button {
-	background-color: var(--850);
-	width: fit-content;
-	padding: 0.1em 0.5em 0;
-	border: 1px solid var(--500);
-	line-height: inherit;
-}
-
-.featButtonGrey button {
-	background-color: var(--750);
-	color: var(--850);
-	width: fit-content;
-	padding: 0.1em 0.5em 0;
-	border: 1px solid var(--500);
-	line-height: inherit;
-	cursor: initial;
-}
-
-.featButtonGrey button:hover {
-	background-color: var(--750);
-	color: var(--850);
-	border: 1px solid var(--500);
-}
-
-.buttonDisable button {
-	cursor: initial;
-	background-color: var(--850);
-	border: 1px solid var(--500);
-}
-
-.buttonDisable button:hover {
-	background-color: var(--850);
-	border: 1px solid var(--500);
-}
-
-.roundl button {
-	border-top-left-radius: 5px;
-	border-bottom-left-radius: 5px;
-}
-
-.roundr button {
-	border-top-right-radius: 5px;
-	border-bottom-right-radius: 5px;
-}
-
-.roundr span,
-.roundl span {
-	margin: -5px;
-}
-
-.featButtonContainer {
-	display: flex;
-}
-
-#pregnancyFeatsDisabled {
-	margin: -10px 0 -5px;
-}
diff --git a/modules/css/blackjack.css b/modules/css/blackjack.css
new file mode 100644
index 0000000000..5b9571ff4d
--- /dev/null
+++ b/modules/css/blackjack.css
@@ -0,0 +1,109 @@
+.highlow div > * {
+	float: none;
+}
+
+.card {
+	width: 50px;
+	height: 75px;
+	border: 1px solid var(--200);
+	margin-right: 7px;
+	margin-bottom: 7px;
+	border-radius: 7px;
+	padding-top: 10px;
+}
+
+span.number,
+span.suit {
+	width: 100%;
+	display: block;
+	text-align: center;
+	padding-top: 2px;
+	padding-bottom: 2px;
+}
+
+#numberslider-value-estatecardscurrentbetinput::before {
+	content: "£";
+}
+
+#card-cover-options {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.card.active {
+	filter: drop-shadow(-1px -1px 0 var(--000)) drop-shadow(1px -1px 0 var(--000)) drop-shadow(-1px 1px 0 var(--000)) drop-shadow(1px 1px 0 var(--000));
+}
+
+#card-cover-options .cardcover0 {
+	background-color: var(--850);
+	line-height: 1.75;
+}
+
+/* patterns are taken from http://projects.verou.me/css3patterns */
+.cardcover1 {
+	background-color: #600;
+	background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, #a88 6px, transparent 7px),
+		repeating-linear-gradient(225deg, transparent, transparent 5px, #a88 6px, transparent 7px);
+	box-shadow: inset 0 0 0 2px #400;
+}
+
+.cardcover2 {
+	background-color: #300;
+	background-image: radial-gradient(maroon 3px, transparent 3.33px),
+		repeating-radial-gradient(
+			maroon 0,
+			maroon 1.33px,
+			transparent 1.66px,
+			transparent 6.66px,
+			maroon 7px,
+			maroon 8.33px,
+			transparent 8.66px,
+			transparent 16.66px
+		);
+	background-size: 10px 10px, 30px 30px;
+	background-position: -5px -2px;
+	box-shadow: inset 0 0 0 2px #400;
+}
+
+.cardcover3 {
+	background-color: #900;
+	background-image: repeating-linear-gradient(120deg, rgba(255 255 255 10%), rgba(255 255 255 10%) 1px, transparent 1px, transparent 60px),
+		repeating-linear-gradient(60deg, rgba(255 255 255 -80%), rgba(255 255 255 10%) 1px, transparent 2px, transparent 60px),
+		linear-gradient(60deg, rgba(0 0 0 / 20%) 25%, transparent 25%, transparent 75%, rgba(0 0 0 / 20%) 75%),
+		linear-gradient(120deg, rgba(0 0 0 / 20%) 25%, transparent 25%, transparent 75%, rgba(0 0 0 / 20%) 75%);
+	background-size: 70px 120px;
+	background-position: -10px -17px;
+	box-shadow: inset 0 0 0 2px #600;
+}
+
+.cardcover4 {
+	background-color: #400;
+	background-image: linear-gradient(135deg, rgba(200 0 0 / 50%) 50%, transparent 50%), linear-gradient(225deg, rgba(200 0 0 / 50%) 50%, transparent 50%);
+	background-size: 14px 17px;
+	background-position: 11px 17px;
+	box-shadow: inset 0 0 0 2px #400;
+}
+
+.cardcover5 {
+	background-color: #400;
+	background-image: linear-gradient(90deg, rgba(200 0 0 / 50%) 50%, transparent 50%), linear-gradient(0deg, rgba(200 0 0 / 50%) 50%, transparent 50%);
+	background-size: 12px 12px;
+	background-position: -2px 4px;
+	box-shadow: inset 0 0 0 2px #400;
+}
+
+.cardcover6 {
+	background: linear-gradient(135deg, maroon 25%, transparent 25%) -50px 0, linear-gradient(225deg, maroon 25%, transparent 25%) -50px 0,
+		linear-gradient(315deg, maroon 25%, transparent 25%), linear-gradient(45deg, maroon 25%, transparent 25%);
+	background-size: 20px 21px;
+	background-position: 5px 1px, 5px 1px, 15px 1px, 15px 1px;
+	background-color: #300;
+	box-shadow: inset 0 0 0 2px #400;
+}
+
+.cardcover7 {
+	background-image: url("img/ui/vrellogo.png");
+	background-position: 0 3px;
+	background-color: #600;
+	box-shadow: inset 0 0 0 2px #300;
+}
diff --git a/modules/css/characteristics.css b/modules/css/characteristics.css
new file mode 100644
index 0000000000..5f904246af
--- /dev/null
+++ b/modules/css/characteristics.css
@@ -0,0 +1,238 @@
+#characteristics-display,
+#socials-display {
+	position: relative;
+	z-index: 0;
+}
+
+.characteristic-box-list,
+.relation-box-list {
+	display: flex;
+	flex-wrap: wrap;
+	position: relative;
+}
+
+.characteristic-box-list .characteristic-box {
+	position: relative;
+	display: inline-flex;
+	flex-direction: column;
+	align-items: center;
+	flex: 1 1 100px;
+	min-width: 18%;
+	margin: 0.15rem;
+	border: 1px solid var(--300);
+	padding: 0.3rem;
+	text-align: center;
+}
+
+#base-characteristics .characteristic-box {
+	min-width: 23%;
+}
+
+.characteristic-box-list .characteristic-top-line {
+	align-self: flex-start;
+	display: flex;
+	width: 100%;
+	justify-content: space-between;
+	font-size: 1.1em;
+}
+
+#base-characteristics .characteristic-top-line {
+	font-size: 1.2em;
+}
+
+.characteristic-box-list .characteristic-title,
+.relation-box .relation-top-line .relation-name {
+	flex: 1;
+	align-self: flex-end;
+	text-align: left;
+	padding-left: 0.5rem;
+}
+
+.farm-status .characteristic-title,
+.relation-box .relation-top-line .relation-name {
+	flex: 1;
+	align-self: flex-end;
+	text-align: center;
+	padding-left: 0.5rem;
+}
+
+.characteristic-box-list .characteristic-top-line .characteristic-level .grade-percent,
+.characteristic-modifier,
+.relation-box .relation-top-line .relation-title {
+	display: inline-block;
+	min-width: 37px;
+}
+
+.characteristic-box-list .characteristic-description {
+	padding: 0.3rem;
+}
+
+.characteristic-box-list .characteristic-description.grade-progress {
+	border-bottom: 1px solid var(--600);
+	width: 80%;
+	padding-bottom: 0;
+	margin-bottom: 0.3rem;
+}
+
+.characteristic-box-list .meter {
+	position: absolute;
+	bottom: 0;
+}
+
+#characteristics-display h4,
+#relation-display h4 {
+	margin-top: 2rem;
+	margin-bottom: 0;
+	font-weight: normal;
+}
+
+#base-skills.characteristic-box-list .characteristic-box {
+	min-width: var(--min-width);
+}
+
+.characteristic-box-extras {
+	margin-left: 0.5rem;
+}
+
+.characteristic-icon {
+	height: 32px;
+	width: 32px;
+}
+
+#player-body {
+	position: absolute;
+	width: 256px;
+	left: calc(50% - 127px + 0.3rem);
+	display: flex;
+	justify-content: center;
+	pointer-events: none;
+	z-index: 0;
+}
+
+#player-body #img {
+	position: relative;
+}
+
+#sex-diagram {
+	display: flex;
+	width: calc(100% - 0.3rem);
+	padding: 0.3rem 0.15rem;
+}
+
+#sex-diagram .sex-diagram-box {
+	display: flex;
+}
+
+#sex-diagram .characteristic-box-list {
+	flex-flow: column nowrap;
+	width: 50%;
+	padding: 0;
+	margin: 0;
+}
+
+#sex-diagram .characteristic-box-list .characteristic-box {
+	width: 50%;
+	margin: 0.15rem 0;
+	/* z-index: 1; Disable due to causing issue with modifier tooltips (+20%), its intended effect was unclear */
+}
+
+#sex-diagram .connector-box {
+	position: relative;
+	height: 100%;
+	flex: 1;
+	margin: 0.15rem 0;
+	/* z-index: 1; Disable due to causing issue with modifier tooltips (+20%), its intended effect was unclear */
+}
+
+#sex-diagram .connector-box > div {
+	position: absolute;
+	top: 0;
+}
+
+#sex-diagram .connector-box-top {
+	border-top: 1px solid var(--300);
+}
+
+#sex-diagram .connector-box-bottom {
+	height: var(--connector-height);
+	border-bottom: 1px solid var(--300);
+}
+
+#sex-diagram .left-column .connector-box-bottom {
+	left: calc(100% - var(--center-offset));
+	right: var(--end-offset);
+	border-left: 1px solid var(--300);
+}
+
+#sex-diagram .right-column .connector-box-bottom {
+	left: var(--end-offset);
+	right: calc(100% - var(--center-offset));
+	border-right: 1px solid var(--300);
+}
+
+#sex-diagram .connector-box.invert .connector-box-bottom {
+	top: calc(-1 * var(--connector-height));
+	border-top: 1px solid var(--300);
+	border-bottom: none;
+}
+
+#sex-diagram .left-column .connector-box-top {
+	left: 0;
+	right: var(--center-offset);
+}
+
+#sex-diagram .right-column .connector-box-top {
+	left: var(--center-offset);
+	right: 0;
+}
+
+@media (max-width: 1200px) {
+	.characteristic-box-list .characteristic-box,
+	#base-characteristics .characteristic-box {
+		min-width: 45%;
+	}
+
+	#base-skills.characteristic-box-list .characteristic-box {
+		min-width: 30%;
+	}
+
+	#player-body {
+		display: none;
+	}
+
+	#sex-diagram .connector-box {
+		display: none;
+	}
+
+	#sex-diagram .left-column .connector-box {
+		margin-right: 0.15rem;
+	}
+
+	#sex-diagram .right-column {
+		margin-left: 0.15rem;
+	}
+}
+
+@media (max-width: 450px) {
+	.characteristic-box-list .characteristic-box,
+	#base-characteristics .characteristic-box,
+	#base-skills.characteristic-box-list .characteristic-box {
+		min-width: 46%;
+	}
+
+	#sex-diagram {
+		display: block;
+	}
+
+	#sex-diagram .characteristic-box-list {
+		width: 100%;
+	}
+
+	#sex-diagram .left-column .connector-box {
+		margin-right: 0;
+	}
+
+	#sex-diagram .right-column {
+		margin-left: 0;
+	}
+}
diff --git a/modules/css/color-filters.css b/modules/css/color-filters.css
new file mode 100644
index 0000000000..4132cd8e23
--- /dev/null
+++ b/modules/css/color-filters.css
@@ -0,0 +1,1873 @@
+/* Dice roll */
+#die_text {
+	font-size: 200%;
+}
+
+/*
+ * Hair/Eye/Clothing colour filters
+ * Expected document structure:
+ * - some outer element has .hair-$haircolour (or .eye-/.lower-/.upper-/.under-) class
+ * - inner image element has .colour-hair (or -eye/-lower/-upper/-under) class
+ */
+/* Hair: base is red */
+.brows-black,
+.hair-black .colour-hair,
+.pbhair-black {
+	-webkit-filter: hue-rotate(0deg) saturate(15%) brightness(50%) contrast(100%);
+	filter: hue-rotate(0deg) saturate(15%) brightness(50%) contrast(100%);
+}
+
+.brows-platinum-blond,
+.brows-platinumblond,
+.hair-platinum-blond .colour-hair,
+.pbhair-platinum-blond,
+.hair-platinumblond .colour-hair,
+.pbhair-platinumblond {
+	-webkit-filter: hue-rotate(57deg) saturate(60%) brightness(170%) contrast(80%) sepia(0);
+	filter: hue-rotate(57deg) saturate(60%) brightness(170%) contrast(80%) sepia(0);
+}
+
+.brows-ashy-blond,
+.brows-ashyblond,
+.hair-ashy-blond .colour-hair,
+.pbhair-ashy-blond,
+.hair-ashyblond .colour-hair,
+.pbhair-ashyblond {
+	-webkit-filter: hue-rotate(50deg) saturate(30%) brightness(140%) contrast(80%);
+	filter: hue-rotate(50deg) saturate(30%) brightness(140%) contrast(80%);
+}
+
+.brows-blond,
+.hair-blond .colour-hair,
+.pbhair-blond {
+	-webkit-filter: hue-rotate(60deg) saturate(80%) brightness(135%) contrast(90%);
+	filter: hue-rotate(60deg) saturate(80%) brightness(135%) contrast(90%);
+}
+
+.brows-blue,
+.hair-blue .colour-hair,
+.pbhair-blue {
+	-webkit-filter: hue-rotate(200deg) saturate(200%) brightness(58%) contrast(150%);
+	filter: hue-rotate(200deg) saturate(200%) brightness(58%) contrast(150%);
+}
+
+.hair-neon-blue .colour-hair,
+.pbhair-neon-blue,
+.hair-neonblue .colour-hair,
+.pbhair-neonblue {
+	-webkit-filter: hue-rotate(200deg) saturate(220%) brightness(130%) contrast(100%);
+	filter: hue-rotate(200deg) saturate(220%) brightness(130%) contrast(100%);
+}
+
+.brows-neon-blue,
+.brows-neonblue {
+	-webkit-filter: hue-rotate(200deg) saturate(220%) brightness(300%) contrast(100%);
+	filter: hue-rotate(200deg) saturate(220%) brightness(300%) contrast(100%);
+}
+
+.brows-brown,
+.hair-brown .colour-hair,
+.pbhair-brown {
+	-webkit-filter: hue-rotate(40deg) saturate(60%) brightness(71%) contrast(100%);
+	filter: hue-rotate(40deg) saturate(60%) brightness(71%) contrast(100%);
+}
+
+.brows-light-brown,
+.brows-lightbrown,
+.hair-light-brown .colour-hair,
+.pbhair-light-brown,
+.hair-lightbrown .colour-hair,
+.pbhair-lightbrown {
+	-webkit-filter: hue-rotate(40deg) saturate(70%) brightness(100%) contrast(110%);
+	filter: hue-rotate(40deg) saturate(70%) brightness(100%) contrast(110%);
+}
+
+.brows-dark-brown,
+.brows-darkbrown,
+.hair-dark-brown .colour-hair,
+.pbhair-dark-brown,
+.hair-darkbrown .colour-hair,
+.pbhair-darkbrown {
+	-webkit-filter: hue-rotate(30deg) saturate(70%) brightness(50%) contrast(110%);
+	filter: hue-rotate(30deg) saturate(70%) brightness(50%) contrast(110%);
+}
+
+.brows-strawberry-blond,
+.brows-strawberryblond,
+.hair-strawberry-blond .colour-hair,
+.pbhair-strawberry-blond,
+.hair-strawberryblond .colour-hair,
+.pbhair-strawberryblond {
+	-webkit-filter: hue-rotate(30deg) saturate(80%) brightness(150%) contrast(90%);
+	filter: hue-rotate(30deg) saturate(80%) brightness(150%) contrast(90%) sepia(1%);
+}
+
+.hair-ginger .colour-hair,
+.pbhair-ginger {
+	-webkit-filter: hue-rotate(30deg) saturate(150%) brightness(110%) contrast(90%);
+	filter: hue-rotate(30deg) saturate(150%) brightness(110%) contrast(90%);
+}
+
+.brows-ginger {
+	-webkit-filter: hue-rotate(30deg) brightness(430%) saturate(60%) contrast(120%);
+	filter: hue-rotate(30deg) brightness(430%) saturate(60%) contrast(120%);
+}
+
+.brows-blood-orange,
+.brows-bloodorange,
+.hair-blood-orange .colour-hair,
+.pbhair-blood-orange,
+.hair-bloodorange .colour-hair,
+.pbhair-bloodorange {
+	-webkit-filter: hue-rotate(14deg) saturate(150%) brightness(100%) contrast(120%);
+	filter: hue-rotate(14deg) saturate(150%) brightness(100%) contrast(120%);
+}
+
+.brows-burnt-orange,
+.brows-burntorange,
+.hair-burnt-orange .colour-hair,
+.pbhair-burnt-orange,
+.hair-burntorange .colour-hair,
+.pbhair-burntorange {
+	-webkit-filter: hue-rotate(34deg) contrast(57%) saturate(154%) brightness(104%);
+	filter: hue-rotate(34deg) contrast(57%) saturate(154%) brightness(104%);
+}
+
+.brows-jet-black,
+.brows-jetblack,
+.hair-jet-black .colour-hair,
+.pbhair-jet-black,
+.hair-jetblack .colour-hair,
+.pbhair-jetblack {
+	-webkit-filter: hue-rotate(0deg) saturate(0%) brightness(40%) contrast(100%);
+	filter: hue-rotate(0deg) saturate(0%) brightness(40%) contrast(100%);
+}
+
+.brows-soft-blond,
+.brows-softblond,
+.hair-soft-blond .colour-hair,
+.pbhair-soft-blond,
+.hair-softblond .colour-hair,
+.pbhair-softblond {
+	-webkit-filter: hue-rotate(57deg) saturate(250%) brightness(180%) contrast(60%) sepia(0.75);
+	filter: hue-rotate(57deg) saturate(250%) brightness(180%) contrast(60%) sepia(0.75);
+}
+
+.brows-golden,
+.hair-golden .colour-hair,
+.pbhair-golden {
+	-webkit-filter: hue-rotate(60deg) saturate(130%) brightness(135%) contrast(100%);
+	filter: hue-rotate(60deg) saturate(130%) brightness(135%) contrast(100%);
+}
+
+.brows-soft-brown,
+.brows-softbrown,
+.hair-soft-brown .colour-hair,
+.pbhair-soft-brown,
+.hair-softbrown .colour-hair,
+.pbhair-softbrown {
+	-webkit-filter: hue-rotate(40deg) saturate(100%) brightness(80%) contrast(100%);
+	filter: hue-rotate(40deg) saturate(100%) brightness(80%) contrast(100%);
+}
+
+.brows-dark-lime,
+.brows-darklime,
+.hair-dark-lime .colour-hair,
+.pbhair-dark-lime,
+.hair-darklime .colour-hair,
+.pbhair-darklime {
+	-webkit-filter: hue-rotate(90deg) saturate(100%) brightness(100%) contrast(100%);
+	filter: hue-rotate(90deg) saturate(100%) brightness(100%) contrast(100%);
+}
+
+.brows-bright-pink,
+.brows-brightpink,
+.hair-bright-pink .colour-hair,
+.pbhair-bright-pink,
+.hair-brightpink .colour-hair,
+.pbhair-brightpink {
+	-webkit-filter: hue-rotate(-20deg) saturate(70%) brightness(130%) contrast(100%);
+	filter: hue-rotate(-20deg) saturate(70%) brightness(130%) contrast(100%);
+}
+
+.brows-medium-purple,
+.brows-mediumpurple,
+.hair-medium-purple .colour-hair,
+.pbhair-medium-purple,
+.hair-mediumpurple .colour-hair,
+.pbhair-mediumpurple {
+	-webkit-filter: hue-rotate(-80deg) saturate(110%) brightness(60%) contrast(200%);
+	filter: hue-rotate(-80deg) saturate(110%) brightness(60%) contrast(200%);
+}
+
+.brows-green,
+.hair-green .colour-hair,
+.pbhair-green {
+	-webkit-filter: hue-rotate(125deg) saturate(100%) brightness(80%) contrast(100%);
+	filter: hue-rotate(125deg) saturate(100%) brightness(80%) contrast(100%);
+}
+
+.hair-toxic-green .colour-hair,
+.pbhair-toxic-green,
+.hair-toxicgreen .colour-hair,
+.pbhair-toxicgreen {
+	-webkit-filter: hue-rotate(80deg) saturate(220%) brightness(130%) contrast(100%);
+	filter: hue-rotate(80deg) saturate(220%) brightness(130%) contrast(100%);
+}
+
+.brows-toxic-green,
+.brows-toxicgreen {
+	-webkit-filter: hue-rotate(80deg) saturate(220%) brightness(330%) contrast(100%);
+	filter: hue-rotate(80deg) saturate(220%) brightness(330%) contrast(100%);
+}
+
+.hair-teal .colour-hair,
+.pbhair-teal {
+	-webkit-filter: hue-rotate(155deg) saturate(100%) brightness(88%) contrast(100%);
+	filter: hue-rotate(155deg) saturate(100%) brightness(88%) contrast(100%);
+}
+
+.brows-teal {
+	-webkit-filter: hue-rotate(155deg) saturate(100%) brightness(168%) contrast(100%);
+	filter: hue-rotate(155deg) saturate(100%) brightness(168%) contrast(100%);
+}
+
+.brows-pink,
+.hair-pink .colour-hair,
+.pbhair-pink {
+	-webkit-filter: hue-rotate(-20deg) saturate(70%) brightness(100%) contrast(100%);
+	filter: hue-rotate(-20deg) saturate(70%) brightness(100%) contrast(100%);
+}
+
+.brows-hot-pink,
+.brows-hotpink,
+.hair-hot-pink .colour-hair,
+.pbhair-hot-pink,
+.hair-hotpink .colour-hair,
+.pbhair-hotpink {
+	-webkit-filter: hue-rotate(320deg) saturate(100%) brightness(120%) contrast(100%);
+	filter: hue-rotate(320deg) saturate(100%) brightness(120%) contrast(100%);
+}
+
+.brows-soft-pink,
+.brows-softpink,
+.hair-soft-pink .colour-hair,
+.pbhair-soft-pink,
+.hair-softpink .colour-hair,
+.pbhair-softpink {
+	-webkit-filter: hue-rotate(-20deg) saturate(30%) brightness(150%) contrast(100%);
+	filter: hue-rotate(20deg) saturate(30%) brightness(150%) contrast(100%);
+}
+
+.brows-purple,
+.hair-purple .colour-hair,
+.pbhair-purple {
+	-webkit-filter: hue-rotate(-70deg) saturate(110%) brightness(50%) contrast(200%);
+	filter: hue-rotate(-70deg) saturate(110%) brightness(50%) contrast(200%);
+}
+
+.brows-bright-purple,
+.brows-brightpurple,
+.hair-bright-purple .colour-hair,
+.pbhair-bright-purple,
+.hair-brightpurple .colour-hair,
+.pbhair-brightpurple {
+	-webkit-filter: hue-rotate(259deg) saturate(220%) brightness(130%) contrast(100%);
+	filter: hue-rotate(259deg) saturate(220%) brightness(130%) contrast(100%);
+}
+
+.brows-red,
+.hair-red .colour-hair,
+.pbhair-red {
+	-webkit-filter: hue-rotate(0deg) saturate(100%) brightness(100%) contrast(100%);
+	filter: hue-rotate(0deg) saturate(100%) brightness(100%) contrast(100%);
+}
+
+.brows-crimson,
+.hair-crimson .colour-hair,
+.pbhair-crimson {
+	-webkit-filter: hue-rotate(0deg) saturate(155%) brightness(65%) contrast(135%);
+	filter: hue-rotate(0deg) saturate(155%) brightness(65%) contrast(135%);
+}
+
+.hair-white .colour-hair,
+.pbhair-white {
+	-webkit-filter: hue-rotate(0deg) saturate(0%) brightness(160%) contrast(100%);
+	filter: hue-rotate(0deg) saturate(0%) brightness(160%) contrast(100%);
+}
+
+.brows-white {
+	-webkit-filter: hue-rotate(250deg) saturate(0%) brightness(620%) contrast(100%);
+	filter: hue-rotate(250deg) saturate(0%) brightness(620%) contrast(100%);
+}
+
+.hair-snow-white .colour-hair,
+.pbhair-snow-white,
+.hair-snowwhite .colour-hair,
+.pbhair-snowwhite {
+	-webkit-filter: hue-rotate(0deg) saturate(0%) brightness(190%) contrast(100%);
+	filter: hue-rotate(0deg) saturate(0%) brightness(190%) contrast(100%);
+}
+
+.brows-snow-white,
+.brows-snowwhite {
+	-webkit-filter: hue-rotate(0deg) saturate(0%) brightness(690%) contrast(100%);
+	filter: hue-rotate(0deg) saturate(0%) brightness(690%) contrast(100%);
+}
+
+.hair-deep-blue .colour-hair,
+.pbhair-deep-blue,
+.hair-deepblue .colour-hair,
+.pbhair-deepblue {
+	-webkit-filter: hue-rotate(240deg) saturate(100%) brightness(40%) contrast(120%);
+	filter: hue-rotate(240deg) saturate(100%) brightness(40%) contrast(120%);
+}
+
+.brows-deep-blue,
+.brows-deepblue {
+	-webkit-filter: hue-rotate(240deg) saturate(100%) brightness(120%) contrast(120%);
+	filter: hue-rotate(240deg) saturate(100%) brightness(120%) contrast(120%);
+}
+
+/* Eye: base is hazel */
+.eye-dark-blue {
+	-webkit-filter: hue-rotate(170deg) brightness(90%) saturate(100%) contrast(140%);
+	filter: hue-rotate(170deg) brightness(90%) saturate(100%) contrast(140%);
+}
+
+.eye-light-blue {
+	-webkit-filter: hue-rotate(160deg) brightness(180%) saturate(120%) contrast(100%);
+	filter: hue-rotate(160deg) brightness(180%) saturate(120%) contrast(100%);
+}
+
+.eye-purple {
+	-webkit-filter: hue-rotate(-120deg) brightness(80%) saturate(200%) contrast(190%);
+	filter: hue-rotate(-120deg) brightness(80%) saturate(200%) contrast(190%);
+}
+
+.eye-hazel {
+	-webkit-filter: hue-rotate(0deg) saturate(100%) brightness(100%) contrast(100%);
+	filter: hue-rotate(0deg) saturate(100%) brightness(100%) contrast(100%);
+}
+
+.eye-amber {
+	-webkit-filter: hue-rotate(0deg) brightness(170%) saturate(100%) contrast(100%);
+	filter: hue-rotate(0deg) brightness(170%) saturate(100%) contrast(100%);
+}
+
+.eye-green {
+	-webkit-filter: hue-rotate(30deg) brightness(140%) saturate(100%) contrast(100%);
+	filter: hue-rotate(30deg) brightness(140%) saturate(100%) contrast(100%);
+}
+
+.eye-light-green {
+	-webkit-filter: hue-rotate(30deg) brightness(170%) saturate(160%) contrast(100%);
+	filter: hue-rotate(30deg) brightness(170%) saturate(160%) contrast(100%);
+}
+
+.eye-limegreen,
+.eye-lime-green {
+	-webkit-filter: hue-rotate(85deg) brightness(155%) saturate(124%) contrast(140%);
+	filter: hue-rotate(85deg) brightness(155%) saturate(124%) contrast(140%);
+}
+
+.eye-red {
+	-webkit-filter: hue-rotate(335deg) saturate(200%) brightness(100%) contrast(140%);
+	filter: hue-rotate(335deg) saturate(200%) brightness(100%) contrast(140%);
+}
+
+.eye-pink {
+	-webkit-filter: hue-rotate(-105deg) brightness(150%) saturate(120%) contrast(120%);
+	filter: hue-rotate(-105deg) brightness(150%) saturate(120%) contrast(120%);
+}
+
+.eye-grey {
+	-webkit-filter: hue-rotate(0deg) brightness(140%) saturate(0%) contrast(100%);
+	filter: hue-rotate(0deg) brightness(140%) saturate(0%) contrast(100%);
+}
+
+.eye-lightgrey,
+.eye-light-grey {
+	-webkit-filter: hue-rotate(0deg) brightness(220%) saturate(0%) contrast(100%);
+	filter: hue-rotate(0deg) brightness(220%) saturate(0%) contrast(100%);
+}
+
+.eye-redPossessed {
+	-webkit-filter: hue-rotate(335deg) saturate(200%) brightness(90%) contrast(140%);
+	filter: hue-rotate(335deg) saturate(200%) brightness(90%) contrast(140%);
+}
+
+.eye-bluePossessed {
+	-webkit-filter: hue-rotate(180deg) brightness(100%) saturate(100%) contrast(140%);
+	filter: hue-rotate(180deg) brightness(100%) saturate(100%) contrast(140%);
+}
+
+.eye-cat_tf_stage_0_left {
+	-webkit-filter: hue-rotate(245deg) brightness(99%) saturate(90%) contrast(137%);
+	filter: hue-rotate(245deg) brightness(99%) saturate(90%) contrast(137%);
+}
+
+.eye-cat_tf_stage_0_right {
+	-webkit-filter: hue-rotate(245deg) brightness(99%) saturate(90%) contrast(137%);
+	filter: hue-rotate(245deg) brightness(99%) saturate(90%) contrast(137%);
+}
+
+.eye-cat_tf_stage_1_left {
+	-webkit-filter: hue-rotate(211deg) brightness(105%) saturate(109%) contrast(160%);
+	filter: hue-rotate(211deg) brightness(105%) saturate(109%) contrast(160%);
+}
+
+.eye-cat_tf_stage_1_right {
+	-webkit-filter: hue-rotate(211deg) brightness(105%) saturate(109%) contrast(160%);
+	filter: hue-rotate(211deg) brightness(105%) saturate(109%) contrast(160%);
+}
+
+.eye-cat_tf_stage_2_left {
+	-webkit-filter: hue-rotate(117deg) brightness(139%) saturate(0%) contrast(210%);
+	filter: hue-rotate(117deg) brightness(139%) saturate(0%) contrast(210%);
+}
+
+.eye-cat_tf_stage_2_right {
+	-webkit-filter: hue-rotate(211deg) brightness(107%) saturate(140%) contrast(100%);
+	filter: hue-rotate(211deg) brightness(107%) saturate(140%) contrast(100%);
+}
+
+.eye-cat_tf_stage_3_left {
+	-webkit-filter: hue-rotate(127deg) brightness(120%) saturate(109%) contrast(100%);
+	filter: hue-rotate(127deg) brightness(120%) saturate(109%) contrast(100%);
+}
+
+.eye-cat_tf_stage_3_right {
+	-webkit-filter: hue-rotate(140deg) brightness(100%) saturate(210%) contrast(200%);
+	filter: hue-rotate(140deg) brightness(100%) saturate(210%) contrast(200%);
+}
+
+/* Clothing specific classes */
+/* Clothing opacity classes need to be applied to a div with the images inside */
+.clothes-div img {
+	position: absolute;
+}
+
+.clothes-damp {
+	-webkit-filter: opacity(0.9);
+	filter: opacity(0.9);
+}
+
+.clothes-wet {
+	-webkit-filter: opacity(0.7);
+	filter: opacity(0.7);
+}
+
+.clothes-drenshed {
+	-webkit-filter: opacity(0.5);
+	filter: opacity(0.5);
+}
+
+/* Clothing: base is red */
+.clothes-lime-green {
+	-webkit-filter: hue-rotate(85deg) brightness(185%) saturate(294%) contrast(120%);
+	filter: hue-rotate(85deg) brightness(185%) saturate(294%) contrast(120%);
+}
+
+.clothes-blue {
+	-webkit-filter: hue-rotate(-120deg) saturate(100%) brightness(100%) contrast(100%);
+	filter: hue-rotate(-120deg) saturate(100%) brightness(100%) contrast(100%);
+}
+
+.clothes-light-blue {
+	-webkit-filter: hue-rotate(210deg) saturate(20%) brightness(260%) contrast(100%);
+	filter: hue-rotate(210deg) saturate(20%) brightness(260%) contrast(100%);
+}
+
+.clothes-white {
+	-webkit-filter: hue-rotate(0deg) saturate(0%) brightness(440%) contrast(140%);
+	filter: hue-rotate(0deg) saturate(0%) brightness(440%) contrast(140%);
+}
+
+.clothes-pale-white {
+	-webkit-filter: hue-rotate(0deg) saturate(0%) brightness(250%) contrast(100%);
+	filter: hue-rotate(0deg) saturate(0%) brightness(250%) contrast(100%);
+}
+
+.clothes-red {
+	-webkit-filter: hue-rotate(0deg) saturate(100%) brightness(100%) contrast(100%);
+	filter: hue-rotate(0deg) saturate(100%) brightness(100%) contrast(100%);
+}
+
+.clothes-green {
+	-webkit-filter: hue-rotate(120deg) saturate(100%) brightness(150%) contrast(100%);
+	filter: hue-rotate(120deg) saturate(100%) brightness(150%) contrast(100%);
+}
+
+.clothes-light-green {
+	-webkit-filter: hue-rotate(90deg) saturate(20%) brightness(260%) contrast(100%);
+	filter: hue-rotate(90deg) saturate(20%) brightness(260%) contrast(100%);
+}
+
+.clothes-black {
+	-webkit-filter: hue-rotate(0deg) saturate(0%) brightness(110%) contrast(110%);
+	filter: hue-rotate(0deg) saturate(0%) brightness(110%) contrast(110%);
+}
+
+.clothes-fleshy {
+	-webkit-filter: hue-rotate(30deg) saturate(20%) brightness(410%) contrast(100%);
+	filter: hue-rotate(30deg) saturate(20%) brightness(410%) contrast(100%);
+}
+
+.clothes-pink {
+	-webkit-filter: hue-rotate(-30deg) saturate(50%) contrast(100%) brightness(160%);
+	filter: hue-rotate(-30deg) saturate(50%) contrast(100%) brightness(160%);
+}
+
+.clothes-light-pink {
+	-webkit-filter: hue-rotate(-40deg) saturate(20%) brightness(260%) contrast(100%);
+	filter: hue-rotate(-40deg) saturate(20%) brightness(260%) contrast(100%);
+}
+
+.clothes-purple {
+	-webkit-filter: hue-rotate(-80deg) saturate(100%) brightness(100%) contrast(100%);
+	filter: hue-rotate(-80deg) saturate(100%) brightness(100%) contrast(100%);
+}
+
+.clothes-tangerine {
+	-webkit-filter: hue-rotate(60deg) saturate(150%) brightness(200%) contrast(100%);
+	filter: hue-rotate(60deg) saturate(150%) brightness(200%) contrast(100%);
+}
+
+.clothes-pale-tangerine {
+	-webkit-filter: hue-rotate(60deg) saturate(400%) brightness(130%) contrast(100%);
+	filter: hue-rotate(60deg) saturate(400%) brightness(130%) contrast(100%);
+}
+
+.clothes-teal {
+	-webkit-filter: hue-rotate(-180deg) saturate(75%) brightness(200%) contrast(100%);
+	filter: hue-rotate(-180deg) saturate(75%) brightness(200%) contrast(100%);
+}
+
+.clothes-yellow {
+	-webkit-filter: hue-rotate(65deg) saturate(100%) brightness(290%) contrast(300%) sepia(0.55);
+	filter: hue-rotate(65deg) saturate(100%) brightness(290%) contrast(300%) sepia(0.55);
+}
+
+.clothes-pale-yellow {
+	-webkit-filter: hue-rotate(65deg) saturate(100%) brightness(250%) contrast(120%);
+	filter: hue-rotate(65deg) saturate(100%) brightness(250%) contrast(120%);
+}
+
+.clothes-brown {
+	-webkit-filter: hue-rotate(55deg) saturate(100%) brightness(90%) contrast(100%);
+	filter: hue-rotate(55deg) saturate(100%) brightness(90%) contrast(100%);
+}
+
+.clothes-tan {
+	-webkit-filter: hue-rotate(60.3deg) saturate(17.5%) brightness(270%);
+	filter: hue-rotate(60.3deg) saturate(17.5%) brightness(270%);
+}
+
+.clothes-grey {
+	-webkit-filter: hue-rotate(58.8deg) saturate(5%) brightness(270%);
+	filter: hue-rotate(58.8deg) saturate(5%) brightness(270%);
+}
+
+.clothes-sand {
+	-webkit-filter: hue-rotate(61deg) saturate(20%) brightness(370%);
+	filter: hue-rotate(61deg) saturate(20%) brightness(370%);
+}
+
+.clothes-off-white {
+	-webkit-filter: hue-rotate(70deg) saturate(1.3%) brightness(360%);
+	filter: hue-rotate(70deg) saturate(1.3%) brightness(360%);
+}
+
+.clothes-navy {
+	-webkit-filter: hue-rotate(250deg) saturate(7%) brightness(77%);
+	filter: hue-rotate(250deg) saturate(7%) brightness(77%);
+}
+
+.clothes-olive {
+	-webkit-filter: hue-rotate(67deg) saturate(24.5%) brightness(137%);
+	filter: hue-rotate(67deg) saturate(24.5%) brightness(137%);
+}
+
+.clothes-wine {
+	-webkit-filter: hue-rotate(351deg) saturate(28%) brightness(90%);
+	filter: hue-rotate(351deg) saturate(28%) brightness(90%);
+}
+
+.clothes-steel {
+	-webkit-filter: saturate(0%) brightness(310%) sepia(10%);
+	filter: saturate(0%) brightness(310%) sepia(10%);
+}
+
+.clothes-blue-steel {
+	-webkit-filter: saturate(0%) brightness(160%) sepia(80%) hue-rotate(180deg);
+	filter: saturate(0%) brightness(160%) sepia(80%) hue-rotate(180deg);
+}
+
+.clothes-bronze {
+	-webkit-filter: hue-rotate(63deg) saturate(60%) brightness(260%);
+	filter: hue-rotate(63deg) saturate(60%) brightness(260%);
+}
+
+.clothes-gold {
+	-webkit-filter: hue-rotate(68deg) saturate(220%) brightness(340%);
+	filter: hue-rotate(68deg) saturate(220%) brightness(340%);
+}
+
+.clothes-silver {
+	-webkit-filter: saturate(0%) brightness(400%);
+	filter: saturate(0%) brightness(400%);
+}
+
+/* adult shop fleshy colour begin; once Old Clothing classes become obsolete delete these classes as well */
+.upper-fleshy .colour-upper,
+.lower-fleshy .colour-lower,
+.under_lower-fleshy .colour-under_lower,
+.under_upper-fleshy .colour-under_upper,
+.genitals-fleshy .colour-genitals,
+.head-fleshy .colour-head,
+.face-fleshy .colour-face,
+.neck-fleshy .colour-neck,
+.hands-fleshy .colour-hands,
+.legs-fleshy .colour-legs,
+.feet-fleshy .colour-feet,
+.upper_acc-fleshy .colour-upper_acc,
+.lower_acc-fleshy .colour-lower_acc,
+.under_lower_acc-fleshy .colour-under_lower_acc,
+.under_upper_acc-fleshy .colour-under_upper_acc,
+.head_acc-fleshy .colour-head_acc,
+.face_acc-fleshy .colour-face_acc,
+.neck_acc-fleshy .colour-neck_acc,
+.hands_acc-fleshy .colour-hands_acc,
+.legs_acc-fleshy .colour-legs_acc,
+.feet_acc-fleshy .colour-feet_acc,
+.icon-fleshy {
+	-webkit-filter: hue-rotate(30deg) saturate(20%) brightness(410%) contrast(100%);
+	filter: hue-rotate(30deg) saturate(20%) brightness(410%) contrast(100%);
+}
+/* adult shop fleshy colour end */
+
+/* Old Clothing classes, need to be removed once all use of them is replaced, this includes the wetness classes */
+.upper-blue .colour-upper,
+.lower-blue .colour-lower,
+.under_lower-blue .colour-under_lower,
+.under_upper-blue .colour-under_upper,
+.head-blue .colour-head,
+.face-blue .colour-face,
+.neck-blue .colour-neck,
+.hands-blue .colour-hands,
+.legs-blue .colour-legs,
+.feet-blue .colour-feet,
+.upper_acc-blue .colour-upper_acc,
+.lower_acc-blue .colour-lower_acc,
+.under_lower_acc-blue .colour-under_lower_acc,
+.under_upper_acc-blue .colour-under_upper_acc,
+.head_acc-blue .colour-head_acc,
+.face_acc-blue .colour-face_acc,
+.neck_acc-blue .colour-neck_acc,
+.hands_acc-blue .colour-hands_acc,
+.legs_acc-blue .colour-legs_acc,
+.feet_acc-blue .colour-feet_acc,
+.icon-blue {
+	-webkit-filter: hue-rotate(-120deg) saturate(100%) brightness(100%) contrast(100%);
+	filter: hue-rotate(-120deg) saturate(100%) brightness(100%) contrast(100%);
+}
+
+.upper-blue-steel .colour-upper,
+.lower-blue-steel .colour-lower,
+.under_lower-blue-steel .colour-under_lower,
+.under_upper-blue-steel .colour-under_upper,
+.head-blue-steel .colour-head,
+.face-blue-steel .colour-face,
+.neck-blue-steel .colour-neck,
+.hands-blue-steel .colour-hands,
+.legs-blue-steel .colour-legs,
+.feet-blue-steel .colour-feet,
+.upper_acc-blue-steel .colour-upper_acc,
+.lower_acc-blue-steel .colour-lower_acc,
+.under_lower_acc-blue-steel .colour-under_lower_acc,
+.under_upper_acc-blue-steel .colour-under_upper_acc,
+.head_acc-blue-steel .colour-head_acc,
+.face_acc-blue-steel .colour-face_acc,
+.neck_acc-blue-steel .colour-neck_acc,
+.hands_acc-blue-steel .colour-hands_acc,
+.legs_acc-blue-steel .colour-legs_acc,
+.feet_acc-blue-steel .colour-feet_acc,
+.icon-blue-steel {
+	-webkit-filter: saturate(0%) brightness(160%) sepia(80%) hue-rotate(180deg);
+	filter: saturate(0%) brightness(160%) sepia(80%) hue-rotate(180deg);
+}
+
+.upper-light-blue .colour-upper,
+.lower-light-blue .colour-lower,
+.under_lower-light-blue .colour-under_lower,
+.under_upper-light-blue .colour-under_upper,
+.head-light-blue .colour-head,
+.face-light-blue .colour-face,
+.neck-light-blue .colour-neck,
+.hands-light-blue .colour-hands,
+.legs-light-blue .colour-legs,
+.feet-light-blue .colour-feet,
+.upper_acc-light-blue .colour-upper_acc,
+.lower_acc-light-blue .colour-lower_acc,
+.under_lower_acc-light-blue .colour-under_lower_acc,
+.under_upper_acc-light-blue .colour-under_upper_acc,
+.head_acc-light-blue .colour-head_acc,
+.face_acc-light-blue .colour-face_acc,
+.neck_acc-light-blue .colour-neck_acc,
+.hands_acc-light-blue .colour-hands_acc,
+.legs_acc-light-blue .colour-legs_acc,
+.feet_acc-light-blue .colour-feet_acc,
+.icon-light-blue {
+	-webkit-filter: hue-rotate(210deg) saturate(20%) brightness(260%) contrast(100%);
+	filter: hue-rotate(210deg) saturate(20%) brightness(260%) contrast(100%);
+}
+
+.upper-white .colour-upper,
+.lower-white .colour-lower,
+.under_lower-white .colour-under_lower,
+.under_upper-white .colour-under_upper,
+.head-white .colour-head,
+.face-white .colour-face,
+.neck-white .colour-neck,
+.hands-white .colour-hands,
+.legs-white .colour-legs,
+.feet-white .colour-feet,
+.upper_acc-white .colour-upper_acc,
+.lower_acc-white .colour-lower_acc,
+.under_lower_acc-white .colour-under_lower_acc,
+.under_upper_acc-white .colour-under_upper_acc,
+.head_acc-white .colour-head_acc,
+.face_acc-white .colour-face_acc,
+.neck_acc-white .colour-neck_acc,
+.hands_acc-white .colour-hands_acc,
+.legs_acc-white .colour-legs_acc,
+.feet_acc-white .colour-feet_acc,
+.icon-white,
+.upper-pale-white .colour-upper,
+.lower-pale-white .colour-lower,
+.under_lower-pale-white .colour-under_lower,
+.under_upper-pale-white .colour-under_upper,
+.head-pale-white .colour-head,
+.face-pale-white .colour-face,
+.neck-pale-white .colour-neck,
+.hands-pale-white .colour-hands,
+.legs-pale-white .colour-legs,
+.feet-pale-white .colour-feet,
+.upper_acc-pale-white .colour-upper_acc,
+.lower_acc-pale-white .colour-lower_acc,
+.under_lower_acc-pale-white .colour-under_lower_acc,
+.under_upper_acc-pale-white .colour-under_upper_acc,
+.head_acc-pale-white .colour-head_acc,
+.face_acc-pale-white .colour-face_acc,
+.neck_acc-pale-white .colour-neck_acc,
+.hands_acc-pale-white .colour-hands_acc,
+.legs_acc-pale-white .colour-legs_acc,
+.feet_acc-pale-white .colour-feet_acc,
+.icon-pale-white {
+	-webkit-filter: hue-rotate(0deg) saturate(0%) brightness(440%) contrast(140%);
+	filter: hue-rotate(0deg) saturate(0%) brightness(440%) contrast(140%);
+}
+
+.upper-red .colour-upper,
+.lower-red .colour-lower,
+.under_lower-red .colour-under_lower,
+.under_upper-red .colour-under_upper,
+.head-red .colour-head,
+.face-red .colour-face,
+.neck-red .colour-neck,
+.hands-red .colour-hands,
+.legs-red .colour-legs,
+.feet-red .colour-feet,
+.upper_acc-red .colour-upper_acc,
+.lower_acc-red .colour-lower_acc,
+.under_lower_acc-red .colour-under_lower_acc,
+.under_upper_acc-red .colour-under_upper_acc,
+.head_acc-red .colour-head_acc,
+.face_acc-red .colour-face_acc,
+.neck_acc-red .colour-neck_acc,
+.hands_acc-red .colour-hands_acc,
+.legs_acc-red .colour-legs_acc,
+.feet_acc-red .colour-feet_acc,
+.icon-red {
+	-webkit-filter: hue-rotate(0deg) saturate(100%) brightness(100%) contrast(100%);
+	filter: hue-rotate(0deg) saturate(100%) brightness(100%) contrast(100%);
+}
+
+.upper-green .colour-upper,
+.lower-green .colour-lower,
+.under_lower-green .colour-under_lower,
+.under_upper-green .colour-under_upper,
+.head-green .colour-head,
+.face-green .colour-face,
+.neck-green .colour-neck,
+.hands-green .colour-hands,
+.legs-green .colour-legs,
+.feet-green .colour-feet,
+.upper_acc-green .colour-upper_acc,
+.lower_acc-green .colour-lower_acc,
+.under_lower_acc-green .colour-under_lower_acc,
+.under_upper_acc-green .colour-under_upper_acc,
+.head_acc-green .colour-head_acc,
+.face_acc-green .colour-face_acc,
+.neck_acc-green .colour-neck_acc,
+.hands_acc-green .colour-hands_acc,
+.legs_acc-green .colour-legs_acc,
+.feet_acc-green .colour-feet_acc,
+.icon-green {
+	-webkit-filter: hue-rotate(120deg) saturate(100%) brightness(150%) contrast(100%);
+	filter: hue-rotate(120deg) saturate(100%) brightness(150%) contrast(100%);
+}
+
+.upper-light-green .colour-upper,
+.lower-light-green .colour-lower,
+.under_lower-light-green .colour-under_lower,
+.under_upper-light-green .colour-under_upper,
+.head-light-green .colour-head,
+.face-light-green .colour-face,
+.neck-light-green .colour-neck,
+.hands-light-green .colour-hands,
+.legs-light-green .colour-legs,
+.feet-light-green .colour-feet,
+.upper_acc-light-green .colour-upper_acc,
+.lower_acc-light-green .colour-lower_acc,
+.under_lower_acc-light-green .colour-under_lower_acc,
+.under_upper_acc-light-green .colour-under_upper_acc,
+.head_acc-light-green .colour-head_acc,
+.face_acc-light-green .colour-face_acc,
+.neck_acc-light-green .colour-neck_acc,
+.hands_acc-light-green .colour-hands_acc,
+.legs_acc-light-green .colour-legs_acc,
+.feet_acc-light-green .colour-feet_acc,
+.icon-light-green {
+	-webkit-filter: hue-rotate(90deg) saturate(20%) brightness(260%) contrast(100%);
+	filter: hue-rotate(90deg) saturate(20%) brightness(260%) contrast(100%);
+}
+
+.upper-black .colour-upper,
+.lower-black .colour-lower,
+.under_lower-black .colour-under_lower,
+.under_upper-black .colour-under_upper,
+.head-black .colour-head,
+.face-black .colour-face,
+.neck-black .colour-neck,
+.hands-black .colour-hands,
+.legs-black .colour-legs,
+.feet-black .colour-feet,
+.upper_acc-black .colour-upper_acc,
+.lower_acc-black .colour-lower_acc,
+.under_lower_acc-black .colour-under_lower_acc,
+.under_upper_acc-black .colour-under_upper_acc,
+.head_acc-black .colour-head_acc,
+.face_acc-black .colour-face_acc,
+.neck_acc-black .colour-neck_acc,
+.hands_acc-black .colour-hands_acc,
+.legs_acc-black .colour-legs_acc,
+.feet_acc-black .colour-feet_acc,
+.icon-black {
+	-webkit-filter: hue-rotate(0deg) saturate(0%) brightness(110%) contrast(110%);
+	filter: hue-rotate(0deg) saturate(0%) brightness(110%) contrast(110%);
+}
+
+.upper-pink .colour-upper,
+.lower-pink .colour-lower,
+.under_lower-pink .colour-under_lower,
+.under_upper-pink .colour-under_upper,
+.genitals-pink .colour-genitals,
+.head-pink .colour-head,
+.face-pink .colour-face,
+.neck-pink .colour-neck,
+.hands-pink .colour-hands,
+.legs-pink .colour-legs,
+.feet-pink .colour-feet,
+.upper_acc-pink .colour-upper_acc,
+.lower_acc-pink .colour-lower_acc,
+.under_lower_acc-pink .colour-under_lower_acc,
+.under_upper_acc-pink .colour-under_upper_acc,
+.head_acc-pink .colour-head_acc,
+.face_acc-pink .colour-face_acc,
+.neck_acc-pink .colour-neck_acc,
+.hands_acc-pink .colour-hands_acc,
+.legs_acc-pink .colour-legs_acc,
+.feet_acc-pink .colour-feet_acc,
+.icon-pink {
+	-webkit-filter: hue-rotate(-30deg) saturate(50%) contrast(100%) brightness(160%);
+	filter: hue-rotate(-30deg) saturate(50%) contrast(100%) brightness(160%);
+}
+
+.upper-light-pink .colour-upper,
+.lower-light-pink .colour-lower,
+.under_lower-light-pink .colour-under_lower,
+.under_upper-light-pink .colour-under_upper,
+.head-light-pink .colour-head,
+.face-light-pink .colour-face,
+.neck-light-pink .colour-neck,
+.hands-light-pink .colour-hands,
+.legs-light-pink .colour-legs,
+.feet-light-pink .colour-feet,
+.upper_acc-light-pink .colour-upper_acc,
+.lower_acc-light-pink .colour-lower_acc,
+.under_lower_acc-light-pink .colour-under_lower_acc,
+.under_upper_acc-light-pink .colour-under_upper_acc,
+.head_acc-light-pink .colour-head_acc,
+.face_acc-light-pink .colour-face_acc,
+.neck_acc-light-pink .colour-neck_acc,
+.hands_acc-light-pink .colour-hands_acc,
+.legs_acc-light-pink .colour-legs_acc,
+.feet_acc-light-pink .colour-feet_acc,
+.icon-light-pink {
+	-webkit-filter: hue-rotate(-40deg) saturate(20%) brightness(260%) contrast(100%);
+	filter: hue-rotate(-40deg) saturate(20%) brightness(260%) contrast(100%);
+}
+
+.upper-purple .colour-upper,
+.lower-purple .colour-lower,
+.under_lower-purple .colour-under_lower,
+.under_upper-purple .colour-under_upper,
+.head-purple .colour-head,
+.face-purple .colour-face,
+.neck-purple .colour-neck,
+.hands-purple .colour-hands,
+.legs-purple .colour-legs,
+.feet-purple .colour-feet,
+.upper_acc-purple .colour-upper_acc,
+.lower_acc-purple .colour-lower_acc,
+.under_lower_acc-purple .colour-under_lower_acc,
+.under_upper_acc-purple .colour-under_upper_acc,
+.head_acc-purple .colour-head_acc,
+.face_acc-purple .colour-face_acc,
+.neck_acc-purple .colour-neck_acc,
+.hands_acc-purple .colour-hands_acc,
+.legs_acc-purple .colour-legs_acc,
+.feet_acc-purple .colour-feet_acc,
+.icon-purple {
+	-webkit-filter: hue-rotate(-80deg) saturate(100%) brightness(100%) contrast(100%);
+	filter: hue-rotate(-80deg) saturate(100%) brightness(100%) contrast(100%);
+}
+
+.upper-tangerine .colour-upper,
+.lower-tangerine .colour-lower,
+.under_lower-tangerine .colour-under_lower,
+.under_upper-tangerine .colour-under_upper,
+.head-tangerine .colour-head,
+.face-tangerine .colour-face,
+.neck-tangerine .colour-neck,
+.hands-tangerine .colour-hands,
+.legs-tangerine .colour-legs,
+.feet-tangerine .colour-feet,
+.upper_acc-tangerine .colour-upper_acc,
+.lower_acc-tangerine .colour-lower_acc,
+.under_lower_acc-tangerine .colour-under_lower_acc,
+.under_upper_acc-tangerine .colour-under_upper_acc,
+.head_acc-tangerine .colour-head_acc,
+.face_acc-tangerine .colour-face_acc,
+.neck_acc-tangerine .colour-neck_acc,
+.hands_acc-tangerine .colour-hands_acc,
+.legs_acc-tangerine .colour-legs_acc,
+.feet_acc-tangerine .colour-feet_acc,
+.icon-tangerine,
+.upper-pale-tangerine .colour-upper,
+.lower-pale-tangerine .colour-lower,
+.under_lower-pale-tangerine .colour-under_lower,
+.under_upper-pale-tangerine .colour-under_upper,
+.head-pale-tangerine .colour-head,
+.face-pale-tangerine .colour-face,
+.neck-pale-tangerine .colour-neck,
+.hands-pale-tangerine .colour-hands,
+.legs-pale-tangerine .colour-legs,
+.feet-pale-tangerine .colour-feet,
+.upper_acc-pale-tangerine .colour-upper_acc,
+.lower_acc-pale-tangerine .colour-lower_acc,
+.under_lower_acc-pale-tangerine .colour-under_lower_acc,
+.under_upper_acc-pale-tangerine .colour-under_upper_acc,
+.head_acc-pale-tangerine .colour-head_acc,
+.face_acc-pale-tangerine .colour-face_acc,
+.neck_acc-pale-tangerine .colour-neck_acc,
+.hands_acc-pale-tangerine .colour-hands_acc,
+.legs_acc-pale-tangerine .colour-legs_acc,
+.feet_acc-pale-tangerine .colour-feet_acc,
+.icon-pale-tangerine {
+	-webkit-filter: hue-rotate(60deg) saturate(150%) brightness(200%) contrast(100%);
+	filter: hue-rotate(60deg) saturate(150%) brightness(200%) contrast(100%);
+}
+
+.upper-teal .colour-upper,
+.lower-teal .colour-lower,
+.under_lower-teal .colour-under_lower,
+.under_upper-teal .colour-under_upper,
+.head-teal .colour-head,
+.face-teal .colour-face,
+.neck-teal .colour-neck,
+.hands-teal .colour-hands,
+.legs-teal .colour-legs,
+.feet-teal .colour-feet,
+.upper_acc-teal .colour-upper_acc,
+.lower_acc-teal .colour-lower_acc,
+.under_lower_acc-teal .colour-under_lower_acc,
+.under_upper_acc-teal .colour-under_upper_acc,
+.head_acc-teal .colour-head_acc,
+.face_acc-teal .colour-face_acc,
+.neck_acc-teal .colour-neck_acc,
+.hands_acc-teal .colour-hands_acc,
+.legs_acc-teal .colour-legs_acc,
+.feet_acc-teal .colour-feet_acc,
+.icon-teal {
+	-webkit-filter: hue-rotate(-180deg) saturate(75%) brightness(200%) contrast(100%);
+	filter: hue-rotate(-180deg) saturate(75%) brightness(200%) contrast(100%);
+}
+
+.upper-yellow .colour-upper,
+.lower-yellow .colour-lower,
+.under_lower-yellow .colour-under_lower,
+.under_upper-yellow .colour-under_upper,
+.head-yellow .colour-head,
+.face-yellow .colour-face,
+.neck-yellow .colour-neck,
+.hands-yellow .colour-hands,
+.legs-yellow .colour-legs,
+.feet-yellow .colour-feet,
+.upper_acc-yellow .colour-upper_acc,
+.lower_acc-yellow .colour-lower_acc,
+.under_lower_acc-yellow .colour-under_lower_acc,
+.under_upper_acc-yellow .colour-under_upper_acc,
+.head_acc-yellow .colour-head_acc,
+.face_acc-yellow .colour-face_acc,
+.neck_acc-yellow .colour-neck_acc,
+.hands_acc-yellow .colour-hands_acc,
+.legs_acc-yellow .colour-legs_acc,
+.feet_acc-yellow .colour-feet_acc,
+.icon-yellow,
+.upper-pale-yellow .colour-upper,
+.lower-pale-yellow .colour-lower,
+.under_lower-pale-yellow .colour-under_lower,
+.under_upper-pale-yellow .colour-under_upper,
+.head-pale-yellow .colour-head,
+.face-pale-yellow .colour-face,
+.neck-pale-yellow .colour-neck,
+.hands-pale-yellow .colour-hands,
+.legs-pale-yellow .colour-legs,
+.feet-pale-yellow .colour-feet,
+.upper_acc-pale-yellow .colour-upper_acc,
+.lower_acc-pale-yellow .colour-lower_acc,
+.under_lower_acc-pale-yellow .colour-under_lower_acc,
+.under_upper_acc-pale-yellow .colour-under_upper_acc,
+.head_acc-pale-yellow .colour-head_acc,
+.face_acc-pale-yellow .colour-face_acc,
+.neck_acc-pale-yellow .colour-neck_acc,
+.hands_acc-pale-yellow .colour-hands_acc,
+.legs_acc-pale-yellow .colour-legs_acc,
+.feet_acc-pale-yellow .colour-feet_acc,
+.icon-pale-yellow {
+	-webkit-filter: hue-rotate(65deg) saturate(100%) brightness(290%) contrast(300%) sepia(0.55);
+	filter: hue-rotate(65deg) saturate(100%) brightness(290%) contrast(300%) sepia(0.55);
+}
+
+.upper-brown .colour-upper,
+.lower-brown .colour-lower,
+.under_lower-brown .colour-under_lower,
+.under_upper-brown .colour-under_upper,
+.head-brown .colour-head,
+.face-brown .colour-face,
+.neck-brown .colour-neck,
+.hands-brown .colour-hands,
+.legs-brown .colour-legs,
+.feet-brown .colour-feet,
+.upper_acc-brown .colour-upper_acc,
+.lower_acc-brown .colour-lower_acc,
+.under_lower_acc-brown .colour-under_lower_acc,
+.under_upper_acc-brown .colour-under_upper_acc,
+.head_acc-brown .colour-head_acc,
+.face_acc-brown .colour-face_acc,
+.neck_acc-brown .colour-neck_acc,
+.hands_acc-brown .colour-hands_acc,
+.legs_acc-brown .colour-legs_acc,
+.feet_acc-brown .colour-feet_acc,
+.icon-brown {
+	-webkit-filter: hue-rotate(55deg) saturate(100%) brightness(90%) contrast(100%);
+	filter: hue-rotate(55deg) saturate(100%) brightness(90%) contrast(100%);
+}
+
+/*
+*	ATTENTION: The following colours are not their actually recognised HSB value, as browsers are special little cunts that don't conform to standards
+*	Instead, I had to create these colours laboriously by hand, and they are as close as I could seemingly get to the real deal
+*	I have no idea how to actually replicate any of these colours properly without resorting to a pact with Satan
+*	Fuck browsers
+*/
+
+.upper-tan .colour-upper,
+.lower-tan .colour-lower,
+.under_lower-tan .colour-under_lower,
+.under_upper-tan .colour-under_upper,
+.head-tan .colour-head,
+.face-tan .colour-face,
+.neck-tan .colour-neck,
+.legs-tan .colour-legs,
+.feet-tan .colour-feet,
+.upper_acc-tan .colour-upper_acc,
+.lower_acc-tan .colour-lower_acc,
+.under_lower_acc-tan .colour-under_lower_acc,
+.under_upper_acc-tan .colour-under_upper_acc,
+.head_acc-tan .colour-head_acc,
+.face_acc-tan .colour-face_acc,
+.neck_acc-tan .colour-neck_acc,
+.legs_acc-tan .colour-legs_acc,
+.feet_acc-tan .colour-feet_acc,
+.icon-tan {
+	-webkit-filter: hue-rotate(60.3deg) saturate(17.5%) brightness(270%);
+	filter: hue-rotate(60.3deg) saturate(17.5%) brightness(270%);
+}
+
+.upper-grey .colour-upper,
+.lower-grey .colour-lower,
+.under_lower-grey .colour-under_lower,
+.under_upper-grey .colour-under_upper,
+.head-grey .colour-head,
+.face-grey .colour-face,
+.neck-grey .colour-neck,
+.legs-grey .colour-legs,
+.feet-grey .colour-feet,
+.upper_acc-grey .colour-upper_acc,
+.lower_acc-grey .colour-lower_acc,
+.under_lower_acc-grey .colour-under_lower_acc,
+.under_upper_acc-grey .colour-under_upper_acc,
+.head_acc-grey .colour-head_acc,
+.face_acc-grey .colour-face_acc,
+.neck_acc-grey .colour-neck_acc,
+.legs_acc-grey .colour-legs_acc,
+.feet_acc-grey .colour-feet_acc,
+.icon-grey {
+	-webkit-filter: hue-rotate(58.8deg) saturate(5%) brightness(270%);
+	filter: hue-rotate(58.8deg) saturate(5%) brightness(270%);
+}
+
+.upper-sand .colour-upper,
+.lower-sand .colour-lower,
+.under_lower-sand .colour-under_lower,
+.under_upper-sand .colour-under_upper,
+.head-sand .colour-head,
+.face-sand .colour-face,
+.neck-sand .colour-neck,
+.legs-sand .colour-legs,
+.feet-sand .colour-feet,
+.upper_acc-sand .colour-upper_acc,
+.lower_acc-sand .colour-lower_acc,
+.under_lower_acc-sand .colour-under_lower_acc,
+.under_upper_acc-sand .colour-under_upper_acc,
+.head_acc-sand .colour-head_acc,
+.face_acc-sand .colour-face_acc,
+.neck_acc-sand .colour-neck_acc,
+.legs_acc-sand .colour-legs_acc,
+.feet_acc-sand .colour-feet_acc,
+.icon-sand {
+	-webkit-filter: hue-rotate(61deg) saturate(20%) brightness(370%);
+	filter: hue-rotate(61deg) saturate(20%) brightness(370%);
+}
+
+.upper-off-white .colour-upper,
+.lower-off-white .colour-lower,
+.under_lower-off-white .colour-under_lower,
+.under_upper-off-white .colour-under_upper,
+.head-off-white .colour-head,
+.face-off-white .colour-face,
+.neck-off-white .colour-neck,
+.legs-off-white .colour-legs,
+.feet-off-white .colour-feet,
+.upper_acc-off-white .colour-upper_acc,
+.lower_acc-off-white .colour-lower_acc,
+.under_lower_acc-off-white .colour-under_lower_acc,
+.under_upper_acc-off-white .colour-under_upper_acc,
+.head_acc-off-white .colour-head_acc,
+.face_acc-off-white .colour-face_acc,
+.neck_acc-off-white .colour-neck_acc,
+.legs_acc-off-white .colour-legs_acc,
+.feet_acc-off-white .colour-feet_acc,
+.icon-off-white {
+	-webkit-filter: hue-rotate(70deg) saturate(1.3%) brightness(360%);
+	filter: hue-rotate(70deg) saturate(1.3%) brightness(360%);
+}
+
+.upper-navy .colour-upper,
+.lower-navy .colour-lower,
+.under_lower-navy .colour-under_lower,
+.under_upper-navy .colour-under_upper,
+.head-navy .colour-head,
+.face-navy .colour-face,
+.neck-navy .colour-neck,
+.legs-navy .colour-legs,
+.feet-navy .colour-feet,
+.upper_acc-navy .colour-upper_acc,
+.lower_acc-navy .colour-lower_acc,
+.under_lower_acc-navy .colour-under_lower_acc,
+.under_upper_acc-navy .colour-under_upper_acc,
+.head_acc-navy .colour-head_acc,
+.face_acc-navy .colour-face_acc,
+.neck_acc-navy .colour-neck_acc,
+.legs_acc-navy .colour-legs_acc,
+.feet_acc-navy .colour-feet_acc,
+.icon-navy {
+	-webkit-filter: hue-rotate(250deg) saturate(7%) brightness(77%);
+	filter: hue-rotate(250deg) saturate(7%) brightness(77%);
+}
+
+.upper-olive .colour-upper,
+.lower-olive .colour-lower,
+.under_lower-olive .colour-under_lower,
+.under_upper-olive .colour-under_upper,
+.head-olive .colour-head,
+.face-olive .colour-face,
+.neck-olive .colour-neck,
+.legs-olive .colour-legs,
+.feet-olive .colour-feet,
+.upper_acc-olive .colour-upper_acc,
+.lower_acc-olive .colour-lower_acc,
+.under_lower_acc-olive .colour-under_lower_acc,
+.under_upper_acc-olive .colour-under_upper_acc,
+.head_acc-olive .colour-head_acc,
+.face_acc-olive .colour-face_acc,
+.neck_acc-olive .colour-neck_acc,
+.legs_acc-olive .colour-legs_acc,
+.feet_acc-olive .colour-feet_acc,
+.icon-olive {
+	-webkit-filter: hue-rotate(67deg) saturate(24.5%) brightness(137%);
+	filter: hue-rotate(67deg) saturate(24.5%) brightness(137%);
+}
+
+.upper-wine .colour-upper,
+.lower-wine .colour-lower,
+.under_lower-wine .colour-under_lower,
+.under_upper-wine .colour-under_upper,
+.head-wine .colour-head,
+.face-wine .colour-face,
+.neck-wine .colour-neck,
+.legs-wine .colour-legs,
+.feet-wine .colour-feet,
+.upper_acc-wine .colour-upper_acc,
+.lower_acc-wine .colour-lower_acc,
+.under_lower_acc-wine .colour-under_lower_acc,
+.under_upper_acc-wine .colour-under_upper_acc,
+.head_acc-wine .colour-head_acc,
+.face_acc-wine .colour-face_acc,
+.neck_acc-wine .colour-neck_acc,
+.legs_acc-wine .colour-legs_acc,
+.feet_acc-wine .colour-feet_acc,
+.icon-wine {
+	-webkit-filter: hue-rotate(351deg) saturate(28%) brightness(90%);
+	filter: hue-rotate(351deg) saturate(28%) brightness(90%);
+}
+
+/* wet clothes */
+.upper-wetblue .colour-upper,
+.lower-wetblue .colour-lower,
+.under_lower-wetblue .colour-under_lower,
+.under_upper-wetblue .colour-under_upper {
+	-webkit-filter: hue-rotate(-120deg) saturate(0.5) brightness(90%) contrast(100%) opacity(0.5);
+	filter: hue-rotate(-120deg) saturate(0.5) brightness(90%) contrast(100%) opacity(0.5);
+}
+
+.upper-wetlight-blue .colour-upper,
+.lower-wetlight-blue .colour-lower,
+.under_lower-wetlight-blue .colour-under_lower,
+.under_upper-wetlight-blue .colour-under_upper,
+.head-wetlight-blue .colour-head,
+.face-wetlight-blue .colour-face,
+.neck-wetlight-blue .colour-neck,
+.hands-wetlight-blue .colour-hands,
+.legs-wetlight-blue .colour-legs,
+.feet-wetlight-blue .colour-feet,
+.upper_acc-wetlight-blue .colour-upper_acc,
+.lower_acc-wetlight-blue .colour-lower_acc,
+.under_lower_acc-wetlight-blue .colour-under_lower_acc,
+.under_upper_acc-wetlight-blue .colour-under_upper_acc,
+.head_acc-wetlight-blue .colour-head_acc,
+.face_acc-wetlight-blue .colour-face_acc,
+.neck_acc-wetlight-blue .colour-neck_acc,
+.hands_acc-wetlight-blue .colour-hands_acc,
+.legs_acc-wetlight-blue .colour-legs_acc,
+.feet_acc-wetlight-blue .colour-feet_acc,
+.icon-wetlight-blue {
+	-webkit-filter: hue-rotate(210deg) saturate(20%) brightness(260%) contrast(100%) opacity(0.5);
+	filter: hue-rotate(210deg) saturate(20%) brightness(260%) contrast(100%) opacity(0.5);
+}
+
+.upper-wetwhite .colour-upper,
+.lower-wetwhite .colour-lower,
+.under_lower-wetwhite .colour-under_lower,
+.under_upper-wetwhite .colour-under_upper,
+.upper-wetpale-white .colour-upper,
+.lower-wetpale-white .colour-lower,
+.under_lower-wetpale-white .colour-under_lower,
+.under_upper-wetpale-white .colour-under_upper {
+	-webkit-filter: hue-rotate(0deg) saturate(0%) brightness(430%) contrast(140%) opacity(0.5);
+	filter: hue-rotate(0deg) saturate(0%) brightness(430%) contrast(140%) opacity(0.5);
+}
+
+.upper-wetred .colour-upper,
+.lower-wetred .colour-lower,
+.under_lower-wetred .colour-under_lower,
+.under_upper-wetred .colour-under_upper {
+	-webkit-filter: hue-rotate(0deg) saturate(0.5) brightness(90%) contrast(100%) opacity(0.5);
+	filter: hue-rotate(0deg) saturate(0.5) brightness(90%) contrast(100%) opacity(0.5);
+}
+
+.upper-wetgreen .colour-upper,
+.lower-wetgreen .colour-lower,
+.under_lower-wetgreen .colour-under_lower,
+.under_upper-wetgreen .colour-under_upper {
+	-webkit-filter: hue-rotate(120deg) saturate(0.5) brightness(140%) contrast(100%) opacity(0.5);
+	filter: hue-rotate(120deg) saturate(0.5) brightness(140%) contrast(100%) opacity(0.5);
+}
+
+.upper-wetlight-green .colour-upper,
+.lower-wetlight-green .colour-lower,
+.under_lower-wetlight-green .colour-under_lower,
+.under_upper-wetlight-green .colour-under_upper,
+.head-wetlight-green .colour-head,
+.face-wetlight-green .colour-face,
+.neck-wetlight-green .colour-neck,
+.hands-wetlight-green .colour-hands,
+.legs-wetlight-green .colour-legs,
+.feet-wetlight-green .colour-feet,
+.upper_acc-wetlight-green .colour-upper_acc,
+.lower_acc-wetlight-green .colour-lower_acc,
+.under_lower_acc-wetlight-green .colour-under_lower_acc,
+.under_upper_acc-wetlight-green .colour-under_upper_acc,
+.head_acc-wetlight-green .colour-head_acc,
+.face_acc-wetlight-green .colour-face_acc,
+.neck_acc-wetlight-green .colour-neck_acc,
+.hands_acc-wetlight-green .colour-hands_acc,
+.legs_acc-wetlight-green .colour-legs_acc,
+.feet_acc-wetlight-green .colour-feet_acc,
+.icon-wetlight-green {
+	-webkit-filter: hue-rotate(90deg) saturate(20%) brightness(260%) contrast(100%) opacity(0.5);
+	filter: hue-rotate(90deg) saturate(20%) brightness(260%) contrast(100%) opacity(0.5);
+}
+
+.upper-wetblack .colour-upper,
+.lower-wetblack .colour-lower,
+.under_lower-wetblack .colour-under_lower,
+.under_upper-wetblack .colour-under_upper {
+	-webkit-filter: hue-rotate(0deg) saturate(0%) brightness(90%) contrast(110%) opacity(0.5);
+	filter: hue-rotate(0deg) saturate(0%) brightness(90%) contrast(110%) opacity(0.5);
+}
+
+.upper-wetpink .colour-upper,
+.lower-wetpink .colour-lower,
+.under_lower-wetpink .colour-under_lower,
+.under_upper-wetpink .colour-under_upper {
+	-webkit-filter: hue-rotate(-30deg) saturate(25%) contrast(100%) brightness(150%) opacity(0.5);
+	filter: hue-rotate(-30deg) saturate(25%) contrast(100%) brightness(150%) opacity(0.5);
+}
+
+.upper-wetlight-pink .colour-upper,
+.lower-wetlight-pink .colour-lower,
+.under_lower-wetlight-pink .colour-under_lower,
+.under_upper-wetlight-pink .colour-under_upper,
+.head-wetlight-pink .colour-head,
+.face-wetlight-pink .colour-face,
+.neck-wetlight-pink .colour-neck,
+.hands-wetlight-pink .colour-hands,
+.legs-wetlight-pink .colour-legs,
+.feet-wetlight-pink .colour-feet,
+.upper_acc-wetlight-pink .colour-upper_acc,
+.lower_acc-wetlight-pink .colour-lower_acc,
+.under_lower_acc-wetlight-pink .colour-under_lower_acc,
+.under_upper_acc-wetlight-pink .colour-under_upper_acc,
+.head_acc-wetlight-pink .colour-head_acc,
+.face_acc-wetlight-pink .colour-face_acc,
+.neck_acc-wetlight-pink .colour-neck_acc,
+.hands_acc-wetlight-pink .colour-hands_acc,
+.legs_acc-wetlight-pink .colour-legs_acc,
+.feet_acc-wetlight-pink .colour-feet_acc,
+.icon-wetlight-pink {
+	-webkit-filter: hue-rotate(-40deg) saturate(20%) brightness(260%) contrast(100%) opacity(0.5);
+	filter: hue-rotate(-40deg) saturate(20%) brightness(260%) contrast(100%) opacity(0.5);
+}
+
+.upper-wetpurple .colour-upper,
+.lower-wetpurple .colour-lower,
+.under_lower-wetpurple .colour-under_lower,
+.under_upper-wetpurple .colour-under_upper {
+	-webkit-filter: hue-rotate(-90deg) saturate(0.5) brightness(90%) contrast(100%) opacity(0.5);
+	filter: hue-rotate(-90deg) saturate(0.5) brightness(90%) contrast(100%) opacity(0.5);
+}
+
+.upper-wettangerine .colour-upper,
+.lower-wettangerine .colour-lower,
+.under_lower-wettangerine .colour-under_lower,
+.under_upper-wettangerine .colour-under_upper,
+.upper-wetpale-tangerine .colour-upper,
+.lower-wetpale-tangerine .colour-lower,
+.under_lower-wetpale-tangerine .colour-under_lower,
+.under_upper-wetpale-tangerine .colour-under_upper {
+	-webkit-filter: hue-rotate(60deg) saturate(0.75) brightness(190%) contrast(100%) opacity(0.5);
+	filter: hue-rotate(60deg) saturate(0.75) brightness(190%) contrast(100%) opacity(0.5);
+}
+
+.upper-wetteal .colour-upper,
+.lower-wetteal .colour-lower,
+.under_lower-wetteal .colour-under_lower,
+.under_upper-wetteal .colour-under_upper {
+	-webkit-filter: hue-rotate(-180deg) saturate(50%) brightness(150%) contrast(100%) opacity(0.5);
+	filter: hue-rotate(-180deg) saturate(50%) brightness(150%) contrast(100%) opacity(0.5);
+}
+
+.upper-wetyellow .colour-upper,
+.lower-wetyellow .colour-lower,
+.under_lower-wetyellow .colour-under_lower,
+.under_upper-wetyellow .colour-under_upper,
+.upper-wetpale-yellow .colour-upper,
+.lower-wetpale-yellow .colour-lower,
+.under_lower-wetpale-yellow .colour-under_lower,
+.under_upper-wetpale-yellow .colour-under_upper {
+	-webkit-filter: hue-rotate(65deg) saturate(0.5) brightness(280%) contrast(300%) sepia(0.55) opacity(0.5);
+	filter: hue-rotate(65deg) saturate(0.5) brightness(280%) contrast(300%) sepia(0.55) opacity(0.5);
+}
+
+.upper-wetbrown .colour-upper,
+.lower-wetbrown .colour-lower,
+.under_lower-wetbrown .colour-under_lower,
+.under_upper-wetbrown .colour-under_upper {
+	-webkit-filter: hue-rotate(60deg) saturate(150%) brightness(200%) contrast(100%) opacity(0.5);
+	filter: hue-rotate(60deg) saturate(150%) brightness(200%) contrast(100%) opacity(0.5);
+}
+
+.upper-wet .colour-upper,
+.lower-wet .colour-lower,
+.under_lower-wet .colour-under_lower,
+.under_upper-wet .colour-under_upper {
+	-webkit-filter: opacity(0.5);
+	filter: opacity(0.5);
+}
+
+.upper-wettan .colour-upper,
+.lower-wettan .colour-lower,
+.under_lower-wettan .colour-under_lower,
+.under_upper-wettan .colour-under_upper,
+.head-wettan .colour-head,
+.face-wettan .colour-face,
+.neck-wettan .colour-neck,
+.legs-wettan .colour-legs,
+.feet-wettan .colour-feet,
+.upper_acc-wettan .colour-upper_acc,
+.lower_acc-wettan .colour-lower_acc,
+.under_lower_acc-wettan .colour-under_lower_acc,
+.under_upper_acc-wettan .colour-under_upper_acc,
+.head_acc-wettan .colour-head_acc,
+.face_acc-wettan .colour-face_acc,
+.neck_acc-wettan .colour-neck_acc,
+.legs_acc-wettan .colour-legs_acc,
+.feet_acc-wettan .colour-feet_acc,
+.icon-wettan {
+	-webkit-filter: hue-rotate(60.3deg) saturate(17.5%) brightness(270%) opacity(0.5);
+	filter: hue-rotate(60.3deg) saturate(17.5%) brightness(270%) opacity(0.5);
+}
+
+.upper-wetgrey .colour-upper,
+.lower-wetgrey .colour-lower,
+.under_lower-wetgrey .colour-under_lower,
+.under_upper-wetgrey .colour-under_upper,
+.head-wetgrey .colour-head,
+.face-wetgrey .colour-face,
+.neck-wetgrey .colour-neck,
+.legs-wetgrey .colour-legs,
+.feet-wetgrey .colour-feet,
+.upper_acc-wetgrey .colour-upper_acc,
+.lower_acc-wetgrey .colour-lower_acc,
+.under_lower_acc-wetgrey .colour-under_lower_acc,
+.under_upper_acc-wetgrey .colour-under_upper_acc,
+.head_acc-wetgrey .colour-head_acc,
+.face_acc-wetgrey .colour-face_acc,
+.neck_acc-wetgrey .colour-neck_acc,
+.legs_acc-wetgrey .colour-legs_acc,
+.feet_acc-wetgrey .colour-feet_acc,
+.icon-wetgrey {
+	-webkit-filter: hue-rotate(58.8deg) saturate(5%) brightness(270%) opacity(0.5);
+	filter: hue-rotate(58.8deg) saturate(5%) brightness(270%) opacity(0.5);
+}
+
+.upper-wetsand .colour-upper,
+.lower-wetsand .colour-lower,
+.under_lower-wetsand .colour-under_lower,
+.under_upper-wetsand .colour-under_upper,
+.head-wetsand .colour-head,
+.face-wetsand .colour-face,
+.neck-wetsand .colour-neck,
+.legs-wetsand .colour-legs,
+.feet-wetsand .colour-feet,
+.upper_acc-wetsand .colour-upper_acc,
+.lower_acc-wetsand .colour-lower_acc,
+.under_lower_acc-wetsand .colour-under_lower_acc,
+.under_upper_acc-wetsand .colour-under_upper_acc,
+.head_acc-wetsand .colour-head_acc,
+.face_acc-wetsand .colour-face_acc,
+.neck_acc-wetsand .colour-neck_acc,
+.legs_acc-wetsand .colour-legs_acc,
+.feet_acc-wetsand .colour-feet_acc,
+.icon-wetsand {
+	-webkit-filter: hue-rotate(61deg) saturate(20%) brightness(370%) opacity(0.5);
+	filter: hue-rotate(61deg) saturate(20%) brightness(370%) opacity(0.5);
+}
+
+.upper-wetoff-white .colour-upper,
+.lower-wetoff-white .colour-lower,
+.under_lower-wetoff-white .colour-under_lower,
+.under_upper-wetoff-white .colour-under_upper,
+.head-wetoff-white .colour-head,
+.face-wetoff-white .colour-face,
+.neck-wetoff-white .colour-neck,
+.legs-wetoff-white .colour-legs,
+.feet-wetoff-white .colour-feet,
+.upper_acc-wetoff-white .colour-upper_acc,
+.lower_acc-wetoff-white .colour-lower_acc,
+.under_lower_acc-wetoff-white .colour-under_lower_acc,
+.under_upper_acc-wetoff-white .colour-under_upper_acc,
+.head_acc-wetoff-white .colour-head_acc,
+.face_acc-wetoff-white .colour-face_acc,
+.neck_acc-wetoff-white .colour-neck_acc,
+.legs_acc-wetoff-white .colour-legs_acc,
+.feet_acc-wetoff-white .colour-feet_acc,
+.icon-wetoff-white {
+	-webkit-filter: hue-rotate(70deg) saturate(1.3%) brightness(360%) opacity(0.5);
+	filter: hue-rotate(70deg) saturate(1.3%) brightness(360%) opacity(0.5);
+}
+
+.upper-wetnavy .colour-upper,
+.lower-wetnavy .colour-lower,
+.under_lower-wetnavy .colour-under_lower,
+.under_upper-wetnavy .colour-under_upper,
+.head-wetnavy .colour-head,
+.face-wetnavy .colour-face,
+.neck-wetnavy .colour-neck,
+.legs-wetnavy .colour-legs,
+.feet-wetnavy .colour-feet,
+.upper_acc-wetnavy .colour-upper_acc,
+.lower_acc-wetnavy .colour-lower_acc,
+.under_lower_acc-wetnavy .colour-under_lower_acc,
+.under_upper_acc-wetnavy .colour-under_upper_acc,
+.head_acc-wetnavy .colour-head_acc,
+.face_acc-wetnavy .colour-face_acc,
+.neck_acc-wetnavy .colour-neck_acc,
+.legs_acc-wetnavy .colour-legs_acc,
+.feet_acc-wetnavy .colour-feet_acc,
+.icon-wetnavy {
+	-webkit-filter: hue-rotate(250deg) saturate(7%) brightness(77%) opacity(0.5);
+	filter: hue-rotate(250deg) saturate(7%) brightness(77%) opacity(0.5);
+}
+
+.upper-wetolive .colour-upper,
+.lower-wetolive .colour-lower,
+.under_lower-wetolive .colour-under_lower,
+.under_upper-wetolive .colour-under_upper,
+.head-wetolive .colour-head,
+.face-wetolive .colour-face,
+.neck-wetolive .colour-neck,
+.legs-wetolive .colour-legs,
+.feet-wetolive .colour-feet,
+.upper_acc-wetolive .colour-upper_acc,
+.lower_acc-wetolive .colour-lower_acc,
+.under_lower_acc-wetolive .colour-under_lower_acc,
+.under_upper_acc-wetolive .colour-under_upper_acc,
+.head_acc-wetolive .colour-head_acc,
+.face_acc-wetolive .colour-face_acc,
+.neck_acc-wetolive .colour-neck_acc,
+.legs_acc-wetolive .colour-legs_acc,
+.feet_acc-wetolive .colour-feet_acc,
+.icon-wetolive {
+	-webkit-filter: hue-rotate(67deg) saturate(24.5%) brightness(137%) opacity(0.5);
+	filter: hue-rotate(67deg) saturate(24.5%) brightness(137%) opacity(0.5);
+}
+
+.upper-wetwine .colour-upper,
+.lower-wetwine .colour-lower,
+.under_lower-wetwine .colour-under_lower,
+.under_upper-wetwine .colour-under_upper,
+.head-wetwine .colour-head,
+.face-wetwine .colour-face,
+.neck-wetwine .colour-neck,
+.legs-wetwine .colour-legs,
+.feet-wetwine .colour-feet,
+.upper_acc-wetwine .colour-upper_acc,
+.lower_acc-wetwine .colour-lower_acc,
+.under_lower_acc-wetwine .colour-under_lower_acc,
+.under_upper_acc-wetwine .colour-under_upper_acc,
+.head_acc-wetwine .colour-head_acc,
+.face_acc-wetwine .colour-face_acc,
+.neck_acc-wetwine .colour-neck_acc,
+.legs_acc-wetwine .colour-legs_acc,
+.feet_acc-wetwine .colour-feet_acc,
+.icon-wetwine {
+	-webkit-filter: hue-rotate(351deg) saturate(28%) brightness(90%) opacity(0.5);
+	filter: hue-rotate(351deg) saturate(28%) brightness(90%) opacity(0.5);
+}
+
+/* Makeup colours */
+.lipstick-red {
+	-webkit-filter: hue-rotate(0deg);
+	filter: hue-rotate(0deg);
+}
+
+.lipstick-blue {
+	-webkit-filter: hue-rotate(240deg);
+	filter: hue-rotate(240deg);
+}
+
+.lipstick-green {
+	-webkit-filter: hue-rotate(140deg);
+	filter: hue-rotate(140deg);
+}
+
+.lipstick-purple {
+	-webkit-filter: hue-rotate(270deg);
+	filter: hue-rotate(270deg);
+}
+
+.lipstick-orange {
+	-webkit-filter: hue-rotate(60deg) brightness(2.5);
+	filter: hue-rotate(60deg) brightness(2.5);
+}
+
+.lipstick-lime {
+	-webkit-filter: hue-rotate(75deg) saturate(1.5) brightness(2.5);
+	filter: hue-rotate(75deg) saturate(1.5) brightness(2.5);
+}
+
+.lipstick-pink {
+	-webkit-filter: hue-rotate(270deg) brightness(2.5);
+	filter: hue-rotate(270deg) brightness(2.5);
+}
+
+.lipstick-light-pink {
+	-webkit-filter: hue-rotate(270deg) brightness(7.5);
+	filter: hue-rotate(270deg) brightness(7.5);
+}
+
+.lipstick-dark-red {
+	-webkit-filter: hue-rotate(0deg) brightness(0.8);
+	filter: hue-rotate(0deg) brightness(0.8);
+}
+
+.lipstick-black {
+	-webkit-filter: hue-rotate(0deg) brightness(0) contrast(0.8);
+	filter: hue-rotate(0deg) brightness(0) contrast(0.8);
+}
+
+.eyeshadow-red {
+	-webkit-filter: hue-rotate(0deg) brightness(2) contrast(0.6);
+	filter: hue-rotate(0deg) brightness(2) contrast(0.6);
+}
+
+.eyeshadow-pink {
+	-webkit-filter: hue-rotate(-40deg) brightness(3) contrast(0.5);
+	filter: hue-rotate(-40deg) brightness(3) contrast(0.5);
+}
+
+.eyeshadow-light-pink {
+	-webkit-filter: hue-rotate(280deg) brightness(15);
+	filter: hue-rotate(280deg) brightness(15);
+}
+
+.eyeshadow-green {
+	-webkit-filter: hue-rotate(90deg) brightness(2) contrast(0.5);
+	filter: hue-rotate(90deg) brightness(2) contrast(0.5);
+}
+
+.eyeshadow-light-green {
+	-webkit-filter: hue-rotate(150deg) brightness(4) saturate(0.8) contrast(0.5);
+	filter: hue-rotate(150deg) brightness(4) saturate(0.8) contrast(0.5);
+}
+
+.eyeshadow-blue {
+	-webkit-filter: hue-rotate(245deg) brightness(2) contrast(0.7);
+	filter: hue-rotate(245deg) brightness(2) contrast(0.7);
+}
+
+.eyeshadow-light-blue {
+	-webkit-filter: hue-rotate(245deg) brightness(4) saturate(0.8) contrast(0.5);
+	filter: hue-rotate(245deg) brightness(4) saturate(0.8) contrast(0.5);
+}
+
+.eyeshadow-purple {
+	-webkit-filter: hue-rotate(262deg) brightness(2) contrast(0.6);
+	filter: hue-rotate(262deg) brightness(2) contrast(0.6);
+}
+
+.eyeshadow-orange {
+	-webkit-filter: hue-rotate(45deg) brightness(2.2) saturate(0.8);
+	filter: hue-rotate(45deg) brightness(2.2) saturate(0.8);
+}
+
+.eyeshadow-yellow {
+	-webkit-filter: hue-rotate(69deg) brightness(4) saturate(1) contrast(0.7);
+	filter: hue-rotate(69deg) brightness(4) saturate(1) contrast(0.7);
+}
+
+.eyeshadow-brown {
+	-webkit-filter: hue-rotate(45deg) brightness(1) saturate(1) contrast(0.6);
+	filter: hue-rotate(45deg) brightness(1) saturate(1) contrast(0.6);
+}
+
+.eyeshadow-light-brown,
+.eyeshadow-lightbrown {
+	-webkit-filter: hue-rotate(40deg) brightness(4) saturate(0.7) contrast(0.5);
+	filter: hue-rotate(40deg) brightness(4) saturate(0.7) contrast(0.5);
+}
+
+.eyeshadow-dark-brown {
+	-webkit-filter: hue-rotate(40deg) brightness(0.5) saturate(0.8) contrast(0.6);
+	filter: hue-rotate(40deg) brightness(0.5) saturate(0.8) contrast(0.6);
+}
+
+.eyeshadow-black,
+.mascara-black,
+.mascara-black-waterproof {
+	-webkit-filter: hue-rotate(0deg) brightness(0.1) saturate(0) contrast(0.7);
+	filter: hue-rotate(0deg) brightness(0.1) saturate(0) contrast(0.7);
+}
+
+.eyeshadow-white,
+.mascara-white {
+	-webkit-filter: hue-rotate(250deg) brightness(8) saturate(0) contrast(1);
+	filter: hue-rotate(250deg) brightness(8) saturate(0) contrast(1);
+}
+
+.eyeshadow-silver {
+	-webkit-filter: hue-rotate(0deg) saturate(0) brightness(2.4);
+	filter: hue-rotate(0deg) saturate(0) brightness(2.4);
+}
+
+/* Condom colours */
+.condom-red {
+	-webkit-filter: hue-rotate(0deg);
+	filter: hue-rotate(0deg);
+	opacity: 0.4;
+}
+
+.condom-blue {
+	-webkit-filter: hue-rotate(240deg);
+	filter: hue-rotate(240deg);
+	opacity: 0.4;
+}
+
+.condom-lblue {
+	-webkit-filter: hue-rotate(210deg);
+	filter: hue-rotate(210deg);
+	opacity: 0.4;
+}
+
+.condom-green {
+	-webkit-filter: hue-rotate(140deg);
+	filter: hue-rotate(140deg);
+	opacity: 0.4;
+}
+
+.condom-lime {
+	-webkit-filter: hue-rotate(75deg) saturate(1.5) brightness(2.5);
+	filter: hue-rotate(75deg) saturate(1.5) brightness(2.5);
+	opacity: 0.4;
+}
+
+.condom-purple {
+	-webkit-filter: hue-rotate(270deg);
+	filter: hue-rotate(270deg);
+	opacity: 0.4;
+}
+
+.condom-orange {
+	-webkit-filter: hue-rotate(60deg) brightness(2.5);
+	filter: hue-rotate(60deg) brightness(2.5);
+	opacity: 0.4;
+}
+
+.condom-pink {
+	-webkit-filter: hue-rotate(270deg) brightness(2.5);
+	filter: hue-rotate(270deg) brightness(2.5);
+	opacity: 0.4;
+}
+
+.condom-plain {
+	-webkit-filter: hue-rotate(50deg) brightness(2.5);
+	filter: hue-rotate(60deg) brightness(2.5);
+	opacity: 0.4;
+}
+
+.tentacles-blue {
+	-webkit-filter: hue-rotate(-120deg) saturate(100%) brightness(100%) contrast(100%);
+	filter: hue-rotate(-120deg) saturate(100%) brightness(100%) contrast(100%);
+}
+
+.tentacles-vines {
+	-webkit-filter: hue-rotate(160deg) saturate(80%) brightness(160%) contrast(100%);
+	filter: hue-rotate(160deg) saturate(80%) brightness(160%) contrast(100%);
+}
+
+.tentacles-roots {
+	-webkit-filter: hue-rotate(50deg) saturate(70%) brightness(140%) contrast(100%);
+	filter: hue-rotate(50deg) saturate(70%) brightness(140%) contrast(100%);
+}
+
+.tentacles-red {
+	-webkit-filter: hue-rotate(0deg) saturate(100%) brightness(100%) contrast(100%);
+	filter: hue-rotate(0deg) saturate(100%) brightness(100%) contrast(100%);
+}
+
+.tentacles-purple {
+	-webkit-filter: hue-rotate(300deg) saturate(100%) brightness(100%) contrast(100%);
+	filter: hue-rotate(300deg) saturate(100%) brightness(100%) contrast(100%);
+}
+
+.tentacles-peach {
+	-webkit-filter: hue-rotate(20deg) saturate(50%) brightness(250%) contrast(80%);
+	filter: hue-rotate(20deg) saturate(50%) brightness(250%) contrast(80%);
+}
+
+.tentacles-wraith {
+	-webkit-filter: hue-rotate(0deg) saturate(0%) brightness(500%) contrast(100%);
+	filter: hue-rotate(0deg) saturate(0%) brightness(500%) contrast(100%);
+	opacity: 0.5;
+}
+
+.tentacles-wraith-penetrated {
+	-webkit-filter: hue-rotate(0deg) saturate(0%) brightness(250%) contrast(60%);
+	filter: hue-rotate(0deg) saturate(0%) brightness(250%) contrast(60%);
+	opacity: 0.8;
+}
+
+.strapon-purple {
+	-webkit-filter: saturate(0%) sepia(1) brightness(250%) contrast(140%) hue-rotate(230deg);
+	filter: saturate(0%) sepia(1) brightness(250%) contrast(140%) hue-rotate(230deg);
+}
+
+.strapon-red {
+	-webkit-filter: hue-rotate(0deg) saturate(120%) brightness(70%) contrast(140%);
+	filter: hue-rotate(0deg) saturate(120%) brightness(70%) contrast(140%);
+}
+
+.strapon-blue {
+	-webkit-filter: saturate(30%) sepia(1) hue-rotate(190deg) brightness(200%) contrast(140%);
+	filter: saturate(30%) sepia(1) hue-rotate(190deg) brightness(200%) contrast(140%);
+}
+
+.strapon-black {
+	-webkit-filter: hue-rotate(0deg) saturate(5%) brightness(120%) contrast(120%);
+	filter: hue-rotate(0deg) saturate(5%) brightness(120%) contrast(120%);
+}
+
+.strapon-pink {
+	-webkit-filter: hue-rotate(330deg) saturate(110%) brightness(120%) contrast(100%);
+	filter: hue-rotate(330deg) saturate(110%) brightness(120%) contrast(100%);
+}
+
+.strapon-fleshy {
+	-webkit-filter: hue-rotate(30deg) saturate(20%) brightness(410%) contrast(100%);
+	filter: hue-rotate(30deg) saturate(20%) brightness(410%) contrast(100%);
+}
+
+.strapon-green {
+	-webkit-filter: saturate(40%) sepia(1) hue-rotate(50deg) brightness(200%) contrast(125%);
+	filter: saturate(40%) sepia(1) hue-rotate(50deg) brightness(200%) contrast(125%);
+}
+
+.strapon-brown {
+	-webkit-filter: hue-rotate(0deg) saturate(10%) brightness(100%) contrast(120%);
+	filter: hue-rotate(0deg) saturate(10%) brightness(100%) contrast(120%);
+}
diff --git a/modules/css/combat-layers.css b/modules/css/combat-layers.css
new file mode 100644
index 0000000000..7dddf11650
--- /dev/null
+++ b/modules/css/combat-layers.css
@@ -0,0 +1,621 @@
+/* Body Layers */
+.layer-over_head-back {
+	z-index: 0;
+}
+
+.layer-head-back {
+	z-index: 1;
+}
+
+.layer-basehead {
+	z-index: 5;
+}
+
+.layer-backhair {
+	z-index: 10;
+}
+
+.layer-back-lower {
+	z-index: 15;
+}
+
+.layer-base {
+	z-index: 20;
+}
+
+.layer-facebase {
+	z-index: 21;
+}
+
+.layer-tanBody {
+	z-index: 22;
+}
+
+.layer-hirsute {
+	z-index: 25;
+}
+
+.layer-eyes {
+	z-index: 30;
+}
+
+.layer-sclera {
+	z-index: 31;
+}
+
+.layer-iris {
+	z-index: 32;
+}
+
+.layer-irisacc {
+	z-index: 33;
+}
+
+.layer-bellyBase {
+	z-index: 33;
+}
+
+.layer-eyelids {
+	z-index: 34;
+}
+
+.layer-lashes {
+	z-index: 35;
+}
+
+.layer-mouth {
+	z-index: 40;
+}
+
+.layer-breasts {
+	z-index: 35;
+}
+
+.layer-tanbreasts {
+	z-index: 30;
+}
+
+.layer-blush {
+	z-index: 50;
+}
+
+.layer-freckles {
+	z-index: 51;
+}
+
+.layer-skin {
+	z-index: 52;
+}
+
+.layer-tears {
+	z-index: 55;
+}
+
+.layer-backbrow {
+	z-index: 58;
+}
+
+.layer-hair {
+	z-index: 60;
+}
+
+.layer-brow {
+	z-index: 62;
+}
+
+.layer-penis-chastity {
+	z-index: 64;
+}
+
+.layer-legs {
+	z-index: 64;
+}
+
+.layer-pbhair {
+	z-index: 64;
+}
+
+.layer-genitals {
+	z-index: 65;
+}
+
+.layer-penis {
+	z-index: 160;
+}
+
+.layer-pbhairballs {
+	z-index: 161;
+}
+
+.layer-underParasite {
+	z-index: 66;
+}
+
+.layer-under_lower {
+	z-index: 67;
+}
+
+.layer-under_lower-top {
+	z-index: 68;
+}
+
+.layer-under_upper {
+	z-index: 70;
+}
+
+.layer-under_upper-top {
+	z-index: 72;
+}
+
+.layer-under_lower-high {
+	z-index: 75;
+}
+
+.layer-under_lower_top-high {
+	z-index: 77;
+}
+
+.layer-under {
+	z-index: 75;
+}
+
+.layer-feet {
+	z-index: 85;
+}
+
+.layer-lower {
+	z-index: 90;
+}
+
+.layer-lower_top {
+	z-index: 92;
+}
+
+.layer-upper {
+	z-index: 95;
+}
+
+.layer-upper.tucked {
+	z-index: 89;
+}
+
+.layer-upper_top {
+	z-index: 97;
+}
+
+.layer-collar {
+	z-index: 103;
+}
+
+.layer-neck {
+	z-index: 103;
+}
+
+.layer-rightarm {
+	z-index: 105;
+}
+
+.layer-leftarm {
+	z-index: 105;
+}
+
+.layer-armSkin {
+	z-index: 106;
+}
+
+.layer-armTan {
+	z-index: 107;
+}
+
+.layer-leftarmunderclothes {
+	z-index: 109;
+}
+
+.layer-rightarmunderclothes {
+	z-index: 109;
+}
+
+.layer-hands {
+	z-index: 110;
+}
+
+.layer-rightarmclothes {
+	z-index: 112;
+}
+
+.layer-leftarmclothes {
+	z-index: 112;
+}
+
+.layer-lower-high {
+	z-index: 115;
+}
+
+.layer-lower-top-high {
+	z-index: 117;
+}
+
+.layer-hairforwards {
+	z-index: 132;
+}
+
+.layer-fronthair {
+	z-index: 133;
+}
+
+.layer-horns {
+	z-index: 140;
+}
+
+.layer-face {
+	z-index: 145;
+}
+
+.layer-head {
+	z-index: 150;
+}
+
+.layer-over_head {
+	z-index: 152;
+}
+
+.layer-parasite {
+	z-index: 160;
+}
+
+.layer-halo-front {
+	z-index: 160;
+}
+
+.layer-horns-chimera {
+	z-index: 161;
+}
+
+.layer-tailPenisCover {
+	z-index: 165;
+}
+
+.layer-over_lower {
+	z-index: 170;
+}
+
+.layer-over_upper {
+	z-index: 171;
+}
+
+.layer-leftarmoverclothes {
+	z-index: 174;
+}
+
+.layer-rightarmoverclothes {
+	z-index: 174;
+}
+
+#divsex {
+	position: relative;
+	display: inline-block;
+	user-select: none;
+	height: 256px;
+	width: 100%;
+}
+
+#divsex > *,
+#divandroidsex > * {
+	user-select: none;
+	position: absolute;
+	left: 256px;
+	top: 0;
+}
+
+#divandroidsex {
+	position: relative;
+	display: inline-block;
+	height: 256px;
+	width: 100%;
+	left: -256px;
+}
+
+#closepenis,
+#divsex #closepenis {
+	position: absolute;
+	left: 321px;
+	top: -30px;
+	z-index: 250;
+}
+
+#closeanus,
+#divsex #closeanus {
+	position: absolute;
+	left: 451px;
+	top: -30px;
+	z-index: 250;
+}
+
+#closevagina,
+#divsex #closevagina {
+	position: absolute;
+	left: 386px;
+	top: -30px;
+	z-index: 250;
+}
+
+#closechest,
+#divsex #closechest {
+	position: absolute;
+	left: 255px;
+	top: -30px;
+	z-index: 250;
+}
+
+#closechestbreasts,
+#divsex #closechestbreasts {
+	z-index: 270;
+}
+
+#closechestnip,
+#divsex #closechestnip {
+	z-index: 280;
+}
+
+#closechestpenis,
+#divsex #closechestpenis {
+	z-index: 290;
+}
+
+.layer-behind {
+	z-index: -100;
+}
+
+.layer-voreback {
+	z-index: -20;
+}
+
+.layer-sexbaseback {
+	z-index: 1;
+}
+
+.layer-sexBackArm {
+	z-index: 2;
+}
+
+.layer-sexsleeveback {
+	z-index: 3;
+}
+
+.layer-sexpenis {
+	z-index: 5;
+}
+
+.layer-shadowmanbackground {
+	z-index: 5;
+}
+
+.layer-sexlegsback {
+	z-index: 6;
+}
+
+.layer-beastback {
+	z-index: 8;
+}
+
+.layer-sexbase {
+	z-index: 10;
+}
+
+.layer-sexlegsdoggy {
+	z-index: 10;
+}
+
+.layer-sexskinback {
+	z-index: 11;
+}
+
+.layer-sexlegsbackacc {
+	z-index: 13;
+}
+
+.layer-sexbaseoverlay {
+	z-index: 13;
+}
+
+.layer-sexfreckles {
+	z-index: 19;
+}
+
+.layer-sexeyes {
+	z-index: 20;
+}
+
+.layer-sexsclera {
+	z-index: 30;
+}
+
+.layer-sexmouth {
+	z-index: 40;
+}
+
+.layer-sexblush {
+	z-index: 50;
+}
+
+.layer-sexbelly {
+	z-index: 52;
+}
+
+.layer-sexskin {
+	z-index: 55;
+}
+
+.layer-sextears {
+	z-index: 60;
+}
+
+.layer-shadowman {
+	z-index: 60;
+}
+
+.layer-beastfront {
+	z-index: 65;
+}
+
+.layer-shadowmanforeground {
+	z-index: 66;
+}
+
+.layer-sexbrow {
+	z-index: 80;
+}
+
+.layer-sexlashes {
+	z-index: 90;
+}
+
+.layer-sexwings {
+	z-index: 90;
+}
+
+.layer-sexbreastunderupper {
+	z-index: 96;
+}
+
+.layer-sexbreastupper {
+	z-index: 97;
+}
+
+.layer-sextiedoggy {
+	z-index: 99;
+}
+
+/* z-index of bound hands 150, hair 140 */
+.layer-sextiemissionary {
+	z-index: 142;
+}
+
+.layer-sexbasefront {
+	z-index: 100;
+}
+
+.layer-doggyhirsute {
+	z-index: 101;
+}
+
+.layer-sexshoes {
+	z-index: 103;
+}
+
+.layer-sexlegs {
+	z-index: 102;
+}
+
+.layer-sexlegsacc {
+	z-index: 104;
+}
+
+.layer-sexunder {
+	z-index: 105;
+}
+
+.layer-sexbetweenlegs {
+	z-index: 99;
+}
+
+.layer-sexbetweenlegscondom {
+	z-index: 100;
+}
+
+.layer-sexrightleg {
+	z-index: 101;
+}
+
+.layer-sexrightlegskin {
+	z-index: 102;
+}
+
+.layer-sexarmsskin {
+	z-index: 104;
+}
+
+.layer-sexlower {
+	z-index: 106;
+}
+
+.layer-sexupper {
+	z-index: 108;
+}
+
+.layer-sexaboveclothes {
+	z-index: 108;
+}
+
+.layer-sexhands {
+	z-index: 110;
+}
+
+.layer-apparatus {
+	z-index: 130;
+}
+
+.layer-midapparatus {
+	z-index: 131;
+}
+
+.layer-frontapparatus {
+	z-index: 132;
+}
+
+.layer-sexhair {
+	z-index: 140;
+}
+
+.layer-beastaboveplayer {
+	z-index: 145;
+}
+
+.layer-sexarmsbound {
+	z-index: 150;
+}
+
+.layer-sexarmsboundskin {
+	z-index: 151;
+}
+
+.layer-sexmissionaryrightarm {
+	z-index: 153;
+}
+
+.layer-sexrightarmsskin {
+	z-index: 154;
+}
+
+.layer-sexsleeve {
+	z-index: 155;
+}
+
+.layer-beastforeground {
+	z-index: 205;
+}
+
+.layer-beastforeground.front {
+	z-index: 102;
+}
+
+.layer-foreground {
+	z-index: 200;
+}
+
+.layer-frontforeground {
+	z-index: 220;
+}
+
+.layer-frontfrontforeground {
+	z-index: 221;
+}
+
+.freckles {
+	mix-blend-mode: darken;
+	opacity: 0.75;
+}
+
+.shift-right-2 {
+	transform: translateX(2px);
+}
diff --git a/modules/css/debug.css b/modules/css/debug.css
index 409c4750b5..7253747836 100644
--- a/modules/css/debug.css
+++ b/modules/css/debug.css
@@ -79,6 +79,55 @@
 	margin: 0;
 }
 
+.debugOverlay ul li input {
+	width: 85px;
+	margin: 0;
+}
+
+.debugLines-audience {
+	border: dotted red 1px;
+}
+
+.debugLines-combat {
+	border: dotted yellow 1px;
+}
+
+.debugLines-effectsman {
+	border: dotted green 1px;
+}
+
+.debugLines-stateman {
+	border: dotted cyan 1px;
+}
+
+.debugLines-actionsman {
+	border: dotted pink 1px;
+}
+
+.debugLines-beast {
+	border: dotted blue 1px;
+}
+
+.debugLines-tentacles {
+	border: dotted yellow 1px;
+}
+
+.debugLines-actionstentacles {
+	border: dotted pink 1px;
+}
+
+.debugLines-effectstentacleadv {
+	border: dotted green 1px;
+}
+
+.debugLines-swarm {
+	border: dotted green 1px;
+}
+
+.debugLines-swarmactions {
+	border: dotted pink 1px;
+}
+
 .sneaky-warning {
 	padding: 0.5em;
 	border-radius: 0.5em;
@@ -93,3 +142,4 @@
 .sneaky-warning h3 {
 	text-align: center;
 }
+/* Ended at line 5080 in base.css */
diff --git a/modules/css/fontawesome.css b/modules/css/fontawesome.css
new file mode 100644
index 0000000000..b5d9eb37b1
--- /dev/null
+++ b/modules/css/fontawesome.css
@@ -0,0 +1,118 @@
+/* stylelint-disable font-family-no-missing-generic-family-keyword */
+/* FONT AWESOME ICONS:
+Complete list of FA icons available in Sugarcube: http://www.motoslave.net/sugarcube/tmp/tme-fa-icons/
+Built-in icons go from e800 - e84b. Click on 'show codes' to find the corresponding number for the icon you wish to add.
+*/
+.fa {
+	font-family: tme-fa-icons;
+	font-style: normal;
+	font-weight: 400;
+	font-variant: normal;
+	text-transform: none;
+	line-height: 1;
+}
+
+.fa-icon {
+	padding-left: 5px;
+}
+
+.fa-icon::before {
+	font-family: tme-fa-icons;
+	font-style: normal;
+	font-weight: 400;
+	font-variant: normal;
+	text-transform: none;
+	line-height: 1;
+}
+
+.fa-star::before {
+	content: "\e800\00a0"; /* to add a new icon, replace e800 with the corresponding number for the icon you wish to add */
+}
+
+.fa-star-empty::before {
+	content: "\e801\00a0";
+}
+
+.fa-asterisk::before {
+	content: "\e83b\00a0";
+}
+
+.fa-help-circled::before {
+	content: "\e808\00a0";
+}
+
+.fa-info::before {
+	content: "\e809\00a0";
+}
+
+.fa-info-circled::before {
+	content: "\e80a\00a0";
+}
+
+.fa-triangular-bullet::before {
+	content: "\e81a\00a0";
+}
+
+.fa-right::before {
+	content: "\e81e\00a0";
+}
+
+.fa-left::before {
+	content: "\e81d\00a0";
+}
+
+.fa-down::before {
+	content: "\e81c\00a0";
+}
+
+.fa-up::before {
+	content: "\e81f\00a0";
+}
+
+.fa-delete::before {
+	content: "\e828\00a0";
+}
+
+.fa-save::before {
+	content: "\e82b\00a0";
+}
+
+.fa-export::before {
+	content: "\e82a\00a0";
+}
+
+.fa-import::before {
+	content: "\e829\00a0";
+}
+
+.fa-overwrite::before {
+	content: "\e826\00a0";
+}
+
+.fa-check::before {
+	content: "\e803\00a0";
+}
+
+.fa-selected::before {
+	content: "\e832\00a0";
+}
+
+.fa-unselected::before {
+	content: "\e833\00a0";
+}
+
+.fa-reset::before {
+	content: "\e826\00a0";
+}
+
+.fa-right-arrow::before {
+	content: "\e822\00a0";
+}
+
+.fa-left-arrow::before {
+	content: "\e821\00a0";
+}
+
+.fa-plus::before {
+	content: "\e805\00a0";
+}
diff --git a/modules/css/settings.css b/modules/css/settings.css
new file mode 100644
index 0000000000..256ad1a8f4
--- /dev/null
+++ b/modules/css/settings.css
@@ -0,0 +1,53 @@
+.clothes-price-container .numberslider-group {
+	display: flex;
+	flex-direction: column;
+	border: 1px solid var(--750);
+	border-left: none;
+	border-right: none;
+	margin-top: 4px;
+	padding: 0.5em 0;
+}
+
+.clothes-price-container .numberslider-inline {
+	display: flex;
+	flex-direction: column;
+	min-width: 50%;
+	margin-bottom: 0.5em;
+}
+
+.clothes-price-container .numberslider-inline > span {
+	font-size: 0.9em;
+}
+
+.clothes-price-container .numberslider-inline > .macro-numberslider {
+	display: flex;
+}
+
+.settings-container {
+	margin-top: 10px;
+}
+
+.settings-container .numberslider-group {
+	display: flex;
+	flex-direction: column;
+	border: 1px solid var(--750);
+	border-left: none;
+	border-right: none;
+	margin-top: 4px;
+	padding: 5px;
+}
+
+.settings-container .numberslider-inline {
+	display: flex;
+	flex-direction: column;
+	min-width: 50%;
+	margin-bottom: 0.5em;
+}
+
+.settings-intro {
+	padding: 10px;
+}
+
+.settings-intro ul {
+	margin: 0;
+}
diff --git a/modules/css/skybox.css b/modules/css/skybox.css
new file mode 100644
index 0000000000..6b9e3f5344
--- /dev/null
+++ b/modules/css/skybox.css
@@ -0,0 +1,106 @@
+/* Possibly can be deleted? */
+#daystate,
+#weather,
+#location {
+	position: fixed;
+	left: 0;
+	z-index: 10;
+	user-select: none;
+}
+
+#daystate {
+	top: 0;
+}
+
+#weather {
+	top: 64px;
+}
+
+#location {
+	top: 128px;
+}
+
+.skybox,
+.skybox_dawn,
+.skybox_dawn_haze,
+.skybox_day,
+.skybox_day_haze,
+.skybox_dusk,
+.skybox_dusk_haze,
+.skybox_night,
+.skybox_night_haze,
+.skybox_bloodmoon,
+.skybox_bloodmoon_haze,
+.skybox_dawn_tentacle,
+.skybox_day_tentacle,
+.skybox_dusk_tentacle,
+.skybox_night_tentacle,
+.skybox_blank {
+	position: fixed;
+	left: 0;
+	z-index: 9;
+	user-select: none;
+	top: 0;
+	width: 64px;
+	height: 192px;
+}
+
+.skybox_dawn {
+	background-color: #fd7d01;
+}
+
+.skybox_dawn_haze {
+	background-image: linear-gradient(#fd7d01, #e5d397 65%);
+}
+
+.skybox_day {
+	background-color: #408aca;
+}
+
+.skybox_day_haze {
+	background-image: linear-gradient(#408aca, #d0ffea 65%);
+}
+
+.skybox_dusk {
+	background-color: #fad6a5;
+}
+
+.skybox_dusk_haze {
+	background-image: linear-gradient(#fad6a5, #d7a350 65%);
+}
+
+.skybox_night {
+	background-color: #280137;
+}
+
+.skybox_night_haze {
+	background-image: linear-gradient(#280137, #1a2753 65%);
+}
+
+.skybox_bloodmoon {
+	background-image: linear-gradient(#8b0804, #280137 20%);
+}
+
+.skybox_bloodmoon_haze {
+	background-image: linear-gradient(#8b0804, #280137 20%, #4f284e 65%);
+}
+
+.skybox_dawn_tentacle {
+	background-color: #44056d;
+}
+
+.skybox_day_tentacle {
+	background-color: #69159d;
+}
+
+.skybox_dusk_tentacle {
+	background-color: #550e81;
+}
+
+.skybox_night_tentacle {
+	background-color: #2e0854;
+}
+
+.skybox_blank {
+	background-color: #000;
+}
diff --git a/modules/css/social.css b/modules/css/social.css
new file mode 100644
index 0000000000..d3aa849a7d
--- /dev/null
+++ b/modules/css/social.css
@@ -0,0 +1,222 @@
+.relation-box-list .relation-box {
+	position: relative;
+	display: inline-flex;
+	flex-direction: column;
+	align-items: center;
+	min-width: 250px;
+	max-width: 100%;
+	margin: 0.15rem;
+	border: 1px solid var(--300);
+	text-align: center;
+	overflow: hidden;
+	flex: 1 1 32.4%;
+}
+
+.relation-box .relation-top-line {
+	display: flex;
+	align-items: space-between;
+	font-size: 1.1em;
+	border-bottom: 1px solid var(--750);
+	padding: 0.3em;
+	align-self: stretch;
+}
+
+.relation-box .relation-top-line .relation-title {
+	margin-right: 5px;
+	text-transform: capitalize;
+}
+
+.relation-box .relation-top-line .love-interest-icon {
+	width: 24px;
+	height: 24px;
+}
+
+.relation-box .relation-description {
+	padding: 0.5em;
+	font-size: 90%;
+}
+
+.relation-box .relation-description .meter {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+}
+
+.relation-box .relation-stat-list {
+	display: flex;
+	flex-wrap: wrap;
+	background-image: linear-gradient(transparent 50%, var(--750) 0.1em, transparent calc(50% + 0.1em)),
+		linear-gradient(90deg, transparent 50%, var(--750) 0.1em, transparent calc(50% + 0.1em));
+	border-top: 1px solid var(--750);
+	background-size: contain;
+	background-repeat: no-repeat;
+	flex: 1;
+	width: 100%;
+	min-height: 130px;
+}
+
+.relation-box .relation-stat-list.no-images {
+	min-height: 80px;
+}
+
+.relation-box .relation-stat-list .relation-stat-block {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	height: calc(50% - 0.6em);
+	padding: 0.3em;
+	width: calc(50% - 0.6em);
+	margin: 0;
+}
+
+.relation-box .relation-stat-list.no-images .relation-stat-block {
+	flex-direction: row;
+	justify-content: center;
+}
+
+.relation-box .relation-stat {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	z-index: 0;
+}
+
+.relation-box .relation-stat-icon {
+	position: relative;
+	display: inline-block;
+	width: 32px;
+	height: 32px;
+	margin-right: 5px;
+}
+
+.relation-box .relation-stat-icon .active-icon-img {
+	position: relative;
+	z-index: 1;
+	clip-path: inset(0 calc(100% - var(--progress)) 0 0);
+}
+
+.relation-box .relation-stat-icon.vertical .active-icon-img {
+	clip-path: inset(calc(100% - var(--progress)) 0 0 0);
+}
+
+.relation-box .relation-stat-icon.vertical-inverted .active-icon-img {
+	clip-path: inset(0 0 calc(100% - var(--progress)) 0);
+}
+
+.relation-box .relation-stat-icon.horizontal-inverted .active-icon-img {
+	clip-path: inset(0 0 0 calc(100% - var(--progress)));
+}
+
+.relation-box .relation-stat-icon img.inactive-icon-img.outlined {
+	filter: contrast(0.35) brightness(0.25) saturate(0) drop-shadow(0 0 0 white);
+}
+
+.relation-box .relation-stat-icon img {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+}
+
+.relation-box .relation-stat .relation-stat-percent {
+	text-align: left;
+}
+
+.relation-box .relation-stat-block .progress-bar {
+	width: var(--progress);
+	top: auto;
+	bottom: 0;
+}
+
+#npc-relations .relation-box {
+	max-width: 32.4%;
+}
+
+#secondary-npcs,
+#farm-status {
+	font-size: 85%;
+}
+
+#secondary-npcs .relation-box,
+#farm-status .relation-box {
+	min-width: 220px;
+	border-color: var(--500);
+	flex: 0 1 24.3%;
+}
+
+#secondary-npcs .relation-box .relation-top-line #farm-status .relation-box .relation-top-line {
+	padding: 0.2rem 0 0.1rem;
+}
+
+#secondary-npcs .relation-box .quick-stats {
+	display: inline-flex;
+	padding-right: 0.3em;
+	align-self: flex-end;
+	z-index: 0;
+}
+
+#secondary-npcs .relation-box .quick-stats .relation-stat-block:not(:first-child) {
+	margin-left: 0.3em;
+}
+
+#secondary-npcs .relation-box .relation-stat .relation-stat-icon {
+	width: 20px;
+	height: 20px;
+}
+
+#secondary-npcs .relation-box .relation-stat .relation-stat-percent {
+	font-size: 85%;
+}
+
+#secondary-npcs .relation-box .relation-description,
+#farm-status .relation-box .relation-description,
+#global-recognition .relation-box .relation-description {
+	padding: 0.3em;
+}
+
+#faction-reputations .relation-box {
+	flex: 1 1 49%;
+}
+
+#global-recognition .relation-box {
+	flex: 1 1 30%;
+	min-width: 220px;
+	border-color: var(--700);
+}
+
+#global-recognition .relation-box:last-child {
+	font-size: 110%;
+	flex-basis: 100%;
+}
+
+#farm-status .relation-box:last-child {
+	font-size: 120%;
+	flex-basis: 100%;
+	text-align: center;
+	align-items: center;
+}
+
+#global-recognition .relation-box:nth-child(12n) {
+	font-size: 120%;
+	flex-basis: 100%;
+	text-align: center;
+}
+
+#global-recognition .relation-box:not(:last-child) .relation-box:not(:nth-child(12n)) .relation-description #farm-status .relation-box:not(:last-child) {
+	align-self: flex-start;
+}
+
+@media (max-width: 869px) {
+	#npc-relations .relation-box {
+		max-width: 100%;
+	}
+
+	#secondary-npcs .relation-box,
+	#farm-status .relation-box {
+		flex: 1 1 24.3%;
+	}
+}
diff --git a/modules/css/stalking.css b/modules/css/stalking.css
new file mode 100644
index 0000000000..75e623e9db
--- /dev/null
+++ b/modules/css/stalking.css
@@ -0,0 +1,46 @@
+.div_stalk {
+	width: 512px;
+	max-width: 100%;
+	height: 32px;
+	position: relative;
+}
+
+.div_stalk img {
+	max-width: 14.2%;
+	height: auto;
+}
+
+.stalk_1 {
+	left: 0;
+	position: absolute;
+}
+
+.stalk_2 {
+	left: 14.2%;
+	position: absolute;
+}
+
+.stalk_3 {
+	left: 28.4%;
+	position: absolute;
+}
+
+.stalk_4 {
+	left: 42.6%;
+	position: absolute;
+}
+
+.stalk_5 {
+	left: 56.8%;
+	position: absolute;
+}
+
+.stalk_6 {
+	left: 71%;
+	position: absolute;
+}
+
+.stalk_7 {
+	left: 85.2%;
+	position: absolute;
+}
diff --git a/modules/css/ui-hairstyles.css b/modules/css/ui-hairstyles.css
new file mode 100644
index 0000000000..98a10e6bc9
--- /dev/null
+++ b/modules/css/ui-hairstyles.css
@@ -0,0 +1,215 @@
+/* Updated Hairstyle UI: Start */
+
+#hairContainerHeader,
+#hairContainerFooter {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+}
+
+#hairContainerHeader .tab,
+#hairContainerPages .tab,
+#hairContainerSave .tab,
+#hairContainerFilter .tab {
+	width: inherit;
+	border: 0;
+	border-radius: 0;
+	background-color: inherit;
+}
+
+#hairContainerHeader .tab-selected {
+	width: inherit;
+	border: 0;
+	border-radius: 0;
+}
+
+#hairContainerHeader .tab button {
+	background-color: var(--850);
+	border: 1px solid var(--600);
+	border-bottom: 0;
+	border-right: 0;
+	border-radius: 0;
+	color: var(--600);
+}
+
+#hairContainerHeader .tab-selected button {
+	background-color: var(--800);
+	border: 1px solid var(--150);
+	border-bottom: 0;
+	border-radius: 0;
+	color: var(--gold);
+}
+
+#hairContainerHeader button:hover {
+	background-color: var(--500);
+	border: 1px solid var(--000);
+	border-bottom: 0;
+	color: var(--000);
+}
+
+.hairContainerSave .tab button:hover,
+#hairContainerPages .tab button:hover,
+#hairContainerFilter .tab button:hover {
+	background-color: var(--500);
+	border: 1px solid var(--000);
+	border-top: 0;
+}
+
+#hairContainerHeader div:last-child {
+	border-right: 1px solid var(--600);
+}
+
+#hairContainerHairstyle {
+	padding: 20px;
+	background-color: var(--850);
+	border: 1px solid var(--150);
+	display: grid;
+	grid-gap: 10px;
+	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+}
+
+#hairContainerHairstyle .gridItem {
+	padding: 20px;
+	margin: 0 5px;
+}
+
+#hairContainerTraits {
+	background-color: var(--850);
+	border: 1px solid var(--150);
+	padding: 10px;
+}
+
+#hairContainerPages .tab button,
+.hairContainerSave .tab button,
+#hairContainerFilter .tab button {
+	border: 1px solid var(--150);
+	border-top: 0;
+	background-color: var(--800);
+
+	--max-width: max-content;
+
+	width: calc(var(--max-width) + 100px);
+	padding: 5px 15px;
+	border-radius: 0;
+}
+
+.tab #buttonpage button {
+	min-width: 50px;
+	cursor: initial;
+}
+
+.tab #buttonpage button:hover {
+	background-color: var(--800);
+	border: 1px solid var(--150);
+	border-top: 0;
+}
+
+#hairGridSides a {
+	color: var(--000);
+}
+
+#hairGridSides a:hover {
+	text-decoration: none;
+}
+
+.hairHeader {
+	display: grid;
+	padding: 2px;
+	text-align: center;
+	font-size: 22px;
+}
+
+.hairHeaderCollapsed {
+	display: grid;
+	padding: 2px;
+	text-align: center;
+	font-size: 22px;
+	background-color: var(--850);
+}
+
+.arrow {
+	border: solid var(--850);
+	border-width: 0 3px 3px 0;
+	padding: 5px;
+	margin: 10px 15px 10px 0;
+	float: right;
+	transform: rotate(-45deg);
+	-webkit-transform: rotate(-45deg);
+}
+
+.arrowdown {
+	transform: rotate(45deg);
+	-webkit-transform: rotate(45deg);
+}
+
+.hairGrid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+	grid-gap: 4px;
+	background-color: var(--850);
+	padding: 20px;
+	border: 1px solid var(--150);
+}
+
+#textbox--hairstylename {
+	min-width: 25%;
+	margin: 0 5px;
+}
+
+#hairGridFringe {
+	border-top: 2px solid var(--000);
+}
+
+.hairGridTraits {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+}
+
+#hairContainerFilter .tab button:first-child {
+	color: var(--gold);
+}
+
+.gridItem,
+.saveHair {
+	border: 2px solid var(--600);
+	border-radius: 3px;
+	padding: 2px;
+	text-align: center;
+	cursor: pointer;
+}
+
+.saveHair {
+	padding: 20px;
+	margin: 0 5px;
+	cursor: default;
+}
+
+.traitCategory {
+	border: 2px solid var(--600);
+	border-radius: 3px;
+	padding: 2px;
+	margin: 10px;
+}
+
+.gridItem:hover {
+	background-color: var(--500);
+	border: 2px solid var(--000);
+}
+
+.selectedHair {
+	background-color: var(--750);
+	border: 2px solid var(--gold);
+}
+
+.selectedHair a {
+	color: var(--gold);
+}
+
+.hairstyleMannequin {
+	width: 100px;
+	height: 100px;
+	object-fit: none;
+	object-position: 45% 14%;
+}
+
+/* Updated Hairstyle UI: End */
diff --git a/modules/css/ui-start-menu.css b/modules/css/ui-start-menu.css
new file mode 100644
index 0000000000..6cfcb05f94
--- /dev/null
+++ b/modules/css/ui-start-menu.css
@@ -0,0 +1,260 @@
+/* Start Menu UI */
+.containerStart {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+	grid-gap: 24px;
+}
+
+.startTabContainer {
+	display: flex;
+}
+
+.buttonStart {
+	width: 100%;
+	display: inline-block;
+}
+
+.buttonStartSelected {
+	width: 100%;
+	display: inline-block;
+	border: 1px solid var(--gold);
+}
+
+.buttonStart button,
+.buttonStartSelected button {
+	height: 100%;
+}
+
+.buttonSettings {
+	display: grid;
+}
+
+#listbox--upgradenameid {
+	margin-left: 10px;
+	padding-left: 10px;
+}
+
+#containerStart {
+	display: flex;
+	margin: -5px;
+}
+
+.containerWrap {
+	flex-wrap: wrap;
+}
+
+.containerWrap > div {
+	margin: 5px;
+	flex: 1 1 165px;
+}
+
+.containerWrap > div .buttonSettings,
+.containerWrap > div .buttonSettingsSelected {
+	height: 100%;
+}
+
+.buttonSettingsSelected {
+	display: grid;
+}
+
+.buttonSettingsSelected button {
+	border: 1px solid var(--gold);
+}
+
+.buttonSettings button,
+.buttonSettingsSelected button {
+	max-width: none;
+}
+
+.presetButtons button {
+	max-width: 100px;
+}
+
+.settingsGrid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(49%, 1fr));
+	grid-gap: 14px;
+	margin: 10px;
+}
+
+.settingsGridFeats {
+	display: grid;
+	grid-gap: 14px;
+	margin: 10px;
+}
+
+.settingsHeader {
+	grid-column: 1/-1;
+	color: var(--gold);
+	text-align: center;
+	font-weight: bold;
+	font-size: 125%;
+	padding: 4px;
+	border: 1px solid var(--700);
+	background-color: var(--850);
+}
+
+.settingsToggleItem {
+	border: 1px solid var(--700);
+	padding: 8px;
+}
+
+.settingsToggleItem .macro-numberslider .small-description,
+.settingsToggleItemWide .macro-numberslider .small-description {
+	display: block;
+}
+
+.settingsToggleButton button {
+	max-width: 100%;
+	height: 100%;
+}
+
+.settingsToggleButtonGold button {
+	max-width: 100%;
+	height: 100%;
+	color: var(--gold);
+	border-color: var(--gold);
+}
+
+.settingsToggleItemWide {
+	border: 1px solid var(--700);
+	padding: 8px;
+	grid-column: 1/-1;
+}
+
+.settingsToggleIndent {
+	padding: 5px 0 0 15px;
+	grid-column: 1/-1;
+}
+
+.settingsToggleGroupWide {
+	grid-column: 1/-1;
+}
+
+.settingsToggleItemTall {
+	border: 1px solid var(--700);
+	padding: 8px;
+	min-height: 120px;
+}
+
+.featButton button {
+	background-color: var(--850);
+	width: fit-content;
+	padding: 0.1em 0.5em 0;
+	border: 1px solid var(--500);
+	line-height: inherit;
+}
+
+.featButtonGrey button {
+	background-color: var(--750);
+	color: var(--850);
+	width: fit-content;
+	padding: 0.1em 0.5em 0;
+	border: 1px solid var(--500);
+	line-height: inherit;
+	cursor: initial;
+}
+
+.featButtonGrey button:hover {
+	background-color: var(--750);
+	color: var(--850);
+	border: 1px solid var(--500);
+}
+
+.buttonDisable button {
+	cursor: initial;
+	background-color: var(--850);
+	border: 1px solid var(--500);
+}
+
+.buttonDisable button:hover {
+	background-color: var(--850);
+	border: 1px solid var(--500);
+}
+
+.roundl button {
+	border-top-left-radius: 5px;
+	border-bottom-left-radius: 5px;
+}
+
+.roundr button {
+	border-top-right-radius: 5px;
+	border-bottom-right-radius: 5px;
+}
+
+.roundr span,
+.roundl span {
+	margin: -5px;
+}
+
+.featButtonContainer {
+	display: flex;
+}
+
+#pregnancyFeatsDisabled {
+	margin: -10px 0 -5px;
+}
+
+/* Toggle */
+.tattoo-header h3 {
+	margin-left: 0;
+	color: gold;
+	border: 1px solid var(--700);
+	background-color: var(--850);
+	padding: 5px;
+	text-align: center;
+	margin-bottom: 15px;
+}
+
+.tattoo-switch {
+	display: flex;
+	margin-bottom: 5px;
+	overflow: hidden;
+}
+
+.tattoo-switch input {
+	position: absolute !important;
+	clip: rect(0, 0, 0, 0);
+	height: 1px;
+	width: 1px;
+	border: 0;
+	overflow: hidden;
+}
+
+.tattoo-switch label {
+	background-color: #444;
+	color: rgb(136 136 136);
+	border: 1px solid #5b5b5b;
+	line-height: 1;
+	text-align: center;
+	padding: 8px 16px;
+	margin-right: -1px;
+	box-shadow: inset 0 1px 3px rgb(0 0 0 / 30%), 0 1px rgb(255 255 255 / 10%);
+	font-weight: bold;
+}
+
+.tattoo-switch label:hover {
+	cursor: pointer;
+}
+
+.tattoo-switch input:checked + label {
+	background-color: green;
+	color: white;
+	border: 2px solid #00ab00;
+}
+
+.tattoo-switch label:first-of-type {
+	border-radius: 4px 0 0 4px;
+}
+
+.tattoo-switch label:last-of-type {
+	border-radius: 0 4px 4px 0;
+}
+
+#listbox-featsbooststattoos-tattooindextattoo {
+	margin-bottom: 5px;
+}
+
+.tattoo-parts input:checked + label {
+	color: gold;
+}
diff --git a/modules/css/wardrobe.css b/modules/css/wardrobe.css
new file mode 100644
index 0000000000..f589388129
--- /dev/null
+++ b/modules/css/wardrobe.css
@@ -0,0 +1,78 @@
+#wardrobewear {
+	display: table;
+	background-color: var(--900);
+	border-radius: 3px;
+	transition: all 1.25s;
+}
+
+.clothes-price-container .numberslider-group {
+	display: flex;
+	flex-direction: column;
+	border: 1px solid var(--750);
+	border-left: none;
+	border-right: none;
+	margin-top: 4px;
+	padding: 0.5em 0;
+}
+
+.clothes-price-container .numberslider-inline {
+	display: flex;
+	flex-direction: column;
+	min-width: 50%;
+	margin-bottom: 0.5em;
+}
+
+.clothes-price-container .numberslider-inline > span {
+	font-size: 0.9em;
+}
+
+.clothes-price-container .numberslider-inline > .macro-numberslider {
+	display: flex;
+}
+
+.settings-container {
+	margin-top: 10px;
+}
+
+.settings-container .numberslider-group {
+	display: flex;
+	flex-direction: column;
+	border: 1px solid var(--750);
+	border-left: none;
+	border-right: none;
+	margin-top: 4px;
+	padding: 5px;
+}
+
+.settings-container .numberslider-inline {
+	display: flex;
+	flex-direction: column;
+	min-width: 50%;
+	margin-bottom: 0.5em;
+}
+
+.settings-intro {
+	padding: 10px;
+}
+
+.settings-intro ul {
+	margin: 0;
+}
+
+#wardrobewear.flash {
+	background-color: #edd464aa;
+}
+
+.wardrobe-action {
+	display: inline-block;
+	transition: all 1.25s;
+}
+
+.action-flash {
+	border-color: #edd464 !important;
+	color: #edd464 !important;
+}
+
+.action-flash a {
+	color: #edd464 !important;
+}
-- 
GitLab