Styling

css/facilities/facilities.css

-.margin-top {
-	margin-top: 1em;
-}
-
-.margin-bottom {
-	margin-bottom: 1em;
-}

css/general/formatting.css

@@ -81,3 +81,27 @@ input:out-of-range {
 .uppercase {
     text-transform: uppercase;
 }
+
+.text-center {
+    text-align: center;
+}
+
+.margin-top {
+	margin-top: 1em;
+}
+
+.margin-bottom {
+	margin-bottom: 1em;
+}
+
+.margin-left {
+    margin-left: 1em;
+}
+
+.margin-right {
+    margin-right: 1em;
+}
+
+#arcology-building-container {
+	margin-bottom: 2em;
+}

src/js/main.js

@@ -196,47 +196,50 @@ App.MainView.full = function() {
 	function mainMenu() {
 		const div = document.createElement("div");
 
-		div.append(App.UI.DOM.makeElement("span", "MAIN MENU", "name"));
+		const links = [];
 
-		App.UI.DOM.appendNewElement("span", div, App.UI.DOM.passageLink("Summary Options", "Summary Options"),
-			["choices", "note"]);
+		App.UI.DOM.appendNewElement("div", div, `Main Menu`, ['margin-top', 'bold', 'uppercase', 'text-center']);
+
+		links.push(App.UI.DOM.passageLink("Summary Options", "Summary Options"));
 
 		if (V.rulesAssistantMain !== 0) {
-			div.append(" | ");
-			const raLink = document.createElement("span");
-			raLink.classList.add("note");
-			raLink.id = "RAButton";
-			raLink.append(App.UI.DOM.passageLink("Rules Assistant Options", "Rules Assistant"));
-			div.append(raLink, " ",
-				App.UI.DOM.makeElement("span", App.UI.Hotkeys.hotkeys("Rules Assistant"), "hotkey"));
-
-			div.append(" | ");
+			const RALink = App.UI.DOM.passageLink("Rules Assistant Options", "Rules Assistant");
+
+			RALink.append(' ', App.UI.DOM.makeElement("span", App.UI.Hotkeys.hotkeys("Rules Assistant"), "hotkey"));
+			links.push(RALink);
+
 			if (V.rulesAssistantAuto !== 1) {
-				App.UI.DOM.appendNewElement("span", div,
-					App.UI.DOM.passageLink("Apply Rules Assistant at week end", "Main", () => {
-						V.rulesAssistantAuto = 1;
-					}), "note");
+				links.push(App.UI.DOM.link(`Apply Rules Assistant at week end`, () => {
+					V.rulesAssistantAuto = 1;
+
+					App.UI.reload();
+				}));
 			} else {
-				App.UI.DOM.appendNewElement("span", div,
-					App.UI.DOM.passageLink("Stop applying Rules Assistant at week end", "Main", () => {
-						V.rulesAssistantAuto = 0;
-					}), "note");
+				links.push(App.UI.DOM.link(`Stop applying Rules Assistant at week end`, () => {
+					V.rulesAssistantAuto = 0;
+
+					App.UI.reload();
+				}));
 			}
-			div.append(" | ");
+
+			links.push(App.UI.DOM.link(`Re-apply Rules Assistant now`, () => {
+				for (const slave of V.slaves) {
+					if (assignmentVisible(slave) && slave.useRulesAssistant === 1) {
+						DefaultRules(slave);
+					}
+				}
+
+				App.UI.reload();
+			}, null, '', `This will only check slaves in the Penthouse.`));
+
 			if (DefaultRulesError()) {
 				App.UI.DOM.appendNewElement("span", div, "WARNING: One or more rules' custom conditions has errors!",
 					["note", "warning"]);
 			}
-			App.UI.DOM.appendNewElement("span", div,
-				App.UI.DOM.passageLink("Re-apply Rules Assistant now (this will only check slaves in the Penthouse)",
-					"Main", () => {
-						for (const slave of V.slaves) {
-							if (assignmentVisible(slave) && slave.useRulesAssistant === 1) {
-								DefaultRules(slave);
-							}
-						}
-					}), "note");
 		}
+
+		App.UI.DOM.appendNewElement("div", div, App.UI.DOM.generateLinksStrip(links), ['note', 'margin-left', 'margin-bottom']);
+
 		return div;
 	}
 
@@ -273,7 +276,10 @@ App.MainView.full = function() {
 	 * @returns {DocumentFragment}
 	 */
 	function assemble() {
-		const fragment = document.createDocumentFragment();
+		const fragment = new DocumentFragment();
+
+		App.UI.DOM.appendNewElement("h1", fragment, V.arcologies[0].name, ['margin-bottom', 'text-center']);
+
 		if (V.newModelUI === 1) {
 			fragment.append(V.building.render());
 		}