css/general/formatting.css

 /* Styles that mainly affect how text looks, but not where it is */
 
-/* setting at the beginning of a scene / subscene */
-.scene-intro {
-    font-style: italic;
-}
-
-/* adds detail to an option: Do something. <span class="detail">Sentence that explains the effect/conditions */
-.detail {
-    font-style: italic;
-}
-
-/* additional information not related to a specific option */
-.note {
-    font-style: italic;
+.scene-intro,	/* setting at the beginning of a scene / subscene */
+.detail,		/* adds detail to an option: Do something. <span class="detail">Sentence that explains the effect/conditions */
+.note,			/* additional information not related to a specific option */
+.italics {
+	font-style: italic;
 }
 
 .icons {
-    font-family: 'tme-fa-icons';
+	font-family: 'sc-icons';
 }
 
 .story-label, .regularParties, .underline {
-    text-decoration: underline;
+	text-decoration: underline;
 }
 
 /* Note: Do not do a linebreak after span in HTML, because it will underline the automatic space it inserts: "Matilda_is a cow" */
 .slave-name {
-    color: pink;
-    font-weight: bold;
-    text-decoration: underline;
-    text-decoration-color: white;
+	color: pink;
+	font-weight: bold;
+	text-decoration: underline;
+	text-decoration-color: white;
 }
 
 .name {
-    font-weight: bold;
+	font-weight: bold;
 }
 
 .custom-label {
-    color: yellow;
-    font-weight: bold;
+	color: yellow;
+	font-weight: bold;
 }
 
-/* strong is deprecated, use bold instead */
-.major-link, .bold, .strong {
-    font-weight: bold;
+/* strong & bold are deprecated, use custom classes instead */
+/* :not(.defiant) : quick fix to make defiant styles look correct */
+.major-link, .bold:not(.defiant), .strong {
+	font-weight: bold;
+}
+
+.monospace {
+	font-family: monospace;
 }
 
 .strikethrough {
-    text-decoration: line-through
+	text-decoration: line-through
 }
 
 .clear-formatting {
-    color: white;
-    font-weight: normal;
-    font-style: normal;
+	color: white;
+	font-weight: normal;
+	font-style: normal;
+}
+
+.clear-formatting a {
+	color: var(--link-color) !important;
 }
 
 .major-warning {
-    font-weight: bold;
-    color: red;
+	font-weight: bold;
+	color: red;
 }
 
 input:invalid {
-    border-color: #900;
-    background-color: rgba(255, 0, 0, 0.25);
+	border-color: #900;
+	background-color: rgba(255, 0, 0, 0.25);
 }
 
 input:focus:invalid {
-    outline: none;
+	outline: none;
 }
 
 input:out-of-range {
-    background-color: rgba(255, 0, 0, 0.25);
-    border: 2px solid #900;
+	background-color: rgba(255, 0, 0, 0.25);
+	border: 2px solid #900;
+}
+
+.uppercase {
+	text-transform: uppercase;
+}
+
+
+dt {
+	font-weight: bold;
+}
+
+dd {
+	margin-bottom: 1em;
+}
+
+dt::after {
+	content: ":";
 }

css/general/layout.css

 /* Styles that mainly affect where text is, but not how it looks */
 
-h1, h2, h3 {
-    margin-bottom: 0;
-    margin-top: 0.25em;
+h1, h2, h3, h4 {
+	margin-bottom: 0;
+	margin-top: 0.25em;
 }
 
-h1 + p, h2 + p, h3 + p {
-    margin-top: 0;
+h1 + p, h2 + p, h3 + p, h4 + p {
+	margin-top: 0;
 }
 
-div.center, p.center {
-    margin-left: auto;
-    margin-right: auto;
-    text-align: center;
+.center {
+	margin-left: auto;
+	margin-right: auto;
+	text-align: center;
 }
 
 div.flex-container {
-    display: flex;
+	display: flex;
 }
 
 /* makes the first line indented */
 div.indent, p.indent {
-    text-indent: 2em;
+	text-indent: 2em;
 }
 
 div.double-indent, p.double-indent {
-    text-indent: 4em;
+	text-indent: 4em;
 }
 
-/* makes avery line indented */
+/* makes every line indented */
 .choices, .choices {
-    margin-left: 2em;
+	margin-left: 2em;
 }
 
 .double-choices, .double-choices {
-    margin-left: 4em;
+	margin-left: 4em;
 }
 
 div.grid-2columns-auto {
-    display: grid;
-    grid-template-columns: max-content auto;
+	display: grid;
+	grid-template-columns: auto auto;
+	grid-column-gap: 1em;
+}
+
+@media only screen and (min-width: 768px) {
+	div.grid-2columns-auto {
+		grid-template-columns: max-content auto;
+	}
+}
+
+div.grid-3columns-auto {
+	display: grid;
+	grid-template-columns: auto auto auto;
+	grid-column-gap: 1em;
+}
+
+@media only screen and (min-width: 768px) {
+	div.grid-3columns-auto {
+		grid-template-columns: max-content max-content auto;
+	}
+}
+
+div.grid-all-columns {
+	grid-column: 1 / -1;
+}
+
+.border-bottom {
+	border-bottom: 1px solid;
+}
+
+.margin-top {
+	margin-top: 1em;
+}
+
+.margin-bottom {
+	margin-bottom: 1em;
+}
+
+.margin-left {
+	margin-left: 2em;
+}
+
+.margin-right {
+	margin-right: 2em;
+}
+
+.margin-x {
+	margin-left: 2em;
+	margin-right: 2em;
+}
+
+.margin-y {
+	margin-top: 1em;
+	margin-bottom: 1em;
+}
+
+.margin-full {
+	margin: 1em;
+}
+
+.padding-left {
+	padding-left: 2em;
+}
+
+.padding-right {
+	padding-right: 2em;
+}
+
+.padding-x {
+	padding-left: 2em;
+	padding-right: 2em;
+}
+
+.padding-y {
+	padding-top: 1em;
+	padding-bottom: 1em;
+}
+
+.padding-full {
+	padding: 1em;
+}
+
+.padded-columns {
+	border-collapse: separate;
+	border-spacing: 1em 0;
+}
+
+.padded-columns td,
+.padded-columns th {
+	padding: 0 1em;
+}
+
+.padded-rows {
+	border-collapse: separate;
+	border-spacing: 0 1em;
+}
+
+.padded-rows td {
+	padding: 1em 0;
+}
+
+.space-evenly {
+	justify-content: space-evenly;
+}
+
+.absolute {
+	position: absolute;
+}
+
+/* puts a div in the right upper corner while not influencing the layout of the rest of the page */
+div.cheat-menu {
+	font-style: italic;
+	position: absolute;
+	right: 50px;
+	top: 40px;
+}
+
+input[type="text"].number {
+	min-width: 6em;
+	max-width: 6em;
 }

css/general/textColors.css

 /* Colors are made as css classes, to allow them to be changed for a light color scheme (for example). */
 /* a version is for this case: <span class="..."><a>text</a></span> */
 
+/* TODO: remove all color class names (e.g. ".cyan") once all instances are removed in code */
+
 /* link color */
 .link, .link a {
-    color: var(--link-color)
+	color: var(--link-color)
 }
 
 .aquamarine, .aquamarine a, .skill, .skill a {
-    color: aquamarine
+	color: aquamarine
 }
 
 .coral, .coral a, .fetish.loss, .fetish.loss a {
-    color: coral
+	color: coral
 }
 
 /* used for aphrodisiac & neighbor arcs */
 .cyan, .cyan a, .hotkey {
-    color: cyan
+	color: cyan
 }
 
 .darkgoldenrod, .darkgoldenrod a, .trust.extremely-terrified, .trust.extremely-terrified a {
-    color: darkgoldenrod
+	color: darkgoldenrod
 }
 
 .darkred, .darkred a, .defiant.full, .defiant.full a {
-    color: darkred
+	color: darkred
 }
 
 .darkviolet, .darkviolet a, .devotion.hateful, .devotion.hateful a {
-    color: darkviolet
+	color: darkviolet
 }
 
 /* used for devotion once & agent */
 .deeppink, .deeppink a, .devotion.devoted, .devotion.devoted a {
-    color: deeppink
+	color: deeppink
 }
 
 .steelblue, .steelblue a {
-    color: steelblue
+	color: steelblue
 }
 
 .deepskyblue, .deepskyblue a, .intelligent, .intelligent a {
-    color: deepskyblue
+	color: deepskyblue
 }
 
 .dodgerblue, .dodgerblue a {
-    color: dodgerblue
+	color: dodgerblue
 }
 
 .blue, .blue a {
-    color: blue
+	color: blue
 }
 
 .gold, .gold a, .trust.dec, .trust.dec a, .trust.frightened, .trust.frightened a {
-    color: gold
+	color: gold
 }
 
 .goldenrod, .goldenrod a, .trust.terrified, .trust.terrified a {
-    color: goldenrod
+	color: goldenrod
 }
 
 .gray, .gray a {
-    color: gray
+	color: gray
 }
 
 .green, .green a, .reputation.inc, .reputation.inc a, .improvement, .improvement a, .flaw.break, .flaw.break a,
-.skill.inc, .skill.inc a, .fuckdoll, .fuckdoll a, .positive, .positive a, .health.inc, .health.inc a {
-    color: green
+.skill.inc, .skill.inc a, .fuckdoll, .fuckdoll a, .positive, .positive a, .health.inc, .health.inc a, .prestigious,
+.prosperity.inc {
+	color: green
 }
 
 .hotpink, .hotpink a, .devotion.inc, .devotion.inc a, .devotion.accept, .devotion.accept a {
-    color: hotpink
+	color: hotpink
 }
 
 .lawngreen, .lawngreen a {
-    color: lawngreen
+	color: lawngreen
 }
 
 .lightblue, .lightblue a {
-    color: lightblue
+	color: lightblue
 }
 
 /* compare pink for fetish */
 .lightcoral, .lightcoral a, .fetish.gain, .fetish.gain a {
-    color: lightcoral
+	color: lightcoral
 }
 
 .lightgreen, .lightgreen a, .relationship, .relationship a, .rivalry.dec, .rivalry.dec a {
-    color: lightgreen
+	color: lightgreen
 }
 
 .lightpink, .lightpink a {
-    color: lightpink
+	color: lightpink
 }
 
 .lightsalmon, .lightsalmon a, .fetish.inc, .fetish.inc a, .rivalry.inc, .rivalry.inc a,
 .relationship.dec, .relationship.dec a {
-    color: lightsalmon
+	color: lightsalmon
 }
 
 /* tight orifices, breast changes, take virginity, not sure on good aliases */
 .lime, .lime a, .change.positive, .change.positive a, .virginity.loss, .virginity.loss a, .puberty, .puberty a,
 .pregnant, .pregnant a {
-    color: lime
+	color: lime
 }
 
 /* multiple questionable uses */
 .limegreen, .limegreen a {
-    color: limegreen
+	color: limegreen
 }
 
 .magenta, .magenta a, .devotion.worship, .devotion.worship a {
-    color: magenta
+	color: magenta
 }
 
 .mediumaquamarine, .mediumaquamarine a, .trust.inc, .trust.inc a, .trust.careful, .trust.careful a {
-    color: mediumaquamarine
+	color: mediumaquamarine
 }
 
 .mediumorchid, .mediumorchid a, .devotion.dec, .devotion.dec a, .devotion.resistant, .devotion.resistant a {
-    color: mediumorchid
+	color: mediumorchid
 }
 
 .mediumseagreen, .mediumseagreen a, .trust.trusting, .trust.trusting a {
-    color: mediumseagreen
+	color: mediumseagreen
 }
 
 /* generally between red and green, and a lot of other places */
 .orange, .orange a, .stupid, .stupid a, .change.negative, .change.negative a, .defiant.careful, .defiant.careful a,
-.ncs, .ncs a, .miscarriage, .miscarriage a, .intro.question {
-    color: orange
-}
-
-.orangered, .orangered a, .defiant.inc, .defiant.inc a, .defiant.bold, .defiant.bold, .education.neg a {
-    color: orangered
+.ncs, .ncs a, .miscarriage, .miscarriage a, .period, .period a, .hindrance.mid, .intro.question {
+	color: orange
 }
 
-/* used once (wrong? */
-.orchid, .orchid a {
-    color: orchid
+.orangered, .orangered a, .defiant.inc, .defiant.inc a, .defiant.bold, .defiant.bold a, .education.neg a, .unintelligent, .hindrance.high {
+	color: orangered
 }
 
 /* also fetish start ??? , and a lot of other stuff */
 .pink, .pink a, .slave.name.simple {
-    color: pink
+	color: pink
 }
 
 /* generally bad stuff */
 /* note: .error is for unexpected behavior, .warning for player feedback */
-.red, .red a, .health.dec, .health.dec a, .cash.dec, .cash.dec a, .stat.drop, .stat.drop a, .flaw.gain, .flaw.gain a,
-.mindbreak, .mindbreak a, .error, .error a, .elites.loss, .elites.loss a, .reputation.dec, .reputation.dec a,
-.warning, .warning a {
-    color: red
+.red, .red a, .health.dec, .health.dec a, .cash.dec, .cash.dec a, .food.dec, .food.dec a, .stat.drop, .stat.drop a, .flaw, .flaw a, .flaw.gain, .flaw.gain a,
+.mindbreak, .mindbreak a, .error, .error a, .elites.loss, .elites.loss a, .reputation.dec, .reputation.dec a, .immobile, .hindrance.max,
+.warning, .warning a, .prosperity.dec {
+	color: red
 }
 
 .seagreen, .seagreen a, .trust.prof-trusting, .trust.prof-trusting a {
-    color: seagreen
+	color: seagreen
 }
 
 .springgreen, .springgreen a, .skill.player, .skill.player a {
-    color: springgreen
+	color: springgreen
 }
 
 /* some ethnicity */
 .tan, .tan a {
-    color: tan
+	color: tan
 }
 
-.chocolate, .chocolate a {
-    color: chocolate
+.chocolate, .chocolate a, .food {
+	color: chocolate
 }
 
 .saddlebrown, .saddlebrown a {
-    color: saddlebrown
+	color: saddlebrown
 }
 
 .teal, .teal a {
-    color: teal
+	color: teal
 }
 
-.yellow, .yellow a, .noteworthy, .noteworthy a, .paraphilia.gain, .paraphilia.gain a,
+.yellow, .yellow a, .noteworthy, .noteworthy a, .paraphilia.gain, .paraphilia.gain a, .hindrance.low,
 .devotion.ambivalent, .devotion.ambivalent a, .trust.fearful, .trust.fearful a, .job.change {
-    color: yellow
+	color: yellow
 }
 
 .yellowgreen, .yellowgreen a, .cash.inc, .cash.inc a, .cash, .cash a {
-    color: yellowgreen
+	color: yellowgreen
+}
+
+.cash.note {
+	color: seagreen;
 }
 
 .white a {
-    color: white
+	color: white
 }
 
 .violet, .libido.inc {
-    color: violet
+	color: violet
 }
 
 .khaki, .libido.dec {
-    color: khaki
+	color: khaki
+}
+
+.race, .nationality {
+	color: tan
 }

css/gui/accordion.css

@@ -39,14 +39,14 @@ button.accordion:hover:not(.empty) {
 
 /* open/close symbol */
 button.accordion::before {
-	font-family: "tme-fa-icons";
+	font-family: "sc-icons";
 	position: absolute;
 	left: 10px;
-	content: "\e81c";
+	content: "\f078";
 }
 
 button.accordion.closed::before {
-	content: "\e81e";
+	content: "\f054";
 }
 
 button.accordion.empty::before {
@@ -66,3 +66,9 @@ button.accordion span.title {
 button.accordion span.info {
 	float: right;
 }
+
+button.assignment-report-btn {
+	display: block;
+	margin-top: 1em;
+	margin-bottom: 1em;
+}

css/gui/buttons.css

+.purchase-button {
+	font-style: normal;
+	margin: 0.25em 1em;
+	outline: none;
+	transition: 0.2s;
+}
+
+.purchase-button.disabled, .purchase-button.disabled:hover {
+	background-color: black;
+	cursor: not-allowed;
+}

css/gui/encyclopedia.css

 .encyclopedia.topic {
 	font-weight: bold;
 }
+
+/* mark text that is a link/button somewhere else */
+/* Click <span class="encyclopedia interaction">X</span> to do Y */
+.encyclopedia.interaction {
+	background: #203e6c;
+	border-radius: 5px;
+	border: hidden;
+	padding: 2px 4px;
+	white-space: nowrap;
+	font-size: smaller;
+}
+
+.encyclopedia-source::before {
+	content: "— ";
+}
+
+.encyclopedia-source .article {
+	font-style: italic;
+}
+
+.encyclopedia.emphasize {
+	text-decoration-line: underline
+}

css/gui/favorite.css

 .favorite, .favorite:hover {
-    color: yellow;
-    text-decoration: none;
+	color: yellow;
+	text-decoration: none;
 }
 
 .not-favorite, .not-favorite:hover {
-    color: grey;
-    text-decoration: none;
+	color: grey;
+	text-decoration: none;
 }

css/gui/hotkeySettings.css

 div.hotkey-settings {
-    display: grid;
-    grid-template-columns: repeat(3, max-content) auto;
+	display: grid;
+	grid-template-columns: repeat(3, max-content) auto;
 }
 
 @media only screen and (min-width: 1600px) {
-    div.hotkey-settings {
-        grid-template-columns: repeat(3, max-content) auto repeat(3, max-content) auto;
-    }
+	div.hotkey-settings {
+		grid-template-columns: repeat(3, max-content) auto repeat(3, max-content) auto;
+	}
 }
 
 div.hotkey-settings div.description {
-    margin-right: 10px;
-    /* center text vertically */
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
+	margin-right: 10px;
+	/* center text vertically */
+	display: flex;
+	justify-content: center;
+	flex-direction: column;
 }
 
 div.hotkey-settings button {
-    margin: 5px;
-    border-width: 2px;
-    background-color: var(--button-color);
-    border-color: var(--button-border-color);
-    width: 70px;
+	margin: 5px;
+	border-width: 2px;
+	width: 70px;
 }
 
 div.hotkey-settings button.combination {
-    min-width: 150px;
-    border-width: 0;
+	min-width: 150px;
+	border-width: 0;
 }
 
-div.hotkey-settings button.inactive, div.hotkey-settings button.inactive:hover {
-    background-color: var(--button-selected-color);
-    cursor: default;
-
-}
-
-div.hotkey-settings button:hover {
-    background-color: var(--button-hover-color);
-    border-color: var(--button-border-color);
+div.hotkey-settings button:disabled {
+	background-color: var(--button-selected-color);
 }

css/gui/linksStrip.css

-ul.choicesStrip {
-    display: inline;
-    list-style-type: none;
-    padding: 0mm;
-    margin-left: 0em;
+ul.choices-strip {
+	display: inline;
+	list-style-type: none;
+	padding: 0;
+	margin-left: 0;
 }
 
-ul.choicesStrip li {
-    display: inline;
+ul.choices-strip li {
+	display: inline;
 }
 
-ul.choicesStrip li + li:before {
-    content: " | ";
+ul.choices-strip li + li:before {
+	content: " | ";
 }
 
 a.disabled {
-    color: white;
-    pointer-events: none;
-    cursor: default;
+	color: white;
+	pointer-events: none;
+	cursor: default;
 }

css/gui/lists.css

+.no-bullet {
+	list-style-type: none;
+}

css/gui/options.css

 div.options-group {
 	display: grid;
-	grid-template-columns: max-content auto;
+	grid-template-columns: auto auto;
 	align-items: center;
 }
 
+@media only screen and (min-width: 768px) {
+	div.options-group {
+		grid-template-columns: max-content auto;
+	}
+}
+
 /* left side */
 div.options-group div.description {
 	margin-right: 10px;
@@ -16,7 +22,6 @@ div.options-group div.button-group {
 
 .button-group button {
 	color: var(--link-color);
-	background-color: var(--button-color);
 	border: none; /* outline instead of border */
 	/* left & right outline overlap each other so we don't have a double border */
 	outline: solid 2px var(--button-border-color);
@@ -27,7 +32,6 @@ div.options-group div.button-group {
 }
 
 .button-group button:hover {
-	background-color: var(--button-hover-color);
 	color: var(--link-hover-color)
 }
 
@@ -57,14 +61,6 @@ div.options-group button.off:hover {
 	background-color: #6a1b16;
 }
 
-div.options-group button.selected.neutral {
-	background-color: #4d4d00;
-}
-
-div.options-group button.neutral:hover {
-	background-color: #666600;
-}
-
 div.options-group .comment {
 	color: gray;
 	font-style: italic;
@@ -126,6 +122,29 @@ div.options-group input.full-width {
 	}
 }
 
+/* slider */
+/* very static styling, won't work well on very small screens */
+.slider-div {
+	display: flex;
+	gap: 1em;
+}
+
+.slider-div input[type="range"] {
+	width: 50%;
+	min-width: 12em;
+}
+
+.slider-div span {
+	width: 100%;
+	max-width: 8em;
+	align-self: center;
+}
+
+.slider-div span:first-child {
+	text-align: end;
+}
+
+
 /* other */
 .subHeading {
 	width: 85%;
@@ -143,8 +162,8 @@ div.options-group input.full-width {
 }
 
 table.invisible {
-    table-layout: fixed;
-    border-collapse: separate;
-    border-spacing: 5px;
-    margin:1em auto;
+	table-layout: fixed;
+	border-collapse: separate;
+	border-spacing: 5px;
+	margin:1em auto;
 }

css/gui/personalLog.css

+.personal-log-dialog .log-entry-save {
+    text-align: right;
+}
+
+.personal-log-dialog dl {
+    list-style-type: decimal;
+}
+.personal-log-dialog dt {
+    font-weight: normal;
+    list-style-type: decimal;
+}
+
+.personal-log-dialog dt .log-entry-created {
+    font-weight: bold;
+}
+
+.personal-log-dialog dt .log-entry-edited {
+    font-style: italic;
+    margin-left: 0.5rem;
+}
+
+.personal-log-dialog dt .choices-strip {
+    margin-left: 1.5rem;
+}
+
+.personal-log-dialog dt::after {
+    content: "";
+}
+
+.personal-log-dialog dd {
+    margin-left: 2rem;
+}
+
+.personal-log-dialog #log-entry-editor {
+    width: 95%;
+    height: 10rem;
+}
\ No newline at end of file

css/gui/quicklinks.css

-div.quick-links {
-    /* Give quick links as much space as possible, any more and it start looking wrong. */
-    margin: 0 -7px;
-    /* the last menu link has a bottom outline, make enough space for it */
-    margin-bottom: 2px;
+.quick-links {
+	/* Give quick links as much space as possible, any more and it start looking wrong. */
+	margin-right: -7px;
+	margin-left: -7px;
 }
 
-div.quick-links div.toggle {
-    position: relative; /* so ::before/::after works in relation to this element */
-    background-color: #444444;
-    cursor: pointer;
+.quick-links .toggle {
+	position: relative; /* so ::before/::after works in relation to this element */
+	background-color: #444444;
+	border: none;
+	width: 100%;
+	padding: 0;
+	line-height: unset;
 }
 
-div.quick-links div.toggle:hover {
-    background-color: #5f5f5f;
+.quick-links .toggle:hover {
+	background-color: #5f5f5f;
 }
 
-div.quick-links div.toggle::before {
-    font-family: "tme-fa-icons";
-    position: absolute;
-    left: 5px;
-    content: "\e818";
+.quick-links .toggle::before {
+	font-family: "sc-icons";
+	position: absolute;
+	left: 5px;
+	content: "\f0d7";
 }
 
-div.quick-links div.collapsed div.toggle::before {
-    content: "\e81a";
+.quick-links div.collapsed .toggle::before {
+	content: "\f0da";
 }
 
-div.quick-links div.content {
-    margin: 0 5px;
+.quick-links div.content {
+	margin: 0 5px;
 }
 
-div.quick-links div.collapsed div.content {
-    display: none
+.quick-links div.collapsed div.content {
+	display: none
 }
 
-div.quick-links div.menu-link {
-    background-color: #2b2b2b;
-    border: solid #3c3c3c;
-    border-width: 0 2px;
-    margin: 0 2px;
-    /* we cannot detect if an element has something after it, so we just add a shadow to every element. Only for the
-        last element the shadow is not hidden behind another element. */
-    box-shadow: 0 2px 0 0 #3c3c3c;
-    /* make sure the notification is relative to the correct element */
-    position: relative;
+.quick-links div.menu-link {
+	background-color: #2b2b2b;
+	border: solid #3c3c3c;
+	border-width: 0 2px;
+	margin: 0 2px;
+	/* we cannot detect if an element has something after it, so we just add a shadow to every element. Only for the
+		last element the shadow is not hidden behind another element. */
+	box-shadow: 0 2px 0 0 #3c3c3c;
+	/* make sure the notification is relative to the correct element */
+	position: relative;
 }
 
-div.quick-links > div.menu-link:first-child, /* give the very first link an upper border */
-div.quick-links div:not(.menu-link):not(.collapsed) + div.menu-link /* give the link directly after an opened toggle an upper border */
+.quick-links > div.menu-link:first-child, /* give the very first link an upper border */
+.quick-links div:not(.menu-link):not(.collapsed) + div.menu-link /* give the link directly after an opened toggle an upper border */
 {
-    border-top-width: 2px;
+	border-top-width: 2px;
 }
 
 /* notification */
-div.quick-links div.notification:not(.category)::after /* notification for entry */,
-div.quick-links div.category.notification.collapsed > div.toggle::after /* notification for category, disable when uncollapsed */
+.quick-links div.notification:not(.category)::after /* notification for entry */,
+.quick-links div.category.notification.collapsed > .toggle::after /* notification for category, disable when not collapsed */
 {
-    font-family: "tme-fa-icons";
-    position: absolute;
-    right: 5px;
-    top: 0;
-    content: "\e80c";
-    color: yellow;
+	font-family: "sc-icons";
+	position: absolute;
+	right: 5px;
+	top: 0;
+	content: "\f06a";
+	color: yellow;
 }

css/gui/sidebar.css

+.sidebar-grid {
+	display: grid;
+	grid-template-columns: max-content max-content max-content;
+	grid-column-gap: 0.2em;
+	justify-content: center;
+}

css/gui/slaveList/cardStyle.css

-div.card {
-	border-radius: 8px;
-	border-top: 2px #333333;
-	border-left: 2px #333333;
-	border-bottom: 0;
-	border-right: 0;
-	border-style: solid;
+.card {
+	border: 2px solid #333333;
 	background-color: #1a1a1a;
-	box-shadow: 10px 10px 5px black;
-	padding: 10px;
-	margin-bottom: 15px;
+	padding: 1em;
+	margin-bottom: 1em;
 }

css/gui/slaveList/quickList.css

+button.quick-button {
+	width: auto;
+	margin-left: 10px;
+}
+
+.quick-list {
+	text-align: center;
+}
+
+.quick-list button {
+	margin: 10px;
+}
+
+.quick-list.devotion .mindbroken {
+	background-color: red;
+}
+
+.quick-list.devotion .very-hateful {
+	background-color: darkviolet;
+}
+
+.quick-list.devotion .hateful {
+	background-color: darkviolet;
+}
+
+.quick-list.devotion .resistant {
+	background-color: mediumorchid;
+}
+
+.quick-list.devotion .ambivalent {
+	background-color: yellow;
+	color: #111;
+}
+
+.quick-list.devotion .accepting {
+	background-color: hotpink;
+}
+
+.quick-list.devotion .devoted {
+	background-color: deeppink;
+}
+
+.quick-list.devotion .worshipful {
+	background-color: magenta;
+}
+
+.quick-list.trust .mindbroken {
+	background-color: red;
+}
+
+.quick-list.trust .extremely-terrified {
+	background-color: darkgoldenrod;
+}
+
+.quick-list.trust .terrified {
+	background-color: goldenrod;
+	color: #111;
+}
+
+.quick-list.trust .frightened {
+	background-color: gold;
+	color: #111;
+}
+
+.quick-list.trust .fearful {
+	background-color: yellow;
+	color: #111;
+}
+
+.quick-list.trust .hate-careful {
+	background-color: orange;
+}
+
+.quick-list.trust .careful {
+	background-color: mediumaquamarine;
+	color: #111;
+}
+
+.quick-list.trust .bold {
+	background-color: orangered;
+}
+
+.quick-list.trust .trusting {
+	background-color: mediumseagreen;
+}
+
+.quick-list.trust .defiant {
+	background-color: darkred;
+}
+
+.quick-list.trust .profoundly-trusting {
+	background-color: seagreen;
+}

css/gui/slaveList/quickListCSS.css

-.ql-hidden
-{
-	display:none;
-}
-
-div.quick-list.devotion button.mindbroken
-{
-	background-color:red;
-}
-div.quick-list.devotion button.very-hateful
-{
-	background-color:darkviolet;
-}
-div.quick-list.devotion button.hateful
-{
-	background-color:darkviolet;
-}
-div.quick-list.devotion button.resistant
-{
-	background-color:mediumorchid;
-}
-div.quick-list.devotion button.ambivalent
-{
-	background-color: yellow;
-	color: #444444;
-}
-div.quick-list.devotion button.accepting
-{
-	background-color: hotpink;
-}
-div.quick-list.devotion button.devoted
-{
-	background-color: deeppink;
-}
-div.quick-list.devotion button.worshipful
-{
-	background-color: magenta;
-}
-div.quick-list.trust button.mindbroken
-{
-	background-color:red;
-}
-div.quick-list.trust button.extremely-terrified
-{
-	background-color: darkgoldenrod;
-}
-div.quick-list.trust button.terrified
-{
-	background-color: goldenrod;
-}
-div.quick-list.trust button.frightened
-{
-	background-color: gold;
-	color: coral;
-}
-div.quick-list.trust button.fearful
-{
-	background-color: yellow;
-	color: green;
-}
-div.quick-list.trust button.hate-careful
-{
-	background-color: orange;
-}
-div.quick-list.trust button.careful
-{
-	background-color: mediumaquamarine;
-	color: forestgreen;
-}
-div.quick-list.trust button.bold
-{
-	background-color: orangered;
-}
-div.quick-list.trust button.trusting
-{
-	background-color: mediumseagreen;
-}
-div.quick-list.trust button.defiant
-{
-	background-color: darkred;
-}
-div.quick-list.trust button.profoundly-trusting
-{
-	background-color: seagreen;
-}
-div.quick-list
-{
-	table-layout: fixed;
-	text-align: center;
-	border-collapse: separate;
-	border-spacing: 2px;
-	border-style: hidden;
-	empty-cells: hide;
-	width: 70%;
-}
-div.quick-list button
-{
-	margin-top: 15px;
-	margin-right: 20px;
-	white-space: nowrap;
-}

css/gui/slaveList/slaveList.css

@@ -17,6 +17,7 @@ span.freeAssignment {
 
 /* Slave Summary Block */
 .ssb {
+	display: inline-block;
 	margin-right: 2em;
 	text-indent: 0;
 }

css/gui/tabs.css

 div.tab-bar {
 	overflow: hidden;
+	margin-top: 5px;
 }
 
 div.tab-bar button {
-	background-color: var(--button-color);
-	border: solid 2px var(--button-color);
 	color: var(--link-color);
 	float: left;
 	outline: none;
@@ -14,10 +13,15 @@ div.tab-bar button {
 	font-size: large;
 }
 
+div.tab-bar button:not(:first-child) {
+	border-left: none;
+}
+
 div.tab-bar button.card {
 	border-top-left-radius: 15px;
 	border-top-right-radius: 15px;
 	border: none;
+	margin-bottom: 0;
 }
 
 div.tab-bar button.card.active {
@@ -52,8 +56,15 @@ div.tab-bar a.active {
 	cursor: default;
 }
 
-.tab-content:not(.noFade) {
+.tab-content {
 	display: none;
+}
+
+.tab-content.active {
+	display: block;
+}
+
+.tab-content:not(.no-fade) {
 	padding: 6px 12px;
 	-webkit-animation: fadeEffect 0.3s;
 	animation: fadeEffect 0.3s;

css/gui/tooltips/hasTooltip.css

-/* TODO unify tooltip systems */
-.hasTooltip {
-    text-decoration: underline;
-}
-
-/* interactable tooltip-like container - created/destroyed dynamically */
-.details-overlay {
-    display: inline-block;
-    font-size: smaller;
-    width: max-content;
-    height: max-content;
-    border-style: solid;
-    border-color: slategray;
-    border-width: 2px;
-    border-radius: 3px;
-    background-color: rgb(17, 17, 17);
-    padding: 3px;
-    position: absolute;
-    z-index: 2;
-    text-indent: 0;
-}