diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..3f4384017b3b67a99f2a3192a0f517aaee97ed6a
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,382 @@
+* {
+ margin: 0em;
+ padding: 0em;
+}
+
+body {
+ /*font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;*/
+ /*color: #000000;*/
+ color: #333333;
+ background-color: #FFFFFF;
+ font-size: 100%;
+ font-family: sans-serif;
+
+
+ letter-spacing: 0.025em;
+ text-shadow: 0 0 1em transparent, 1px 1px 1.2px rgba(0, 0, 0, 0.004);
+
+ overflow: visible;
+ display: grid;
+ grid-template-columns: 1fr 3fr 1fr;
+ grid-template-rows: 6em 1fr 5em;
+ /*gap: 0px 0px;*/
+ grid-template-areas:
+ "aside header ."
+ "main main main"
+ "footer footer footer";
+ justify-items: center;
+ align-content: space-evenly;
+ z-index: 0;
+}
+
+a {
+ color: #337ab7;
+ text-decoration: none;
+}
+
+footer div a {
+ margin: 0 1em;
+}
+
+
+p, blockquote, ul, ol, dl, table, pre {
+ margin: 0 0 1em 0;
+}
+
+
+ul, ol {
+ padding-left: 2em;
+}
+
+li + li {
+ margin-top: 0.25em;
+}
+
+h1 {
+ padding-bottom: 0.3em;
+ font-size: 2em;
+ border-bottom: 0.1em solid #eee;
+}
+
+h2 {
+ padding-bottom: 0.3em;
+ font-size: 1.5em;
+ border-bottom: 0.1em solid #eee;
+}
+
+h1,h2,h3,h4,h5,h6 {
+ margin-top: 1.5em;
+ margin-bottom: 1em;
+ font-weight: 600;
+ line-height: 1.25;
+}
+
+
+body > header {
+ grid-area: header;
+ /*! display: flex; */
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ /*position: fixed;
+ top: 0;
+ left: 0;*/
+}
+
+#Logo {
+ height: 4em;
+ margin-bottom: -1.5em;
+}
+
+body > aside {
+ grid-area: aside;
+}
+body > aside img {
+ margin: 1em;
+ height: 6em;
+}
+
+body > header nav {
+ /*! margin: 1em; */
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 6em;
+}
+body > header a {
+ width: 20%; /* 100% / 5 tabs = 20% */
+ /*! padding: 1em; */
+ /*margin: 1em;*/
+ color: #333;
+ background-color: #ffffff;
+ border-bottom: 0.1em solid #336;
+ text-decoration: none;
+ text-align: center;
+ transition: background-color 0.1s, border 0.1s;
+ /* padding-top: 0.2em; */
+ line-height: 6em;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+body > header a:hover {
+ background-color: #e6e6e6;
+ border-bottom: 0.2em solid #536;
+}
+
+body > header > input[type=checkbox]{
+ display: none;
+}
+
+body > header .show-header-menu {
+ display: none;
+ background-color: #f0f0f0;
+ -webkit-user-select: none; /* Safari */
+ -moz-user-select: none; /* Firefox */
+ -ms-user-select: none; /* IE10+/Edge */
+ user-select: none; /* Standard */
+ cursor: pointer;
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 11;
+}
+body > header .show-header-menu:hover {
+ background-color: #e6e6e6;
+ /*border-bottom: 0.2em solid #536;*/
+}
+body > header .show-header-menu-bg {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: none;
+ background-color: rgba(120,120, 120, 0.5);
+ -webkit-user-select: none; /* Safari */
+ -moz-user-select: none; /* Firefox */
+ -ms-user-select: none; /* IE10+/Edge */
+ user-select: none; /* Standard */
+ cursor: pointer;
+ z-index: 5;
+}
+
+body > footer {
+ grid-area: footer;
+}
+
+
+
+@media only screen and (max-width: 125em) {
+ body {
+
+ grid-template-rows: 6em 1fr 6em 5em;
+ grid-template-columns: 1fr;
+ grid-template-areas:
+ "header"
+ "main"
+ "aside"
+ "footer";
+ }
+
+}
+
+@media only screen and (max-width: 79em) {
+ body > header {
+ margin-bottom: 0.2em;
+ font-size: 1.2em;
+ }
+ body > header nav {
+ /*margin: 0.2em;*/
+ display: none;
+ border-top: 0.1em solid #333;
+ position: fixed;
+ top: 3.2em;
+ left: 0;
+ z-index: 10;
+ width: 100%;
+ }
+ body > header .show-header-menu {
+ display: inline-block;
+ font-style: normal;
+ padding: 1em;
+ }
+ body > header #Logo {
+ height: 1.9em;
+ margin-bottom: -0.6em;
+ }
+ body > header a {
+ width: 100%;
+ /*! margin-top: 0.2em; */
+ /* padding-bottom: 0.2em;*/
+ box-sizing: border-box;
+ display: block;
+ line-height: 2em;
+ /* border-top: 0.1em solid #333; */
+ }
+ body > header a:hover {
+ border-bottom: 0.1em solid #536;
+ }
+ body > header > input[type=checkbox]:checked ~ .show-header-menu-bg {
+ display: block;
+ }
+ body > header > input[type=checkbox]:checked ~ nav{
+ display: block;
+ }
+ body {
+ grid-template-rows: 2em 1fr 6em 5em;
+ grid-template-columns: 1fr;
+ grid-template-areas:
+ "header"
+ "main"
+ "aside"
+ "footer";
+ }
+}
+
+
+
+main {
+ grid-area: main;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+ line-height: 1.5;
+ word-wrap: break-word;
+ /*padding-top: 2.5em;*/
+ padding-bottom: 2.5em;
+ padding-right: 1em;
+ padding-left: 1em;
+ margin-right: auto;
+ margin-left: auto;
+
+ max-width: 48em;
+}
+
+main > footer {
+ margin-top: 2em;
+ border-top: 0.1em solid #eee;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+main img {
+ width: 95%;
+ padding: 1em;
+
+}
+
+main iframe {
+ width: 100%;
+ /* height: 100%; */
+ height: 50em;
+ /* min-width: 47em;
+ min-height: 50em; */
+}
+
+
+blockquote {
+ padding: 0 1em;
+ color: #777;
+ border-left: 0.25em solid #ddd;
+}
+
+
+
+.alert {
+ padding:1em;
+ margin-bottom:1.2em;
+ border:0.1em solid transparent;
+ border-radius:0.25em;
+ /*padding:15px;
+ margin-bottom:20px;
+ border:1px solid transparent;
+ border-radius:4px;*/
+}
+
+.alert h4 {
+ margin-top:0;
+ color:inherit;
+}
+
+.alert .alert-link {
+ font-weight:700;
+}
+
+.alert > p, .alert > ul {
+ margin-bottom:0;
+}
+
+.alert > p+p {
+ margin-top:0.33em;
+}
+
+.alert-dismissable, .alert-dismissible {
+ padding-right:2em;
+}
+
+.alert-dismissable .close,.alert-dismissible .close{
+ position:relative;
+ top:-0.1em;
+ right:-1.4em;
+ color:inherit;
+}
+
+.alert-success {
+ color:#3c763d;
+ background-color:#dff0d8;
+ border-color:#d6e9c6;
+}
+
+.alert-success hr {
+ border-top-color:#c9e2b3;
+}
+
+.alert-success .alert-link {
+ color:#2b542c;
+}
+
+.alert-info {
+ color:#31708f;
+ background-color:#d9edf7;
+ border-color:#bce8f1;
+}
+
+.alert-info hr {
+ border-top-color:#a6e1ec;
+}
+
+.alert-info .alert-link {
+ color:#245269;
+}
+
+.alert-warning {
+ color:#8a6d3b;
+ background-color:#fcf8e3;
+ border-color:#faebcc;
+
+}
+
+.alert-warning hr {
+ border-top-color:#f7e1b5;
+}
+
+.alert-warning .alert-link {
+ color:#66512c;
+}
+
+.alert-danger {
+ color:#a94442;
+ background-color:#f2dede;
+ border-color:#ebccd1;
+}
+
+.alert-danger hr {
+ border-top-color:#e4b9c0;
+}
+
+.alert-danger .alert-link {
+ color:#843534;
+}
+
+
+