css/events/events.css

+div.event-section {
+	margin-top: 1em;
+	margin-bottom: 1em;
+}

css/facilities/dressingRoom.css

+.dressing-room-block {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.dressing-room-cell {
+    overflow: hidden;
+	display: inline-block;
+	width: 20em;
+	border: 1px solid var(--button-border-color);
+    margin: 1rem;
+    border-radius: 16px;
+}
+
+.dressing-room-title {
+    margin: 0.4rem 1.4rem;
+	display: grid;
+	align-items: left;
+}
+
+.dressing-room-label {
+	margin: .1rem;
+}
+
+
+.dressing-room-cell:hover { background: var(--button-hover-color) }

css/facilities/nursery.css

+.child-section {
+	margin-top: 1em;
+	margin-bottom: 1em;
+}

css/facilities/statistics.css

+table.facility-stats {
+  width: fit-content;
+  border: 2px solid white;
+  table-layout: auto;
+}
+
+.facility-stats td,
+.facility-stats th {
+  padding: 0 10px;
+}
+
+.facility-stats td:last-child,
+.facility-stats th:last-child {
+  border-left: 1px solid white;
+}
+
+.facility-stats td:nth-last-child(2),
+.facility-stats th:nth-last-child(2) {
+  border-left: 1px dashed white;
+}
+
+.facility-stats th:not(:first-child) {
+  text-align: right;
+}
+
+.facility-stats tr:first-child th {
+  padding-top: 10px;
+}
+
+.facility-stats tr:last-child td {
+  padding-bottom: 10px;
+}
+
+.facility-stats tbody tr:first-child th {
+  border-top: 1px solid white;
+  padding-top: 5px;
+}
+
+.facility-stats tbody tr:not(:first-child) th {
+  border-bottom: 1px dashed white;
+}
+
+.facility-stats tbody tr:not(:first-child) th:nth-last-child(4),
+.facility-stats tbody td:nth-last-child(4) {
+  border-left: 1px dashed white;
+}
+
+.facility-stats thead tr:last-child td {
+  padding-bottom: 5px;
+}
+
+.facility-stats tbody tr:last-child td {
+  padding-bottom: 5px;
+}
+
+.facility-stats tbody tr:nth-child(2n) td {
+  background: var(--background-light);
+}
+
+.facility-stats tbody tr:not(:first-child) {
+  font-size: 14px;
+}
+
+.facility-stats tfoot tr:first-child td {
+  border-top: 1px solid white;
+  padding-top: 5px;
+}
+
+.facility-stats tfoot tr:last-child {
+  font-weight: bold;
+}
+
+.facility-stats .value {
+  text-align: right;
+  font-family: monospace;
+}
+
+.facility-stats tfoot tr:last-child .value {
+  border-top: 3px double white;
+}
+
+.facility-stats .decimalZero {
+  opacity: 0.3;
+}

css/facilities/studio.css

+/* these colors have to be accessed directly for graph colors */
+:root {
+  --genre-color-paraphilia: yellow;
+  --genre-color-fetish: lightcoral;
+  --genre-color-generic: gray;
+  --genre-color-quirk: lawngreen;
+  --genre-color-general: white;
+}
+
+/* and they have to be accessed through classes for text */
+.genre.paraphilia {
+  color: var(--genre-color-paraphilia);
+}
+
+.genre.fetish {
+  color: var(--genre-color-fetish);
+}
+
+.genre.generic {
+  color: var(--genre-color-generic);
+}
+
+.genre.quirk {
+  color: var(--genre-color-quirk);
+}
+
+.genre.general {
+  color: var(--genre-color-general);
+}
+
+/* genre table styles */
+table.genre-stats {
+  width: fit-content;
+  border: 2px solid white;
+  table-layout: fixed;
+}
+
+.genre-stats td {
+  padding: 0 10px;
+  border: 1px solid white;
+}
+
+.genre-stats thead td {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.genre-stats tr:first-child td {
+  padding-top: 10px;
+}
+
+.genre-stats tr:last-child td {
+  padding-bottom: 10px;
+}
+
+.genre-stats tbody tr td:not(:first-child) {
+  text-align: left;
+}
+
+.genre-stats thead tr td.sort-asc::after {
+  content: "\25b4";
+}
+
+.genre-stats thead tr td.sort-desc::after {
+  content: "\25be";
+}

css/facilities/wardrobe.css

+.wardrobe-shopping-block {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.wardrobe-shopping-cell {
+	display: inline-block;
+	width: 20em;
+	border: 1px solid var(--button-border-color);
+}
+
+.wardrobe-shopping-cell:hover { background: var(--button-hover-color) }
\ No newline at end of file

css/futureSocieties/fsPassage.css

+.fs-recommend {
+	border: 1px solid;
+	padding: 2px;
+	border-radius: 3px;
+	font-size: smaller;
+}
+
+.fs-recommend-great {
+	border-color: green;
+	color: green;
+}
+
+.fs-recommend-good {
+	border-color: greenyellow;
+	color: greenyellow;
+}
+
+.fs-recommend-neutral {
+	border-color: gold;
+	color: gold;
+}
+
+.fs-recommend-bad {
+	border-color: red;
+	color: red;
+}
\ No newline at end of file

css/general/formatting.css

+/* Styles that mainly affect how text looks, but not where it is */
+
+.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: 'sc-icons';
+}
+
+.story-label, .regularParties, .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;
+}
+
+.name {
+	font-weight: bold;
+}
+
+.custom-label {
+	color: yellow;
+	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
+}
+
+.clear-formatting {
+	color: white;
+	font-weight: normal;
+	font-style: normal;
+}
+
+.clear-formatting a {
+	color: var(--link-color) !important;
+}
+
+.major-warning {
+	font-weight: bold;
+	color: red;
+}
+
+input:invalid {
+	border-color: #900;
+	background-color: rgba(255, 0, 0, 0.25);
+}
+
+input:focus:invalid {
+	outline: none;
+}
+
+input:out-of-range {
+	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, h4 {
+	margin-bottom: 0;
+	margin-top: 0.25em;
+}
+
+h1 + p, h2 + p, h3 + p, h4 + p {
+	margin-top: 0;
+}
+
+.center {
+	margin-left: auto;
+	margin-right: auto;
+	text-align: center;
+}
+
+div.flex-container {
+	display: flex;
+}
+
+/* makes the first line indented */
+div.indent, p.indent {
+	text-indent: 2em;
+}
+
+div.double-indent, p.double-indent {
+	text-indent: 4em;
+}
+
+/* makes every line indented */
+.choices, .choices {
+	margin-left: 2em;
+}
+
+.double-choices, .double-choices {
+	margin-left: 4em;
+}
+
+div.grid-2columns-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)
+}
+
+.aquamarine, .aquamarine a, .skill, .skill a {
+	color: aquamarine
+}
+
+.coral, .coral a, .fetish.loss, .fetish.loss a {
+	color: coral
+}
+
+/* used for aphrodisiac & neighbor arcs */
+.cyan, .cyan a, .hotkey {
+	color: cyan
+}
+
+.darkgoldenrod, .darkgoldenrod a, .trust.extremely-terrified, .trust.extremely-terrified a {
+	color: darkgoldenrod
+}
+
+.darkred, .darkred a, .defiant.full, .defiant.full a {
+	color: darkred
+}
+
+.darkviolet, .darkviolet a, .devotion.hateful, .devotion.hateful a {
+	color: darkviolet
+}
+
+/* used for devotion once & agent */
+.deeppink, .deeppink a, .devotion.devoted, .devotion.devoted a {
+	color: deeppink
+}
+
+.steelblue, .steelblue a {
+	color: steelblue
+}
+
+.deepskyblue, .deepskyblue a, .intelligent, .intelligent a {
+	color: deepskyblue
+}
+
+.dodgerblue, .dodgerblue a {
+	color: dodgerblue
+}
+
+.blue, .blue a {
+	color: blue
+}
+
+.gold, .gold a, .trust.dec, .trust.dec a, .trust.frightened, .trust.frightened a {
+	color: gold
+}
+
+.goldenrod, .goldenrod a, .trust.terrified, .trust.terrified a {
+	color: goldenrod
+}
+
+.gray, .gray a {
+	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, .prestigious,
+.prosperity.inc {
+	color: green
+}
+
+.hotpink, .hotpink a, .devotion.inc, .devotion.inc a, .devotion.accept, .devotion.accept a {
+	color: hotpink
+}
+
+.lawngreen, .lawngreen a {
+	color: lawngreen
+}
+
+.lightblue, .lightblue a {
+	color: lightblue
+}
+
+/* compare pink for fetish */
+.lightcoral, .lightcoral a, .fetish.gain, .fetish.gain a {
+	color: lightcoral
+}
+
+.lightgreen, .lightgreen a, .relationship, .relationship a, .rivalry.dec, .rivalry.dec a {
+	color: lightgreen
+}
+
+.lightpink, .lightpink a {
+	color: lightpink
+}
+
+.lightsalmon, .lightsalmon a, .fetish.inc, .fetish.inc a, .rivalry.inc, .rivalry.inc a,
+.relationship.dec, .relationship.dec a {
+	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
+}
+
+/* multiple questionable uses */
+.limegreen, .limegreen a {
+	color: limegreen
+}
+
+.magenta, .magenta a, .devotion.worship, .devotion.worship a {
+	color: magenta
+}
+
+.mediumaquamarine, .mediumaquamarine a, .trust.inc, .trust.inc a, .trust.careful, .trust.careful a {
+	color: mediumaquamarine
+}
+
+.mediumorchid, .mediumorchid a, .devotion.dec, .devotion.dec a, .devotion.resistant, .devotion.resistant a {
+	color: mediumorchid
+}
+
+.mediumseagreen, .mediumseagreen a, .trust.trusting, .trust.trusting a {
+	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, .period, .period a, .hindrance.mid, .intro.question {
+	color: orange
+}
+
+.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
+}
+
+/* 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, .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
+}
+
+.springgreen, .springgreen a, .skill.player, .skill.player a {
+	color: springgreen
+}
+
+/* some ethnicity */
+.tan, .tan a {
+	color: tan
+}
+
+.chocolate, .chocolate a, .food {
+	color: chocolate
+}
+
+.saddlebrown, .saddlebrown a {
+	color: saddlebrown
+}
+
+.teal, .teal a {
+	color: teal
+}
+
+.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
+}
+
+.yellowgreen, .yellowgreen a, .cash.inc, .cash.inc a, .cash, .cash a {
+	color: yellowgreen
+}
+
+.cash.note {
+	color: seagreen;
+}
+
+.white a {
+	color: white
+}
+
+.violet, .libido.inc {
+	color: violet
+}
+
+.khaki, .libido.dec {
+	color: khaki
+}
+
+.race, .nationality {
+	color: tan
+}

css/gui/accordion.css

+/* --- base functionality --- */
+
+.accordion-content.hidden {
+	display: none;
+}
+
+/* --- no button case --- */
+
+:not(button).accordion {
+	cursor: pointer;
+}
+
+/* --- button/div case --- */
+
+/* style button */
+button.accordion {
+	width: 100%;
+	margin: 5px 0;
+	border: 2px solid var(--button-border-color);
+	padding: 10px;
+	padding-left: 2.2em;
+	background-color: var(--button-selected-color);
+	/* to position the open/close symbol */
+	position: relative;
+}
+
+button.accordion.closed {
+	background-color: var(--button-color);
+}
+
+button.accordion.empty {
+	background-color: var(--button-disabled-color);
+	cursor: default;
+}
+
+button.accordion:hover:not(.empty) {
+	background-color: var(--button-hover-color);
+}
+
+/* open/close symbol */
+button.accordion::before {
+	font-family: "sc-icons";
+	position: absolute;
+	left: 10px;
+	content: "\f078";
+}
+
+button.accordion.closed::before {
+	content: "\f054";
+}
+
+button.accordion.empty::before {
+	content: none;
+}
+
+/* hide content */
+div.accordion-content {
+	margin: 0 15px;
+}
+
+/* modifiers for the toggle button */
+button.accordion span.title {
+	float: left;
+}
+
+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;
+}
+
+.not-favorite, .not-favorite:hover {
+	color: grey;
+	text-decoration: none;
+}

css/gui/hotkeySettings.css

+div.hotkey-settings {
+	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 div.description {
+	margin-right: 10px;
+	/* center text vertically */
+	display: flex;
+	justify-content: center;
+	flex-direction: column;
+}
+
+div.hotkey-settings button {
+	margin: 5px;
+	border-width: 2px;
+	width: 70px;
+}
+
+div.hotkey-settings button.combination {
+	min-width: 150px;
+	border-width: 0;
+}
+
+div.hotkey-settings button:disabled {
+	background-color: var(--button-selected-color);
+}

css/gui/linksStrip.css

+ul.choices-strip {
+	display: inline;
+	list-style-type: none;
+	padding: 0;
+	margin-left: 0;
+}
+
+ul.choices-strip li {
+	display: inline;
+}
+
+ul.choices-strip li + li:before {
+	content: " | ";
+}
+
+a.disabled {
+	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: 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;
+}
+
+/* right side */
+div.options-group div.button-group {
+	margin: 6px 0;
+}
+
+.button-group button {
+	color: var(--link-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);
+	margin-left: 2px;
+	/* half the outline width for multirow buttongroups */
+	margin-top: 1px;
+	margin-bottom: 1px;
+}
+
+.button-group button:hover {
+	color: var(--link-hover-color)
+}
+
+.button-group button.selected {
+	background-color: var(--button-selected-color);
+}
+
+.button-group button.disabled {
+	color: white;
+	pointer-events: none;
+	cursor: default;
+}
+
+div.options-group button.selected.on {
+	background-color: #103d10;
+}
+
+div.options-group button.on:hover {
+	background-color: #1b651b;
+}
+
+div.options-group button.selected.off {
+	background-color: #40100d;
+}
+
+div.options-group button.off:hover {
+	background-color: #6a1b16;
+}
+
+div.options-group .comment {
+	color: gray;
+	font-style: italic;
+	margin-left: 10px;
+}
+
+/* input box */
+div.options-group input {
+	border: 2px solid var(--button-border-color);
+	min-width: unset; /* remove SC styling */
+	width: 12em;
+	/* move back so that the outline of a potential select overlaps in front */
+	position: relative;
+	z-index: 0;
+}
+
+.options-group input:hover, .options-group input:focus {
+	/* show highlighted border in front of neighbours */
+	z-index: 1
+}
+
+div.options-group input.number {
+	width: 4em;
+}
+
+div.options-group input.full-width {
+	width: 100%;
+}
+
+/* custom row */
+.options-group .custom-row {
+	grid-column-start: span 2;
+	width: 70vw
+}
+
+.options-group select {
+	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);
+	margin-left: 2px;
+	min-width: 12em;
+	/* move in front of a potential textbox, so the outline overlaps the border of the textbox */
+	position: relative;
+	z-index: 1;
+}
+
+.options-group select:hover {
+	outline: solid 2px #eee;
+}
+
+/* double column */
+@media only screen and (min-width: 1600px) {
+	.options-group.double {
+		grid-template-columns: max-content auto max-content auto;
+	}
+
+	.options-group.double .custom-row {
+		width: 35vw
+	}
+}
+
+/* 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%;
+	text-align: center;
+	margin-top: 1.5em;
+}
+
+.scLink {
+	width: 85%;
+	text-align: center;
+}
+.scLink2 {
+	width: 73%;
+	text-align: center;
+}
+
+table.invisible {
+	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

+.quick-links {
+	/* Give quick links as much space as possible, any more and it start looking wrong. */
+	margin-right: -7px;
+	margin-left: -7px;
+}
+
+.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;
+}
+
+.quick-links .toggle:hover {
+	background-color: #5f5f5f;
+}
+
+.quick-links .toggle::before {
+	font-family: "sc-icons";
+	position: absolute;
+	left: 5px;
+	content: "\f0d7";
+}
+
+.quick-links div.collapsed .toggle::before {
+	content: "\f0da";
+}
+
+.quick-links div.content {
+	margin: 0 5px;
+}
+
+.quick-links div.collapsed div.content {
+	display: none
+}
+
+.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: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;
+}
+
+/* notification */
+.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: "sc-icons";
+	position: absolute;
+	right: 5px;
+	top: 0;
+	content: "\f06a";
+	color: yellow;
+}