diff --git a/build/index.php b/build/index.php
index c5b4a20..0ae62a0 100644
--- a/build/index.php
+++ b/build/index.php
@@ -290,7 +290,8 @@ $settings->sessionprefix = preg_replace("/[^0-9a-z]/i", "", strtolower($settings
 // A string of css to include. Will be included in the <head> of every page
 // inside a <style> tag. This may also be a url - urls will be referenced via a
 // <link rel='stylesheet' /> tag.
-$settings->css = "body { margin: 2rem 0; background: #eee8f2; line-height: 1.45em; color: #111111; font-family: sans-serif; }
+$settings->css = <<<THEMECSS
+body { margin: 2rem 0; background: #eee8f2; line-height: 1.45em; color: #111111; font-family: sans-serif; }
 
 nav { display: flex; background-color: #8a62a7; color: #ffa74d;  }
 nav.top { position: absolute; top: 0; left: 0; right: 0; box-shadow: inset 0 -0.6rem 0.8rem -0.5rem rgba(50, 50, 50, 0.5); }
@@ -319,8 +320,8 @@ input[type=button], input[type=submit] { cursor: pointer; }
 .sidebar ul { position: relative; margin: 0.3rem 0.3rem 0.3rem 1rem; padding: 0.3rem 0.3rem 0.3rem 1rem; list-style-type: none; }
 .sidebar li { position: relative; margin: 0.3rem; padding: 0.3rem; }
 
-.sidebar ul:before { content: \"\"; position: absolute; top: 0; left: 0; height: 100%; border-left: 2px dashed rgba(50, 50, 50, 0.4); }
-.sidebar li:before { content: \"\"; position: absolute; width: 1rem; top: 0.8rem; left: -1.2rem; border-bottom: 2px dashed rgba(50, 50, 50, 0.4); }
+.sidebar ul:before { content: ""; position: absolute; top: 0; left: 0; height: 100%; border-left: 2px dashed rgba(50, 50, 50, 0.4); }
+.sidebar li:before { content: ""; position: absolute; width: 1rem; top: 0.8rem; left: -1.2rem; border-bottom: 2px dashed rgba(50, 50, 50, 0.4); }
 
 .preview { text-align: center; }
 .preview img, .preview video, .preview audio { max-width: 100%; }
@@ -345,7 +346,7 @@ a.redlink:visited { color: rgb(130, 15, 15); #8b1a1a }
 
 .search-result { position: relative; }
 .search-result::before { content: attr(data-result-number); position: relative; top: 3.2rem; color: rgba(33, 33, 33, 0.3); font-size: 2rem; }
-.search-result::after { content: \"Rank: \" attr(data-rank); position: absolute; top: 3.8rem; right: 0.7rem; color: rgba(50, 50, 50, 0.3); }
+.search-result::after { content: "Rank: " attr(data-rank); position: absolute; top: 3.8rem; right: 0.7rem; color: rgba(50, 50, 50, 0.3); }
 .search-result > h2 { margin-left: 2rem; }
 
 label:not(.link-display-label) { display: inline-block; min-width: 7rem; }
@@ -363,7 +364,7 @@ textarea ~ input[type=submit] { margin: 0.5rem 0; padding: 0.5rem; font-weight:
 .page-tags-display { margin: 0.5rem 0 0 0; padding: 0; list-style-type: none; }
 .page-tags-display li { display: inline-block; margin: 0.5rem; padding: 0.5rem; background: #D2C3DD; white-space: nowrap; }
 .page-tags-display li a { color: #FB701A; text-decoration: none; }
-.page-tags-display li::before { content: \"\\A\"; position: relative; top: 0.03rem; left: -0.9rem; width: 0; height: 0; border-top: 0.6rem solid transparent; border-bottom: 0.6rem solid transparent; border-right: 0.5rem solid #D2C3DD; }
+.page-tags-display li::before { content: "\\A"; position: relative; top: 0.03rem; left: -0.9rem; width: 0; height: 0; border-top: 0.6rem solid transparent; border-bottom: 0.6rem solid transparent; border-right: 0.5rem solid #D2C3DD; }
 
 .page-list { list-style-type: none; margin: 0.3rem; padding: 0.3rem; }
 .page-list li:not(.header) { margin: 0.3rem; padding: 0.3rem; }
@@ -374,7 +375,7 @@ textarea ~ input[type=submit] { margin: 0.5rem 0; padding: 0.5rem; font-weight:
 .tag-list li { display: inline-block; margin: 1rem; }
 .mini-tag { background: #d2c3dd; padding: 0.2rem 0.4rem; color: #fb701a; text-decoration: none; }
 
-.help-section-header::after { content: \"#\" attr(id); float: right; color: rgba(0, 0, 0, 0.4); font-size: 0.8rem; font-weight: normal; }
+.help-section-header::after { content: "#" attr(id); float: right; color: rgba(0, 0, 0, 0.4); font-size: 0.8rem; font-weight: normal; }
 
 .cursor-query { cursor: help; }
 
@@ -390,11 +391,12 @@ summary { cursor: pointer; }
 .diff-added { background-color: rgba(31, 171, 36, 0.6); color: rgba(23, 125, 27, 1); }
 .diff-removed { background-color: rgba(255, 96, 96, 0.6); color: rgba(191, 38, 38, 1); }
 
-.newpage::before { content: \"N\"; margin: 0 0.3em 0 -1em; font-weight: bolder; text-decoration: underline dotted; }
-.upload::before { content: \"\\1f845\"; margin: 0 0.1em 0 -1.1em; }
+.newpage::before { content: "N"; margin: 0 0.3em 0 -1em; font-weight: bolder; text-decoration: underline dotted; }
+.upload::before { content: "\1f845"; margin: 0 0.1em 0 -1.1em; }
 
 footer { padding: 2rem; }
-/* #ffdb6d #36962c */";
+/* #ffdb6d #36962c */
+THEMECSS;
 
 /*** Notes ***
 Actions:
diff --git a/settings.fragment.php b/settings.fragment.php
index b31bddf..f44b96a 100644
--- a/settings.fragment.php
+++ b/settings.fragment.php
@@ -287,7 +287,8 @@ $settings->sessionprefix = preg_replace("/[^0-9a-z]/i", "", strtolower($settings
 // A string of css to include. Will be included in the <head> of every page
 // inside a <style> tag. This may also be a url - urls will be referenced via a
 // <link rel='stylesheet' /> tag.
-$settings->css = "body { margin: 2rem 0; background: #eee8f2; line-height: 1.45em; color: #111111; font-family: sans-serif; }
+$settings->css = <<<THEMECSS
+body { margin: 2rem 0; background: #eee8f2; line-height: 1.45em; color: #111111; font-family: sans-serif; }
 
 nav { display: flex; background-color: #8a62a7; color: #ffa74d;  }
 nav.top { position: absolute; top: 0; left: 0; right: 0; box-shadow: inset 0 -0.6rem 0.8rem -0.5rem rgba(50, 50, 50, 0.5); }
@@ -316,8 +317,8 @@ input[type=button], input[type=submit] { cursor: pointer; }
 .sidebar ul { position: relative; margin: 0.3rem 0.3rem 0.3rem 1rem; padding: 0.3rem 0.3rem 0.3rem 1rem; list-style-type: none; }
 .sidebar li { position: relative; margin: 0.3rem; padding: 0.3rem; }
 
-.sidebar ul:before { content: \"\"; position: absolute; top: 0; left: 0; height: 100%; border-left: 2px dashed rgba(50, 50, 50, 0.4); }
-.sidebar li:before { content: \"\"; position: absolute; width: 1rem; top: 0.8rem; left: -1.2rem; border-bottom: 2px dashed rgba(50, 50, 50, 0.4); }
+.sidebar ul:before { content: ""; position: absolute; top: 0; left: 0; height: 100%; border-left: 2px dashed rgba(50, 50, 50, 0.4); }
+.sidebar li:before { content: ""; position: absolute; width: 1rem; top: 0.8rem; left: -1.2rem; border-bottom: 2px dashed rgba(50, 50, 50, 0.4); }
 
 .preview { text-align: center; }
 .preview img, .preview video, .preview audio { max-width: 100%; }
@@ -342,7 +343,7 @@ a.redlink:visited { color: rgb(130, 15, 15); #8b1a1a }
 
 .search-result { position: relative; }
 .search-result::before { content: attr(data-result-number); position: relative; top: 3.2rem; color: rgba(33, 33, 33, 0.3); font-size: 2rem; }
-.search-result::after { content: \"Rank: \" attr(data-rank); position: absolute; top: 3.8rem; right: 0.7rem; color: rgba(50, 50, 50, 0.3); }
+.search-result::after { content: "Rank: " attr(data-rank); position: absolute; top: 3.8rem; right: 0.7rem; color: rgba(50, 50, 50, 0.3); }
 .search-result > h2 { margin-left: 2rem; }
 
 label:not(.link-display-label) { display: inline-block; min-width: 7rem; }
@@ -360,7 +361,7 @@ textarea ~ input[type=submit] { margin: 0.5rem 0; padding: 0.5rem; font-weight:
 .page-tags-display { margin: 0.5rem 0 0 0; padding: 0; list-style-type: none; }
 .page-tags-display li { display: inline-block; margin: 0.5rem; padding: 0.5rem; background: #D2C3DD; white-space: nowrap; }
 .page-tags-display li a { color: #FB701A; text-decoration: none; }
-.page-tags-display li::before { content: \"\\A\"; position: relative; top: 0.03rem; left: -0.9rem; width: 0; height: 0; border-top: 0.6rem solid transparent; border-bottom: 0.6rem solid transparent; border-right: 0.5rem solid #D2C3DD; }
+.page-tags-display li::before { content: "\\A"; position: relative; top: 0.03rem; left: -0.9rem; width: 0; height: 0; border-top: 0.6rem solid transparent; border-bottom: 0.6rem solid transparent; border-right: 0.5rem solid #D2C3DD; }
 
 .page-list { list-style-type: none; margin: 0.3rem; padding: 0.3rem; }
 .page-list li:not(.header) { margin: 0.3rem; padding: 0.3rem; }
@@ -371,7 +372,7 @@ textarea ~ input[type=submit] { margin: 0.5rem 0; padding: 0.5rem; font-weight:
 .tag-list li { display: inline-block; margin: 1rem; }
 .mini-tag { background: #d2c3dd; padding: 0.2rem 0.4rem; color: #fb701a; text-decoration: none; }
 
-.help-section-header::after { content: \"#\" attr(id); float: right; color: rgba(0, 0, 0, 0.4); font-size: 0.8rem; font-weight: normal; }
+.help-section-header::after { content: "#" attr(id); float: right; color: rgba(0, 0, 0, 0.4); font-size: 0.8rem; font-weight: normal; }
 
 .cursor-query { cursor: help; }
 
@@ -387,11 +388,12 @@ summary { cursor: pointer; }
 .diff-added { background-color: rgba(31, 171, 36, 0.6); color: rgba(23, 125, 27, 1); }
 .diff-removed { background-color: rgba(255, 96, 96, 0.6); color: rgba(191, 38, 38, 1); }
 
-.newpage::before { content: \"N\"; margin: 0 0.3em 0 -1em; font-weight: bolder; text-decoration: underline dotted; }
-.upload::before { content: \"\\1f845\"; margin: 0 0.1em 0 -1.1em; }
+.newpage::before { content: "N"; margin: 0 0.3em 0 -1em; font-weight: bolder; text-decoration: underline dotted; }
+.upload::before { content: "\1f845"; margin: 0 0.1em 0 -1.1em; }
 
 footer { padding: 2rem; }
-/* #ffdb6d #36962c */";
+/* #ffdb6d #36962c */
+THEMECSS;
 
 /*** Notes ***
 Actions:
diff --git a/theme.css b/theme.css
new file mode 100644
index 0000000..6c6aea5
--- /dev/null
+++ b/theme.css
@@ -0,0 +1,105 @@
+body { margin: 2rem 0; background: #eee8f2; line-height: 1.45em; color: #111111; font-family: sans-serif; }
+
+nav { display: flex; background-color: #8a62a7; color: #ffa74d;  }
+nav.top { position: absolute; top: 0; left: 0; right: 0; box-shadow: inset 0 -0.6rem 0.8rem -0.5rem rgba(50, 50, 50, 0.5); }
+nav.bottom { position: absolute; left: 0; right: 0; box-shadow: inset 0 0.8rem 0.8rem -0.5rem rgba(50, 50, 50, 0.5); }
+
+nav > span { flex: 1; text-align: center; line-height: 2; display: inline-block; margin: 0; padding: 0.3rem 0.5rem; border-left: 3px solid #442772; border-right: 3px solid #442772; }
+nav:not(.nav-more-menu) a { text-decoration: none; font-weight: bolder; color: inherit; }
+.nav-divider { color: transparent; }
+
+.nav-more { position: relative; background-color: #442772; }
+.nav-more label { cursor: pointer; }
+.nav-more-menu { display: none; position: absolute; flex-direction: column; top: 2.6rem; right: -0.2rem; background-color: #8a62a7; border-top: 3px solid #442772; border-bottom: 3px solid #442772;}
+input[type=checkbox]:checked ~ .nav-more-menu { display: block; box-shadow: 0.4rem 0.4rem 1rem 0 rgba(50, 50, 50, 0.5); }
+.nav-more-menu span { min-width: 10rem; }
+
+.inflexible { flex: none; }
+.off-screen { position: absolute; top: -1000px; left: -1000px;}
+
+input[type=search] { width: 14rem; padding: 0.3rem 0.4rem; font-size: 1rem; color: white; background: rgba(255, 255, 255, 0.4); border: 0; border-radius: 0.3rem; }
+input[type=search]::-webkit-input-placeholder { color : rgba(255, 255, 255, 0.75); }
+input[type=button], input[type=submit] { cursor: pointer; }
+
+.sidebar { position: relative; z-index: 100; margin-top: 0.6rem; padding: 1rem 3rem 2rem 0.4rem; background: #9e7eb4; box-shadow: inset -0.6rem 0 0.8rem -0.5rem rgba(50, 50, 50, 0.5); }
+.sidebar a { color: #ffa74d; }
+
+.sidebar ul { position: relative; margin: 0.3rem 0.3rem 0.3rem 1rem; padding: 0.3rem 0.3rem 0.3rem 1rem; list-style-type: none; }
+.sidebar li { position: relative; margin: 0.3rem; padding: 0.3rem; }
+
+.sidebar ul:before { content: ""; position: absolute; top: 0; left: 0; height: 100%; border-left: 2px dashed rgba(50, 50, 50, 0.4); }
+.sidebar li:before { content: ""; position: absolute; width: 1rem; top: 0.8rem; left: -1.2rem; border-bottom: 2px dashed rgba(50, 50, 50, 0.4); }
+
+.preview { text-align: center; }
+.preview img, .preview video, .preview audio { max-width: 100%; }
+.image-controls ul { list-style-type: none; margin: 5px; padding: 5px; }
+.image-controls li { display: inline-block; margin: 5px; padding: 5px; }
+.link-display { margin-left: 0.5rem; }
+
+figcaption { text-align: center; }
+
+.printable { padding: 2rem; }
+
+h1 { text-align: center; }
+.sitename { margin-top: 5rem; margin-bottom: 3rem; font-size: 2.5rem; }
+.logo { max-width: 4rem; max-height: 4rem; vertical-align: middle; }
+.logo.small { max-width: 2rem; max-height: 2rem; }
+main:not(.printable) { padding: 2rem 2rem 0.5rem 2rem; background: #faf8fb; box-shadow: 0 0.1rem 1rem 0.3rem rgba(50, 50, 50, 0.5); }
+
+blockquote { padding-left: 1em; border-left: 0.2em solid #442772; border-radius: 0.2rem; }
+
+a.redlink:link { color: rgb(230, 7, 7); }
+a.redlink:visited { color: rgb(130, 15, 15); #8b1a1a }
+
+.search-result { position: relative; }
+.search-result::before { content: attr(data-result-number); position: relative; top: 3.2rem; color: rgba(33, 33, 33, 0.3); font-size: 2rem; }
+.search-result::after { content: "Rank: " attr(data-rank); position: absolute; top: 3.8rem; right: 0.7rem; color: rgba(50, 50, 50, 0.3); }
+.search-result > h2 { margin-left: 2rem; }
+
+label:not(.link-display-label) { display: inline-block; min-width: 7rem; }
+input[type=text]:not(.link-display), input[type=password], textarea { margin: 0.5rem 0; }
+input[type=text], input[type=password], textarea, #search-box { padding: 0.5rem 0.8rem; background: #d5cbf9; border: 0; border-radius: 0.3rem; font-size: 1rem; color: #442772; }
+textarea { min-height: 35rem; line-height: 1.3em; font-size: 1.25rem; }
+textarea, textarea ~ input[type=submit], #search-box { width: calc(100% - 0.3rem); box-sizing: border-box; }
+textarea ~ input[type=submit] { margin: 0.5rem 0; padding: 0.5rem; font-weight: bolder; }
+.editform input[type=text] { width: calc(100% - 0.3rem); box-sizing: border-box; }
+
+.file-gallery { margin: 0.5em; padding: 0.5em; list-style-type: none; }
+.file-gallery > li { display: inline-block; min-width: attr(data-gallery-width); padding: 1em; text-align: center; }
+.file-gallery > li img, .file-gallery > li video, .file-gallery > li audio { display: block; margin: 0 auto; background-color: white; }
+
+.page-tags-display { margin: 0.5rem 0 0 0; padding: 0; list-style-type: none; }
+.page-tags-display li { display: inline-block; margin: 0.5rem; padding: 0.5rem; background: #D2C3DD; white-space: nowrap; }
+.page-tags-display li a { color: #FB701A; text-decoration: none; }
+.page-tags-display li::before { content: "\\A"; position: relative; top: 0.03rem; left: -0.9rem; width: 0; height: 0; border-top: 0.6rem solid transparent; border-bottom: 0.6rem solid transparent; border-right: 0.5rem solid #D2C3DD; }
+
+.page-list { list-style-type: none; margin: 0.3rem; padding: 0.3rem; }
+.page-list li:not(.header) { margin: 0.3rem; padding: 0.3rem; }
+.page-list li .size { margin-left: 0.7rem; color: rgba(30, 30, 30, 0.5); }
+.page-list li .editor { display: inline-block; margin: 0 0.5rem; }
+.page-list li .tags { margin: 0 1rem; }
+.tag-list { list-style-type: none; margin: 0.5rem; padding: 0.5rem; }
+.tag-list li { display: inline-block; margin: 1rem; }
+.mini-tag { background: #d2c3dd; padding: 0.2rem 0.4rem; color: #fb701a; text-decoration: none; }
+
+.help-section-header::after { content: "#" attr(id); float: right; color: rgba(0, 0, 0, 0.4); font-size: 0.8rem; font-weight: normal; }
+
+.cursor-query { cursor: help; }
+
+summary { cursor: pointer; }
+
+.larger { color: rgb(9, 180, 0); }
+.smaller, .deletion { color: rgb(207, 28, 17); }
+.nochange { color: rgb(132, 123, 199); font-style: italic; }
+.significant { font-weight: bolder; font-size: 1.1rem; }
+.deletion, .deletion > .editor { text-decoration: line-through; }
+
+.highlighted-diff { white-space: pre-wrap; }
+.diff-added { background-color: rgba(31, 171, 36, 0.6); color: rgba(23, 125, 27, 1); }
+.diff-removed { background-color: rgba(255, 96, 96, 0.6); color: rgba(191, 38, 38, 1); }
+
+.newpage::before { content: "N"; margin: 0 0.3em 0 -1em; font-weight: bolder; text-decoration: underline dotted; }
+.upload::before { content: "\1f845"; margin: 0 0.1em 0 -1.1em; }
+
+footer { padding: 2rem; }
+/* #ffdb6d #36962c */
