Initial commit.

Signed-off-by: Andreas Widen <andreas@harmonicflow.org>

13 files changed, 1261 insertions, 0 deletions

diff --git a/static/base/css/breadcrumbs.css b/static/base/css/breadcrumbs.css
new file mode 100644
index 0000000..623496e
--- /dev/null
+++ b/static/base/css/breadcrumbs.css
@@ -0,0 +1,37 @@
+/* Harmonic Flow web site */
+/* Public domain 2017. All rights waived */
+
+.breadcrumbs {
+    background-color: white;
+    background-image: url("../img/breadcrumbs-bg.png");
+    color: #E6E6E6;
+    font-size: 0.8em;
+    padding: 0px 15px;
+}
+
+.breadcrumbs span {
+    display: inline-block;
+    font-size: 0.7em;
+    line-height: 2em;
+    padding: 0px 5px;
+}
+
+.crumb:link,
+.crumb:visited {
+    border-style: none;
+    color: #E6E6E6;
+    display: inline-block;
+    line-height: 2em;
+    padding: 0px 5px;
+}
+
+.crumb:active,
+.crumb:focus,
+.crumb:hover {
+    color: #FADE8B;
+}
+
+.crumb-active:link,
+.crumb-active:visited {
+    color: #FADE8B;
+}
\ No newline at end of file
diff --git a/static/base/css/buttons.css b/static/base/css/buttons.css
new file mode 100644
index 0000000..93175d0
--- /dev/null
+++ b/static/base/css/buttons.css
@@ -0,0 +1,63 @@
+/* Harmonic Flow web site */
+/* Public domain 2017. All rights waived */
+
+.button-big,
+.button-big:link,
+.button-big:visited {
+    border-color: #F4BB15;
+    border-radius: 6px;
+    border-style: solid;
+    border-width: thin;
+    color: black;
+    display: inline-block;
+    font-size: 0.8em;
+    height: 47px;
+    line-height: 47px;
+    margin: 10px;
+    padding: 0px 30px;
+    text-align: center;
+    vertical-align: middle;
+}
+
+.button-big:active,
+.button-big:focus,
+.button-big:hover {
+    border-color: black;
+}
+
+.button-light,
+.button-light:link,
+.button-light:visited {
+    color: white;
+}
+
+.button-light:active,
+.button-light:focus,
+.button-light:hover {
+    border-color: white;
+}
+
+
+.button-little,
+.button-little:link,
+.button-little:visited {
+    border-color: #C0C0C0;
+    border-radius: 4px;
+    border-style: solid;
+    border-width: thin;
+    color: #525252;
+    display: inline-block;
+    font-size: 0.8em;
+    margin: 5px;
+    padding: 5px 10px;
+    vertical-align: top;
+}
+
+.button-little-active:link,
+.button-little-active:visited,
+.button-little:active,
+.button-little:focus,
+.button-little:hover {
+    background-color: #FFCC00;
+    border-color: #D4AA00;
+}
diff --git a/static/base/css/common.css b/static/base/css/common.css
new file mode 100644
index 0000000..bdcbb86
--- /dev/null
+++ b/static/base/css/common.css
@@ -0,0 +1,172 @@
+/* Harmonic Flow web site */
+/* Public domain 2017. All rights waived */
+
+
+/* Offset element (A11Y)
+
+   - Hide the element in graphic Web browsers.
+   - But display it in text-based browsers.
+*/
+.a11y-offset {
+    position: absolute;
+    left: -50000px;
+}
+/* END Offset element */
+
+.bold {
+    font-weight: bold;
+}
+
+.centered-block {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.centered-text {
+    text-align: center;
+}
+
+.fineprint {
+    font-size: small;
+}
+
+.float-cleaner {
+    clear: both;
+}
+
+.hidden {
+    visibility: hidden;
+}
+
+.justify {
+    text-align: justify;
+}
+
+.justify-left {
+    text-align: left;
+}
+
+.justify-right {
+    text-align: right;
+}
+
+.mono {
+    font-family: monospace;
+}
+
+.light-text {
+    color: #E6E6E6;
+}
+
+.limit-width {
+    max-width: 960px;
+}
+
+.link-more:link,
+.link-more:visited {
+    background-image: url("../img/more-info-bg.png");
+    background-position: 100% 50%;
+    background-repeat: no-repeat;
+    border-style: none;
+    color: #333;
+    display: inline-block;
+    font-size: 1.2em;
+    line-height: 20px;
+    margin: 20px 0px;
+    padding-right: 30px;
+}
+
+.link-more:active,
+.link-more:focus,
+.link-more:hover {
+    color: black;
+}
+
+.link-more-light:link,
+.link-more-light:visited {
+    color: #E6E6E6;
+}
+
+.link-subtle:link,
+.link-subtle:visited {
+    border-color: transparent;
+    color: #4D4D4D;
+}
+
+.link-subtle:active,
+.link-subtle:focus,
+.link-subtle:hover {
+    border-color: #4D4D4D;
+    color: black;
+}
+
+.link-yellow:link,
+.link-yellow:visited {
+    border-style: none;
+    color: #F4BB15;
+}
+
+.link-yellow:active,
+.link-yellow:focus,
+.link-yellow:hover {
+    color: #F49B15;
+}
+
+.noise-bg {
+    background-color: #333;
+    background-image: url("../img/noise-bg.png");
+}
+
+.page-number-indicator {
+    display: block;
+    font-size: 0.4em;
+    font-weight: normal;
+    padding: 10px 5px;
+}
+
+.page-selector {
+    box-sizing: border-box;
+    padding: 20px;
+}
+
+.unpadded {
+    padding: 0px;
+}
+
+.responsive-image {
+    display: block;
+    height: auto;
+    max-width: 100%;
+}
+
+.sheet {
+    box-sizing: border-box;
+}
+
+.table-box {
+    overflow-x: auto;
+}
+
+.download-table-box {
+    border: none;
+    border-collapse: collapse;
+}
+
+.top-shadow-bg {
+    background-image: url("../img/depression-shadow-top.png");
+    background-repeat: repeat-x;
+}
+
+
+
+@media screen and (min-width: 1280px) {
+    .sheet {
+	display: inline-block;
+	vertical-align: top;
+        width: 75%;
+    }
+
+    .sheet-padded {
+	padding-right: 20px;
+    }
+}
diff --git a/static/base/css/download.css b/static/base/css/download.css
new file mode 100644
index 0000000..a28eb94
--- /dev/null
+++ b/static/base/css/download.css
@@ -0,0 +1,53 @@
+/* Harmonic Flow web site */
+/* Public domain 2017. All rights waived */
+
+.download-box {
+    border-color: #CCC;
+    border-style: none none solid none;
+    border-width: thin;
+    color: #4D4D4D;
+    font-size: 0.9em;
+    padding: 10px;
+    text-align: center;
+}
+
+.download-btn,
+.download-btn:link,
+.download-btn:visited {
+    background-color: #E6E6E6;
+    border-style: none;
+    border-radius: 5px;
+    color: black;
+    display: inline-block;
+    font-weight: bold;
+    margin: 5px;
+    padding: 5px 10px;
+}
+
+.download-btn:active,
+.download-btn:focus,
+.download-btn:hover {
+    background-color: #F4BB15;
+}
+
+.detail-btn {
+    display: inline-block;
+    margin: 0px 5px;
+}
+
+.signature-btn {
+    display: inline-block;
+    margin: 0px 5px;
+}
+
+
+
+@media screen and (min-width: 800px) {
+    .download-box {
+        border-style: solid;
+        display: inline-block;
+        margin: 10px;
+        vertical-align: top;
+        width: 270px;
+    }
+}
diff --git a/static/base/css/elements.css b/static/base/css/elements.css
new file mode 100644
index 0000000..d6cdcef
--- /dev/null
+++ b/static/base/css/elements.css
@@ -0,0 +1,100 @@
+/* Harmonic Flow web site */
+/* Public domain 2017. All rights waived */
+
+a:link, a:visited {
+    border-color: #F4BB15;
+    border-style: none none solid none;
+    border-width: thin;
+    color: #1A1A1A;
+    text-decoration: none;
+}
+
+a:active, a:focus, a:hover {
+    border-color: #F49B15;
+    border-style: none none dashed none;
+    color: black;
+}
+
+a img {
+    border-style: none;
+}
+
+abbr {
+    cursor: help;
+}
+
+blockquote {
+    color: #565656;
+    font-style: italic;
+}
+
+body {
+    font-family: sans-serif;
+    font-size: 16px;
+    margin: 0px;
+}
+
+code {
+    color: maroon;
+    font-size: 0.8em;
+}
+
+code, pre {
+    font-family: monospace;
+}
+
+html {
+    background-color: #333;
+}
+
+main {
+    background-color: white;
+}
+
+pre {
+    /*background-color: #F2EFE4;*/
+    background-color: #f6f6f6;
+    border-style: solid;
+    border-color: #D4CBB6;
+    border-radius: .3em;
+    border-width: thin;
+    overflow: auto;
+    padding: 2em;
+}
+
+pre,
+pre code {
+    color: inherit;
+    font-size: 0.9em;
+}
+
+table {
+    border-collapse: collapse;
+    width: 100%;
+}
+
+table, td, th {
+    border-color: gray;
+    border-style: solid;
+    border-width: thin;
+}
+
+td, th {
+    padding: 5px 10px;
+}
+
+td {
+    font-size: 0.9em;
+}
+
+th {
+    background-color: #F5F5F5;
+}
+
+video {
+    border-color: black;
+    border-style: solid;
+    border-width: thin;
+    box-shadow: 0 0 4px black;
+    max-width: 100%;
+}
diff --git a/static/base/css/footer.css b/static/base/css/footer.css
new file mode 100644
index 0000000..2ed3806
--- /dev/null
+++ b/static/base/css/footer.css
@@ -0,0 +1,14 @@
+/* Harmonic Flow web site */
+/* Public domain 2017. All rights waived */
+
+footer {
+    background-color: #333;
+    color: white;
+    font-size: 0.8em;
+    padding: 20px;
+    text-align: center;
+}
+
+.metta {
+    color: #F4BB15;
+}
diff --git a/static/base/css/index.css b/static/base/css/index.css
new file mode 100644
index 0000000..5f275b1
--- /dev/null
+++ b/static/base/css/index.css
@@ -0,0 +1,170 @@
+/* Harmonic Flow web site */
+/* Public domain 2017. All rights waived */
+
+h2 {
+    color: #4D4D4D;
+    font-size: 2.5em;
+    margin: 50px 0px;
+}
+
+h3 {
+    color: #4D4D4D;
+    font-size: 2.0em;
+    font-weight: normal;
+    margin: 50px 0px;
+}
+
+.action-box {
+    padding: 40px 0px;
+}
+
+.featured-content {
+    background-color: #3D3D3D;
+    background-image: url("../img/checkerboard-bg.png"),
+                      url("../img/featured-box-bg.png");
+    background-position: top, bottom;
+    background-repeat: repeat, repeat-x;
+    color: white;
+    font-size: 17px;
+    padding: 40px 20px;
+    position: relative;
+}
+
+.featured-content > ul {
+    list-style-image: url("../img/white-star.png");
+    margin: auto;
+    max-width: 960px;
+}
+
+.featured-content li {
+    padding: 10px 0px;
+}
+
+.h-separator {
+    display: block;
+    margin: auto;
+    padding: 60px 0px 30px 0px;
+    width: 100%;
+}
+
+.button-big:link,
+.button-big:visited {
+    display: block;
+}
+
+.discovery-box {
+    background-color: #333;
+    background-image: url("../img/depression-shadow-top.png"),
+                      url("../img/noise-bg.png");
+    background-repeat: repeat-x, repeat;
+    color: #E6E6E6;
+    padding: 40px 10px;
+    text-align: center;
+}
+
+.discovery-box h2,
+.discovery-box h3 {
+    color: #E6E6E6;
+}
+
+.screenshots-box {
+    padding: 40px 0px 0px 0px;
+}
+
+.screenshot-preview {
+    font-size: 0.7em;
+    margin: 40px auto;
+    max-width: 250px;
+    text-align: center;
+}
+
+.screenshot-preview a,
+.screenshot-preview img {
+    border-radius: 5px;
+    display: block;
+}
+
+.screenshot-preview a:link,
+.screenshot-preview a:visited {
+    border-color: transparent;
+    border-style: solid;
+    border-width: thin;
+    box-shadow: 0 0 4px gray;
+    color: white;
+    position: relative;
+}
+
+.screenshot-preview a:active,
+.screenshot-preview a:focus,
+.screenshot-preview a:hover {
+    border-color: black;
+    box-shadow: 0 0 4px black;
+}
+
+.fields-box {
+    padding: 40px 0px 0px 0px;
+}
+
+.info-box {
+    display: inline-block;
+    margin: 0px 20px 20px 20px;
+    vertical-align: top;
+}
+
+.contact-box {
+    background-color: #F5F5F5;
+    background-image: url("../img/h-separator-dark.png"),
+                      url("../img/h-separator-dark.png");
+    background-position: top center, bottom center;
+    background-repeat: no-repeat;
+    box-sizing: border-box;
+    color: #4D4D4D;
+    padding: 10px;
+}
+
+
+
+@media screen and (min-width: 300px) {
+    .screenshot-inset-shadow {
+	border-radius: 5px;
+	box-shadow: inset 0 0 4px black;
+	display: block;
+	height: 140px;
+	position: absolute;
+	top: 0px;
+	width: 250px;
+    }
+
+    .screenshot-preview a:active .screenshot-inset-shadow,
+    .screenshot-preview a:focus .screenshot-inset-shadow,
+    .screenshot-preview a:hover .screenshot-inset-shadow {
+	box-shadow: none;
+    }
+}
+
+
+
+@media screen and (min-width: 480px) {
+    .button-big:link,
+    .button-big:visited {
+	display: inline-block;
+    }
+
+    .screenshot-preview {
+	display: inline-block;
+	margin: 15px;
+	vertical-align: top;
+    }
+}
+
+
+
+@media screen and (min-width: 1024px) {
+    .info-box {
+        width: 420px;
+    }
+
+    .h-separator {
+	width: auto;
+    }
+}
diff --git a/static/base/css/item-preview.css b/static/base/css/item-preview.css
new file mode 100644
index 0000000..ab58090
--- /dev/null
+++ b/static/base/css/item-preview.css
@@ -0,0 +1,67 @@
+/* Harmonic Flow web site */
+/* Public domain 2017. All rights waived */
+
+.item-preview,
+.item-preview:link,
+.item-preview:visited {
+    color: #4D4D4D;
+    display: block;
+    padding: 10px 15px;
+    text-align: left;
+}
+
+.item-preview:active,
+.item-preview:focus,
+.item-preview:hover {
+    background-color: #F4BB15;
+}
+
+.item-preview h3 {
+    font-size: 1em;
+    font-weight: bold;
+    margin: 0px;
+}
+
+.item-date {
+    font-size: 0.9em;
+}
+
+
+
+@media screen and (min-width: 1024px) {
+    .item-preview,
+    .item-preview:link,
+    .item-preview:visited {
+        background-color: transparent;
+        border-color: transparent;
+        border-style: solid;
+        border-width: thin;
+        display: inline-block;
+        margin: 10px 0px 15px 0px;
+        vertical-align: top;
+        width: 270px;
+    }
+
+    .item-preview:active,
+    .item-preview:focus,
+    .item-preview:hover {
+        border-color: #F4BB15;
+    }
+
+    .summary-box {
+        color: #4D4D4D;
+        display: inline-block;
+        font-size: 0.9em;
+        margin: 5px;
+        padding: 10px;
+        text-align: left;
+        vertical-align: top;
+        width: 280px;
+    }
+
+    .summary-box img {
+	display: block;
+	margin: 0px auto;
+	max-width: 100%;
+    }
+}
diff --git a/static/base/css/menu.css b/static/base/css/menu.css
new file mode 100644
index 0000000..6354be6
--- /dev/null
+++ b/static/base/css/menu.css
@@ -0,0 +1,123 @@
+/* Harmonic Flow web site */
+/* Public domain 2017. All rights waived */
+
+.navbar {
+    background-color: #333;
+    border-color: #1A1A1A;
+    border-style: none none solid none;
+    border-width: thin;
+    color: white;
+    height: auto;
+}
+
+.navbar > h1 {
+    display: inline-block;
+    margin: 0px;
+}
+
+.branding {
+    position: relative;
+    overflow: hidden;
+}
+
+.branding:link,
+.branding:visited {
+    background-image: url("../img/back-btn-bg.png");
+    background-position: bottom;
+    background-repeat: no-repeat;
+    display: inline-block;
+    height: 55px;
+    width: 55px;
+}
+
+.branding:active,
+.branding:focus,
+.branding:hover {
+    background-image: url("../img/back-btn-bg.png");
+    background-position: top;
+}
+
+.menu {
+    display: block;
+    padding: 0px;
+    position: relative;
+}
+
+.menu ul {
+    background-color: transparent;
+    border-style: none;
+    box-shadow: none;
+    display: block;
+    margin: 0px;
+    padding: 0px;
+    list-style-type: none;
+}
+
+.menu > ul > li,
+.submenu > ul > li {
+    display: block;
+    padding: 0px;
+    position: relative;
+}
+
+.menu-item:link,
+.menu-item:visited {
+    background-color: transparent;
+    background-image: url("../img/link-arrow.png");
+    background-position: 97% 50%;
+    background-repeat: no-repeat;
+    border-color: #1A1A1A;
+    border-style: solid none none none;
+    border-width: thin;
+    color: white;
+    display: block;
+    line-height: 55px;
+    margin: 0px;
+    padding: 0px 0px 0px 10px;
+    text-align: left;
+}
+
+.menu-item:active,
+.menu-item:focus,
+.menu-item:hover,
+.menu-item-active:link,
+.menu-item-active:visited {
+    color: #F4BB15;
+}
+
+.submenu {
+    background-color: #434343;
+    display: block;
+    padding: 0px;
+    position: relative;
+}
+
+.submenu .menu-item:link,
+.submenu .menu-item:visited {
+    background-color: transparent;
+    display: block;
+    font-size: inherit;
+    line-height: 55px;
+    padding: 0px 25px;
+}
+
+.submenu .menu-item:active,
+.submenu .menu-item:focus,
+.submenu .menu-item:hover {
+    background-color: transparent;
+    background-image: url("../img/link-arrow.png");
+    background-position: 97% 50%;
+    background-repeat: no-repeat;
+    display: block;
+    font-size: inherit;
+    line-height: 55px;
+    padding: 0px 25px;
+}
+
+.submenu-triangle {
+    display: none;
+}
+
+.menu-btn:link {
+    display: none;
+}
\ No newline at end of file
diff --git a/static/base/css/messages.css b/static/base/css/messages.css
new file mode 100644
index 0000000..f7ec49c
--- /dev/null
+++ b/static/base/css/messages.css
@@ -0,0 +1,53 @@
+/* Harmonic Flow web site */
+/* Public domain 2017. All rights waived */
+
+.message-box {
+    box-shadow: inset 0px 0px 4px black;
+    color: #F5F5F5;
+    padding: 10px;
+    text-align: center;
+}
+
+.message-box a {
+    color: inherit;
+}
+
+.msg-info {
+    background-color: #144054;
+}
+
+.msg-error {
+    background-color: #993838;
+}
+
+.msg-warning {
+    background-color: #54142C;
+}
+
+.msg-label {
+    font-weight: bold;
+    padding-right: 10px;
+}
+
+.donate-info {
+    background-color: #FFFFFF;
+    color: #000;
+}
+
+.donate-button {
+    background-color: #F4BB15;
+    padding: 5px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.donate-button:hover {
+    background-color: #F7CB50;
+}
+
+.donate-info > a:link, .donate-info > a:visited {
+    color: #000;
+    font-weight: bold;
+    border: none;
+}
diff --git a/static/base/css/navbar.css b/static/base/css/navbar.css
new file mode 100644
index 0000000..df1a761
--- /dev/null
+++ b/static/base/css/navbar.css
@@ -0,0 +1,274 @@
+/* Harmonic Flow web site */
+/* Public domain 2017. All rights waived */
+
+.navbar {
+    background-color: #333;
+    border-color: #1A1A1A;
+    border-style: none none solid none;
+    border-width: thin;
+    color: white;
+    height: 55px;
+    overflow: hidden;
+}
+
+.navbar > h1 {
+    display: inline-block;
+    margin: 0px;
+}
+
+.branding {
+    position: relative;
+    overflow: hidden;
+}
+
+.branding:link,
+.branding:active,
+.branding:focus,
+.branding:hover,
+.branding:visited {
+    background-image: url("../img/hf-logo.png");
+    background-position: bottom;
+    background-repeat: no-repeat;
+    border-style: none;
+    display: inline-block;
+    height: 55px;
+    width: 120px;
+}
+
+.menu {
+    position: relative;
+}
+
+.menu ul {
+    display: block;
+    margin: 0px;
+    padding: 0px;
+    list-style-type: none;
+}
+
+.menu > ul > li {
+    display: block;
+    position: relative;
+}
+
+.menu-hidden-input {
+    display: none;
+}
+
+.menu-item:link,
+.menu-item:visited,
+label.menu-item {
+    background-color: transparent;
+    background-image: url("../img/link-arrow.png");
+    background-position: 97% 50%;
+    background-repeat: no-repeat;
+    border-color: #1A1A1A;
+    border-style: solid none none none;
+    border-width: thin;
+    color: white;
+    display: block;
+    line-height: 55px;
+    padding: 0px 10px;
+    text-align: left;
+}
+
+.menu-item:active,
+.menu-item:focus,
+.menu-item:hover,
+.menu-item-active:link,
+.menu-item-active:visited {
+    color: #F4BB15;
+}
+
+.submenu .menu-item:link,
+.submenu .menu-item:visited {
+    background-color: #434343;
+    padding: 0px 25px;
+}
+
+.menu-btn:link,
+.menu-btn:visited {
+    background-image: url("../img/menu-btn-bg.png");
+    background-position: bottom;
+    background-repeat: no-repeat;
+    border-style: none;
+    display: block;
+    height: 55px;
+    position: absolute;
+    right: 10px;
+    top: 0px;
+    width: 55px;
+}
+
+.menu-btn:active,
+.menu-btn:focus,
+.menu-btn:hover {
+    background-image: url("../img/menu-btn-bg.png");
+    background-position: top;
+}
+
+.hskip {
+    padding-left: 10px;
+}
+
+.hline {
+    display: none;
+}
+
+.languages-dropdown-list {
+    columns: 2;
+}
+
+
+
+@media screen and (min-width: 920px) {
+    .navbar {
+	position: relative;
+	overflow: visible;
+    }
+
+    .menu {
+	display: inline-block;
+	padding-right: 10px;
+        position: absolute;
+        right: 0px;
+    }
+
+    .menu > ul > li {
+	display: inline-block;
+	line-height: 55px;
+    }
+
+    .menu-item:link,
+    .menu-item:visited {
+        background-image: none;
+        border-style: none;
+        display: inline-block;
+        margin: 0px 2px;
+        text-align: center;
+    }
+
+    a.menu-item:active,
+    a.menu-item:focus,
+    a.menu-item:hover,
+    a.menu-item-active:link,
+    a.menu-item-active:visited {
+	background-image: url("../img/menu-item-active-bg.png");
+	background-position: bottom center;
+	background-repeat: no-repeat;
+    }
+
+    .dropdown {
+	position: relative;
+    }
+
+    .dropdown:hover .submenu {
+        min-width: 150px;
+        width: max-content;
+        height: auto;
+        overflow: visible;
+    }
+
+    /* This CSS rule is separate from the rule for :hover
+       because :hover should still be applied even when
+       the browser does not support :focus-within. */
+    .submenu:focus-within {
+        min-width: 150px;
+        width: max-content;
+        height: auto;
+        overflow: visible;
+    }
+
+    .dropdown-btn {
+	background-image: url("../img/dropdown-bg.png");
+	background-position: bottom right;
+	background-repeat: no-repeat;
+        padding: 0px 10px;
+        cursor: pointer;
+        margin: 0px 2px;
+    }
+
+    .dropdown-btn:active,
+    .dropdown-btn:hover {
+        background-image: url("../img/dropdown-bg.png");
+        background-position: top right;
+    }
+
+    .navbar label {
+        cursor: pointer;
+    }
+
+    label[for=all-dropdowns-hidden] {
+        text-shadow: #fff 0px -2px 15px, #fff 0px -2px 10px;
+    }
+
+    .hline {
+        display: block;
+        margin: auto;
+        width: 150px;
+        height: 1px;
+    }
+
+    .submenu {
+	background-color: transparent;
+        z-index: 10;
+        display: block;
+        overflow: hidden;
+        width: 0;
+        height: 0;
+	padding-top: 20px;
+	position: absolute;
+        right: 0px;
+    }
+
+    .submenu-triangle {
+	background-color: #333;
+	border-color: black;
+	border-style: solid none none solid;
+	border-width: thin;
+	height: 10px;
+	position: absolute;
+	right: 30px;
+	top: 15px;
+	transform: rotate(45deg);
+	width: 10px;
+    }
+
+    .submenu > ul {
+	background-color: #333;
+	border-color: black;
+	border-radius: 4px;
+	border-style: solid;
+	border-width: thin;
+	box-shadow: 0 0 4px #202020;
+	padding: 8px 0px;
+    }
+
+    .submenu li,
+    .submenu .menu-item:active,
+    .submenu .menu-item:link {
+	background-color: transparent;
+	display: block;
+	line-height: 30px;
+	margin: 0px;
+	text-align: left;
+    }
+
+    .submenu .menu-item:link,
+    .submenu .menu-item:visited {
+	font-size: 0.9em;
+    }
+
+    .submenu .menu-item:active,
+    .submenu .menu-item:focus,
+    .submenu .menu-item:hover,
+    .submenu .menu-item-active:link,
+    .submenu .menu-item-active:visited {
+	background-color: #414141;
+	background-image: none;
+    }
+
+    .menu-btn:link {
+	display: none;
+    }
+}
diff --git a/static/base/css/page.css b/static/base/css/page.css
new file mode 100644
index 0000000..25991f0
--- /dev/null
+++ b/static/base/css/page.css
@@ -0,0 +1,27 @@
+/* Harmonic Flow web site */
+/* Public domain 2017. All rights waived */
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+    color: #4D4D4D;
+    line-height: 1.2em;
+}
+
+h2 {
+    font-size: 2.5em;
+    text-align: center;
+    line-height: 1.2em;
+}
+
+h3 {
+    font-size: 1.5em;
+    line-height: 1.2em;
+}
+
+.page {
+    background-color: white;
+    padding: 50px 20px;
+}
diff --git a/static/base/css/sidebar.css b/static/base/css/sidebar.css
new file mode 100644
index 0000000..6e78cc5
--- /dev/null
+++ b/static/base/css/sidebar.css
@@ -0,0 +1,108 @@
+/* Harmonic Flow web site */
+/* Public domain 2017. All rights waived. */
+
+.side-bar {
+    box-sizing: border-box;
+    color: #555753;
+    font-size: 0.9em;
+    padding: 30px 0px;
+}
+
+.search-box {
+    border-style: none;
+    display: block;
+    height: 40px;
+    margin: 0px auto 10px auto;
+    overflow: hidden;
+    padding: 0px;
+    width: 90%;
+}
+
+.bar-title {
+    color: #525252;
+    font-size: 14px;
+}
+
+.bar-box-padded {
+    padding: 10px;
+}
+
+.bar-list {
+    list-style-type: none;
+    padding: 0px;
+}
+
+.bar-item {
+    display: inline-block;
+    margin: 10px 5px;
+    vertical-align: top;
+}
+
+.bar-link:link,
+.bar-link:visited {
+    border-color: silver;
+    border-radius: 4px;
+    border-style: solid;
+    border-width: thin;
+    color: #525252;
+    padding: 5px 10px;
+}
+
+.bar-link:active,
+.bar-link:focus,
+.bar-link:hover {
+    background-color: #FFCC00;
+    border-color: #D4AA00;
+}
+
+.feed-link {
+    background-image: url("/static/base/img/feed-bg-white.png");
+    background-position: bottom left;
+    background-repeat: no-repeat;
+}
+
+
+
+@media screen and (min-width: 1280px) {
+    .side-bar {
+	border-color: #999;
+	border-radius: 4px;
+	border-style: solid;
+	border-width: thin;
+	display: inline-block;
+	padding: 0px;
+	text-align: left;
+	vertical-align: top;
+        width: 250px;
+    }
+
+    .bar-title {
+	background-color: #F5F5F5;
+	font-weight: normal;
+	margin: 0px;
+	padding: 8px;
+    }
+
+    .bar-title-top {
+	border-radius: 4px 4px 0px 0px;
+    }
+
+    .bar-list {
+	margin: 0px;
+    }
+
+    .bar-item {
+	display: block;
+	margin: 0px;
+    }
+
+    .bar-link:link,
+    .bar-link:visited {
+	border-color: #F5F5F5;
+	border-radius: 0px;
+	border-style: solid none none none;
+	display: block;
+	margin: 0px;
+	padding: 8px 8px 8px 16px;
+    }
+}