1 files changed, 130 insertions, 15 deletions
diff --git a/public/style.css b/public/style.css
index 3eae408..8ee3f07 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,24 +1,139 @@
+/**
+ * Typography & Text styles
+ */
+html {
+  font-size: 62.5%;
+}
 body {
-  font-family: sans-serif;
-  margin: auto;
-  max-width: 1280px;
+  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
+  line-height: 1.6;
+  font-weight: 400;
+  font-family: "Roboto", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #FFFFFF;
+}
+
+/**
+ * Links
+ */
+a {
+  font-weight: normal;
+  text-decoration: none; 
+  color:#6738a5;
+}
+a:focus {
+  outline: thin dotted;
+}
+
+small {
+  font-size: 75%;
+}
+
+/**
+ * Headings
+ */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  line-height: 1;
+  text-rendering: optimizeLegibility; /*  voodoo to enable ligatures and kerning | https://developer.mozilla.org/en-US/docs/CSS/text-rendering */
+  margin-top: 0;
+  margin-bottom: 2rem;
+  font-weight: 300;
 }
+h1 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
+h2 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
+h3 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
+h4 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
+h5 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
+h6 { font-size: 1.4rem; line-height: 1.6;  letter-spacing: 0; }
 
-.navbar {
-  background-color: #313236;
-  border-radius: 2px;
-  max-width: 800px;
+/**
+ * Paragraphs
+ */
+p {
+  margin: 0 auto 1.5em auto; /* bottom margin for paragraphs */
 }
+p + p {
 
-.navbar a {
-  color: #aaa;
-  display: inline-block;
-  font-size: 15px;
-  padding: 10px;
-  text-decoration: none;
 }
 
-.navbar a:hover {
-  color: #ffffff;
+/**
+ * Quotes & Blockquotes
+ */
+q {
+  quotes: '\00201C' '\00201D';
 }
+q:before {
+  content: open-quote;
+}
+q:after {
+  content: close-quote;
+}
+
+blockquote {
+  /*background-color: #F8F8F8;*/
+  border-left: 2px solid #AFC0D2;
+  margin: 1.6em 10%;
+  padding: .75em 1em;
+  font-size:1.8rem;
+}
+blockquote p:last-child {
+  margin-bottom: 0;  
+}
+
+/**
+ * Layout styles
+ */
+
+/* Full size background image */
+html, #container, .inner { background-color:transparent;}
+html {
+  background:url(Images/Background.jpg) center center no-repeat fixed;
+  background-size:cover;
+}
+body {
+  max-width:800px;
+  margin:25px auto;
+}
+header, #content, footer { 
+  background: rgba(0,0,0,.8); 
+  padding:25px;
+  color:#FFFFFF; 
+}
+
+/* Menu Links */
+ul.main-menu {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: left;
+  list-style: none;
+}
+ul.main-menu li a {
+  margin-right:20px;
+  font-size:2.0rem;
+  border-bottom: solid transparent 3px;
+  color:#cfd2da;
+}
+ul.main-menu li a:hover {
+  color:#FFFFFF;
+}
+ul.main-menu li a.active {
+  color:#FFFFFF;
+  border-bottom-color:#6129aa;
+}
+
+/* Utility classes */
+.hide {
+  display:none;
+}
+.show {
+  display:block;
+}
+
+