From b32c88cdd4e0a7d00b583b746cdc265969d9f6b1 Mon Sep 17 00:00:00 2001
From: Laury GvR <laury@gaslightmedia.com>
Date: Thu, 5 Feb 2015 15:13:33 -0500
Subject: [PATCH] Off-canvas code.

---
 css/app.css                        | 692 ++++++++++++++++-------------
 footer.php                         |   1 +
 front-page.php                     |  15 +-
 functions.php                      |   2 +-
 header.php                         |   2 +-
 js/pageSetup.js                    |   2 +-
 scss/_structure.scss               |  83 +++-
 scss/app.scss                      |   6 +-
 scss/{ => mixins}/_gradients.scss  |   0
 scss/mixins/_off-canvas-arrow.scss |  13 +
 sidebar.php                        |  28 +-
 11 files changed, 499 insertions(+), 345 deletions(-)
 rename scss/{ => mixins}/_gradients.scss (100%)
 create mode 100644 scss/mixins/_off-canvas-arrow.scss

diff --git a/css/app.css b/css/app.css
index 00e2f9e..5a79bb0 100755
--- a/css/app.css
+++ b/css/app.css
@@ -36,8 +36,8 @@ html, body {
   font-size: 100%; }
 
 body {
-  background: white;
-  color: #222222;
+  background: #fff;
+  color: #222;
   padding: 0;
   margin: 0;
   font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
@@ -860,7 +860,7 @@ select {
     .accordion .accordion-navigation.active > a, .accordion dd.active > a {
       background: #e8e8e8; }
     .accordion .accordion-navigation > a, .accordion dd > a {
-      background: #efefef;
+      background: #EFEFEF;
       color: #222222;
       padding: 1rem;
       display: block;
@@ -873,7 +873,7 @@ select {
       padding: 0.9375rem; }
       .accordion .accordion-navigation > .content.active, .accordion dd > .content.active {
         display: block;
-        background: white; }
+        background: #FFFFFF; }
 
 .alert-box {
   border-style: solid;
@@ -885,9 +885,9 @@ select {
   padding: 0.875rem 1.5rem 0.875rem 0.875rem;
   font-size: 0.8125rem;
   transition: opacity 300ms ease-out;
-  background-color: #008cba;
+  background-color: #008CBA;
   border-color: #007ba0;
-  color: white; }
+  color: #FFFFFF; }
   .alert-box .close {
     font-size: 1.375rem;
     padding: 9px 6px 4px;
@@ -905,21 +905,21 @@ select {
   .alert-box.round {
     border-radius: 1000px; }
   .alert-box.success {
-    background-color: #43ac6a;
+    background-color: #43AC6A;
     border-color: #3a945b;
-    color: white; }
+    color: #FFFFFF; }
   .alert-box.alert {
     background-color: #f04124;
     border-color: #de2b0f;
-    color: white; }
+    color: #FFFFFF; }
   .alert-box.secondary {
     background-color: #e7e7e7;
     border-color: #c7c7c7;
     color: #4f4f4f; }
   .alert-box.warning {
     background-color: #f08a24;
-    border-color: #de730f;
-    color: white; }
+    border-color: #de770f;
+    color: #FFFFFF; }
   .alert-box.info {
     background-color: #a0d3e8;
     border-color: #74bfdd;
@@ -1209,7 +1209,7 @@ select {
   border-style: solid;
   border-width: 1px;
   background-color: #f4f4f4;
-  border-color: gainsboro;
+  border-color: #dcdcdc;
   border-radius: 3px; }
   .breadcrumbs > * {
     margin: 0;
@@ -1217,11 +1217,11 @@ select {
     font-size: 0.6875rem;
     line-height: 0.6875rem;
     text-transform: uppercase;
-    color: #008cba; }
+    color: #008CBA; }
     .breadcrumbs > *:hover a, .breadcrumbs > *:focus a {
       text-decoration: underline; }
     .breadcrumbs > * a {
-      color: #008cba; }
+      color: #008CBA; }
     .breadcrumbs > *.current {
       cursor: default;
       color: #333333; }
@@ -1240,7 +1240,7 @@ select {
         cursor: default; }
     .breadcrumbs > *:before {
       content: "/";
-      color: #aaaaaa;
+      color: #AAAAAA;
       margin: 0 0.75rem;
       position: relative;
       top: 1px; }
@@ -1271,14 +1271,14 @@ button, .button {
   padding-bottom: 1.0625rem;
   padding-left: 2rem;
   font-size: 1rem;
-  background-color: #008cba;
+  background-color: #008CBA;
   border-color: #007295;
-  color: white;
+  color: #FFFFFF;
   transition: background-color 300ms ease-out; }
   button:hover, button:focus, .button:hover, .button:focus {
     background-color: #007295; }
   button:hover, button:focus, .button:hover, .button:focus {
-    color: white; }
+    color: #FFFFFF; }
   button.secondary, .button.secondary {
     background-color: #e7e7e7;
     border-color: #b9b9b9;
@@ -1288,29 +1288,29 @@ button, .button {
     button.secondary:hover, button.secondary:focus, .button.secondary:hover, .button.secondary:focus {
       color: #333333; }
   button.success, .button.success {
-    background-color: #43ac6a;
+    background-color: #43AC6A;
     border-color: #368a54;
-    color: white; }
+    color: #FFFFFF; }
     button.success:hover, button.success:focus, .button.success:hover, .button.success:focus {
       background-color: #368a54; }
     button.success:hover, button.success:focus, .button.success:hover, .button.success:focus {
-      color: white; }
+      color: #FFFFFF; }
   button.alert, .button.alert {
     background-color: #f04124;
     border-color: #cf280e;
-    color: white; }
+    color: #FFFFFF; }
     button.alert:hover, button.alert:focus, .button.alert:hover, .button.alert:focus {
       background-color: #cf280e; }
     button.alert:hover, button.alert:focus, .button.alert:hover, .button.alert:focus {
-      color: white; }
+      color: #FFFFFF; }
   button.warning, .button.warning {
     background-color: #f08a24;
-    border-color: #cf6b0e;
-    color: white; }
+    border-color: #cf6e0e;
+    color: #FFFFFF; }
     button.warning:hover, button.warning:focus, .button.warning:hover, .button.warning:focus {
-      background-color: #cf6b0e; }
+      background-color: #cf6e0e; }
     button.warning:hover, button.warning:focus, .button.warning:hover, .button.warning:focus {
-      color: white; }
+      color: #FFFFFF; }
   button.info, .button.info {
     background-color: #a0d3e8;
     border-color: #61b7d9;
@@ -1318,7 +1318,7 @@ button, .button {
     button.info:hover, button.info:focus, .button.info:hover, .button.info:focus {
       background-color: #61b7d9; }
     button.info:hover, button.info:focus, .button.info:hover, .button.info:focus {
-      color: white; }
+      color: #FFFFFF; }
   button.large, .button.large {
     padding-top: 1.125rem;
     padding-right: 2.25rem;
@@ -1352,18 +1352,18 @@ button, .button {
   button.round, .button.round {
     border-radius: 1000px; }
   button.disabled, button[disabled], .button.disabled, .button[disabled] {
-    background-color: #008cba;
+    background-color: #008CBA;
     border-color: #007295;
-    color: white;
+    color: #FFFFFF;
     cursor: default;
     opacity: 0.7;
     box-shadow: none; }
     button.disabled:hover, button.disabled:focus, button[disabled]:hover, button[disabled]:focus, .button.disabled:hover, .button.disabled:focus, .button[disabled]:hover, .button[disabled]:focus {
       background-color: #007295; }
     button.disabled:hover, button.disabled:focus, button[disabled]:hover, button[disabled]:focus, .button.disabled:hover, .button.disabled:focus, .button[disabled]:hover, .button[disabled]:focus {
-      color: white; }
+      color: #FFFFFF; }
     button.disabled:hover, button.disabled:focus, button[disabled]:hover, button[disabled]:focus, .button.disabled:hover, .button.disabled:focus, .button[disabled]:hover, .button[disabled]:focus {
-      background-color: #008cba; }
+      background-color: #008CBA; }
     button.disabled.secondary, button[disabled].secondary, .button.disabled.secondary, .button[disabled].secondary {
       background-color: #e7e7e7;
       border-color: #b9b9b9;
@@ -1378,42 +1378,42 @@ button, .button {
       button.disabled.secondary:hover, button.disabled.secondary:focus, button[disabled].secondary:hover, button[disabled].secondary:focus, .button.disabled.secondary:hover, .button.disabled.secondary:focus, .button[disabled].secondary:hover, .button[disabled].secondary:focus {
         background-color: #e7e7e7; }
     button.disabled.success, button[disabled].success, .button.disabled.success, .button[disabled].success {
-      background-color: #43ac6a;
+      background-color: #43AC6A;
       border-color: #368a54;
-      color: white;
+      color: #FFFFFF;
       cursor: default;
       opacity: 0.7;
       box-shadow: none; }
       button.disabled.success:hover, button.disabled.success:focus, button[disabled].success:hover, button[disabled].success:focus, .button.disabled.success:hover, .button.disabled.success:focus, .button[disabled].success:hover, .button[disabled].success:focus {
         background-color: #368a54; }
       button.disabled.success:hover, button.disabled.success:focus, button[disabled].success:hover, button[disabled].success:focus, .button.disabled.success:hover, .button.disabled.success:focus, .button[disabled].success:hover, .button[disabled].success:focus {
-        color: white; }
+        color: #FFFFFF; }
       button.disabled.success:hover, button.disabled.success:focus, button[disabled].success:hover, button[disabled].success:focus, .button.disabled.success:hover, .button.disabled.success:focus, .button[disabled].success:hover, .button[disabled].success:focus {
-        background-color: #43ac6a; }
+        background-color: #43AC6A; }
     button.disabled.alert, button[disabled].alert, .button.disabled.alert, .button[disabled].alert {
       background-color: #f04124;
       border-color: #cf280e;
-      color: white;
+      color: #FFFFFF;
       cursor: default;
       opacity: 0.7;
       box-shadow: none; }
       button.disabled.alert:hover, button.disabled.alert:focus, button[disabled].alert:hover, button[disabled].alert:focus, .button.disabled.alert:hover, .button.disabled.alert:focus, .button[disabled].alert:hover, .button[disabled].alert:focus {
         background-color: #cf280e; }
       button.disabled.alert:hover, button.disabled.alert:focus, button[disabled].alert:hover, button[disabled].alert:focus, .button.disabled.alert:hover, .button.disabled.alert:focus, .button[disabled].alert:hover, .button[disabled].alert:focus {
-        color: white; }
+        color: #FFFFFF; }
       button.disabled.alert:hover, button.disabled.alert:focus, button[disabled].alert:hover, button[disabled].alert:focus, .button.disabled.alert:hover, .button.disabled.alert:focus, .button[disabled].alert:hover, .button[disabled].alert:focus {
         background-color: #f04124; }
     button.disabled.warning, button[disabled].warning, .button.disabled.warning, .button[disabled].warning {
       background-color: #f08a24;
-      border-color: #cf6b0e;
-      color: white;
+      border-color: #cf6e0e;
+      color: #FFFFFF;
       cursor: default;
       opacity: 0.7;
       box-shadow: none; }
       button.disabled.warning:hover, button.disabled.warning:focus, button[disabled].warning:hover, button[disabled].warning:focus, .button.disabled.warning:hover, .button.disabled.warning:focus, .button[disabled].warning:hover, .button[disabled].warning:focus {
-        background-color: #cf6b0e; }
+        background-color: #cf6e0e; }
       button.disabled.warning:hover, button.disabled.warning:focus, button[disabled].warning:hover, button[disabled].warning:focus, .button.disabled.warning:hover, .button.disabled.warning:focus, .button[disabled].warning:hover, .button[disabled].warning:focus {
-        color: white; }
+        color: #FFFFFF; }
       button.disabled.warning:hover, button.disabled.warning:focus, button[disabled].warning:hover, button[disabled].warning:focus, .button.disabled.warning:hover, .button.disabled.warning:focus, .button[disabled].warning:hover, .button[disabled].warning:focus {
         background-color: #f08a24; }
     button.disabled.info, button[disabled].info, .button.disabled.info, .button[disabled].info {
@@ -1426,7 +1426,7 @@ button, .button {
       button.disabled.info:hover, button.disabled.info:focus, button[disabled].info:hover, button[disabled].info:focus, .button.disabled.info:hover, .button.disabled.info:focus, .button[disabled].info:hover, .button[disabled].info:focus {
         background-color: #61b7d9; }
       button.disabled.info:hover, button.disabled.info:focus, button[disabled].info:hover, button[disabled].info:focus, .button.disabled.info:hover, .button.disabled.info:focus, .button[disabled].info:hover, .button[disabled].info:focus {
-        color: white; }
+        color: #FFFFFF; }
       button.disabled.info:hover, button.disabled.info:focus, button[disabled].info:hover, button[disabled].info:focus, .button.disabled.info:hover, .button.disabled.info:focus, .button[disabled].info:hover, .button[disabled].info:focus {
         background-color: #a0d3e8; }
 
@@ -1851,7 +1851,7 @@ button::-moz-focus-inner {
   position: absolute;
   top: 50%;
   left: 50%;
-  color: #aaaaaa;
+  color: #AAAAAA;
   font-size: 0.6em; }
 
 .visible-img {
@@ -1866,7 +1866,7 @@ button::-moz-focus-inner {
     max-width: 100%; }
 
 .clearing-caption {
-  color: #cccccc;
+  color: #CCCCCC;
   font-size: 0.875em;
   line-height: 1.3;
   margin-bottom: 0;
@@ -1884,10 +1884,10 @@ button::-moz-focus-inner {
   padding-top: 10px;
   font-size: 30px;
   line-height: 1;
-  color: #cccccc;
+  color: #CCCCCC;
   display: none; }
   .clearing-close:hover, .clearing-close:focus {
-    color: #cccccc; }
+    color: #CCCCCC; }
 
 .clearing-assembled .clearing-container {
   height: 100%; }
@@ -1919,12 +1919,12 @@ button::-moz-focus-inner {
     .clearing-main-prev > span {
       left: 5px;
       border-color: transparent;
-      border-right-color: #cccccc; }
+      border-right-color: #CCCCCC; }
   .clearing-main-next {
     right: 0; }
     .clearing-main-next > span {
       border-color: transparent;
-      border-left-color: #cccccc; }
+      border-left-color: #CCCCCC; }
   .clearing-main-prev.disabled, .clearing-main-next.disabled {
     opacity: 0.3; }
   .clearing-assembled .clearing-container .carousel {
@@ -1984,7 +1984,7 @@ button::-moz-focus-inner {
   width: 100%;
   max-height: none;
   height: auto;
-  background: white;
+  background: #FFFFFF;
   border: solid 1px #cccccc;
   font-size: 0.875rem;
   z-index: 89;
@@ -2000,7 +2000,7 @@ button::-moz-focus-inner {
     width: 0;
     height: 0;
     border: inset 6px;
-    border-color: transparent transparent white transparent;
+    border-color: transparent transparent #FFFFFF transparent;
     border-bottom-style: solid;
     position: absolute;
     top: -12px;
@@ -2032,7 +2032,7 @@ button::-moz-focus-inner {
     width: 100%;
     max-height: none;
     height: auto;
-    background: white;
+    background: #FFFFFF;
     border: solid 1px #cccccc;
     font-size: 0.875rem;
     z-index: 89;
@@ -2049,7 +2049,7 @@ button::-moz-focus-inner {
       width: 0;
       height: 0;
       border: inset 6px;
-      border-color: transparent white transparent transparent;
+      border-color: transparent #FFFFFF transparent transparent;
       border-right-style: solid;
       position: absolute;
       top: 10px;
@@ -2075,7 +2075,7 @@ button::-moz-focus-inner {
     width: 100%;
     max-height: none;
     height: auto;
-    background: white;
+    background: #FFFFFF;
     border: solid 1px #cccccc;
     font-size: 0.875rem;
     z-index: 89;
@@ -2092,7 +2092,7 @@ button::-moz-focus-inner {
       width: 0;
       height: 0;
       border: inset 6px;
-      border-color: transparent transparent transparent white;
+      border-color: transparent transparent transparent #FFFFFF;
       border-left-style: solid;
       position: absolute;
       top: 10px;
@@ -2120,7 +2120,7 @@ button::-moz-focus-inner {
     width: 100%;
     max-height: none;
     height: auto;
-    background: white;
+    background: #FFFFFF;
     border: solid 1px #cccccc;
     font-size: 0.875rem;
     z-index: 89;
@@ -2137,7 +2137,7 @@ button::-moz-focus-inner {
       width: 0;
       height: 0;
       border: inset 6px;
-      border-color: white transparent transparent transparent;
+      border-color: #FFFFFF transparent transparent transparent;
       border-top-style: solid;
       position: absolute;
       top: auto;
@@ -2165,7 +2165,7 @@ button::-moz-focus-inner {
     line-height: 1.125rem;
     margin: 0; }
     .f-dropdown li:hover, .f-dropdown li:focus {
-      background: #eeeeee; }
+      background: #EEEEEE; }
     .f-dropdown li.radius {
       border-radius: 3px; }
     .f-dropdown li a {
@@ -2181,7 +2181,7 @@ button::-moz-focus-inner {
     width: 100%;
     height: auto;
     max-height: none;
-    background: white;
+    background: #FFFFFF;
     border: solid 1px #cccccc;
     font-size: 0.875rem;
     z-index: 89;
@@ -2214,14 +2214,14 @@ button::-moz-focus-inner {
     height: 0;
     display: block;
     border-style: solid;
-    border-color: white transparent transparent transparent;
+    border-color: #FFFFFF transparent transparent transparent;
     top: 50%; }
   .dropdown.button:after, button.dropdown:after {
     border-width: 0.375rem;
     right: 1.40625rem;
     margin-top: -0.15625rem; }
   .dropdown.button:after, button.dropdown:after {
-    border-color: white transparent transparent transparent; }
+    border-color: #FFFFFF transparent transparent transparent; }
   .dropdown.button.tiny, button.dropdown.tiny {
     padding-right: 2.625rem; }
     .dropdown.button.tiny:before, button.dropdown.tiny:before {
@@ -2229,7 +2229,7 @@ button::-moz-focus-inner {
       right: 1.125rem;
       margin-top: -0.125rem; }
     .dropdown.button.tiny:after, button.dropdown.tiny:after {
-      border-color: white transparent transparent transparent; }
+      border-color: #FFFFFF transparent transparent transparent; }
   .dropdown.button.small, button.dropdown.small {
     padding-right: 3.0625rem; }
     .dropdown.button.small:after, button.dropdown.small:after {
@@ -2237,7 +2237,7 @@ button::-moz-focus-inner {
       right: 1.3125rem;
       margin-top: -0.15625rem; }
     .dropdown.button.small:after, button.dropdown.small:after {
-      border-color: white transparent transparent transparent; }
+      border-color: #FFFFFF transparent transparent transparent; }
   .dropdown.button.large, button.dropdown.large {
     padding-right: 3.625rem; }
     .dropdown.button.large:after, button.dropdown.large:after {
@@ -2245,7 +2245,7 @@ button::-moz-focus-inner {
       right: 1.71875rem;
       margin-top: -0.15625rem; }
     .dropdown.button.large:after, button.dropdown.large:after {
-      border-color: white transparent transparent transparent; }
+      border-color: #FFFFFF transparent transparent transparent; }
   .dropdown.button.secondary:after, button.dropdown.secondary:after {
     border-color: #333333 transparent transparent transparent; }
 
@@ -2306,7 +2306,7 @@ label {
     padding: 0.5625rem 0; }
   label small {
     text-transform: capitalize;
-    color: #686868; }
+    color: #676767; }
 
 select::-ms-expand {
   display: none; }
@@ -2391,7 +2391,7 @@ span.postfix, label.postfix {
 input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea {
   -webkit-appearance: none;
   -webkit-border-radius: 0px;
-  background-color: white;
+  background-color: #FFFFFF;
   font-family: inherit;
   border-style: solid;
   border-width: 1px;
@@ -2416,10 +2416,10 @@ input[type="text"], input[type="password"], input[type="date"], input[type="date
     border-color: #999999;
     outline: none; }
   input[type="text"]:disabled, input[type="password"]:disabled, input[type="date"]:disabled, input[type="datetime"]:disabled, input[type="datetime-local"]:disabled, input[type="month"]:disabled, input[type="week"]:disabled, input[type="email"]:disabled, input[type="number"]:disabled, input[type="search"]:disabled, input[type="tel"]:disabled, input[type="time"]:disabled, input[type="url"]:disabled, input[type="color"]:disabled, textarea:disabled {
-    background-color: #dddddd;
+    background-color: #DDDDDD;
     cursor: default; }
   input[type="text"][disabled], input[type="text"][readonly], fieldset[disabled] input[type="text"], input[type="password"][disabled], input[type="password"][readonly], fieldset[disabled] input[type="password"], input[type="date"][disabled], input[type="date"][readonly], fieldset[disabled] input[type="date"], input[type="datetime"][disabled], input[type="datetime"][readonly], fieldset[disabled] input[type="datetime"], input[type="datetime-local"][disabled], input[type="datetime-local"][readonly], fieldset[disabled] input[type="datetime-local"], input[type="month"][disabled], input[type="month"][readonly], fieldset[disabled] input[type="month"], input[type="week"][disabled], input[type="week"][readonly], fieldset[disabled] input[type="week"], input[type="email"][disabled], input[type="email"][readonly], fieldset[disabled] input[type="email"], input[type="number"][disabled], input[type="number"][readonly], fieldset[disabled] input[type="number"], input[type="search"][disabled], input[type="search"][readonly], fieldset[disabled] input[type="search"], input[type="tel"][disabled], input[type="tel"][readonly], fieldset[disabled] input[type="tel"], input[type="time"][disabled], input[type="time"][readonly], fieldset[disabled] input[type="time"], input[type="url"][disabled], input[type="url"][readonly], fieldset[disabled] input[type="url"], input[type="color"][disabled], input[type="color"][readonly], fieldset[disabled] input[type="color"], textarea[disabled], textarea[readonly], fieldset[disabled] textarea {
-    background-color: #dddddd;
+    background-color: #DDDDDD;
     cursor: default; }
   input[type="text"].radius, input[type="password"].radius, input[type="date"].radius, input[type="datetime"].radius, input[type="datetime-local"].radius, input[type="month"].radius, input[type="week"].radius, input[type="email"].radius, input[type="number"].radius, input[type="search"].radius, input[type="tel"].radius, input[type="time"].radius, input[type="url"].radius, input[type="color"].radius, textarea.radius {
     border-radius: 3px; }
@@ -2489,7 +2489,7 @@ textarea {
 select {
   -webkit-appearance: none !important;
   -webkit-border-radius: 0px;
-  background-color: #fafafa;
+  background-color: #FAFAFA;
   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+);
   background-position: 100% center;
   background-repeat: no-repeat;
@@ -2509,7 +2509,7 @@ select {
     background-color: #f3f3f3;
     border-color: #999999; }
   select:disabled {
-    background-color: #dddddd;
+    background-color: #DDDDDD;
     cursor: default; }
 
 /* Adjust margin for form elements below */
@@ -2528,16 +2528,14 @@ input[type="file"] {
   width: 100%; }
 
 /* HTML5 Number spinners settings */
-
-
 /* We add basic fieldset styling */
 fieldset {
-  border: 1px solid #dddddd;
+  border: 1px solid #DDDDDD;
   padding: 1.25rem;
   margin: 1.125rem 0; }
   fieldset legend {
     font-weight: bold;
-    background: white;
+    background: #FFFFFF;
     padding: 0 0.1875rem;
     margin: 0;
     margin-left: -0.1875rem; }
@@ -2552,7 +2550,7 @@ fieldset {
   font-weight: normal;
   font-style: italic;
   background: #f04124;
-  color: white; }
+  color: #FFFFFF; }
 [data-abide] span.error, [data-abide] small.error {
   display: none; }
 
@@ -2565,7 +2563,7 @@ span.error, small.error {
   font-weight: normal;
   font-style: italic;
   background: #f04124;
-  color: white; }
+  color: #FFFFFF; }
 
 .error input, .error textarea, .error select {
   margin-bottom: 0; }
@@ -2582,9 +2580,9 @@ span.error, small.error {
   font-weight: normal;
   font-style: italic;
   background: #f04124;
-  color: white; }
+  color: #FFFFFF; }
 .error > label > small {
-  color: #686868;
+  color: #676767;
   background: transparent;
   padding: 0;
   text-transform: capitalize;
@@ -2668,11 +2666,11 @@ label.error {
       width: 1.875rem;
       height: 1.875rem; }
   .icon-bar > *:hover {
-    background: #008cba; }
+    background: #008CBA; }
   .icon-bar > * label {
-    color: white; }
+    color: #FFFFFF; }
   .icon-bar > * i {
-    color: white; }
+    color: #FFFFFF; }
 
 .icon-bar.two-up .item {
   width: 50%; }
@@ -2749,7 +2747,7 @@ label.error {
   display: none;
   position: absolute;
   background: #333333;
-  color: white;
+  color: #FFFFFF;
   z-index: 101;
   top: 0;
   left: 2.5%;
@@ -2802,7 +2800,7 @@ label.error {
   line-height: 1.25;
   margin: 0;
   font-weight: bold;
-  color: white; }
+  color: #FFFFFF; }
 
 .joyride-tip-guide p {
   margin: 0 0 1.125rem 0;
@@ -2833,7 +2831,7 @@ label.error {
   font-weight: normal;
   line-height: 0.5 !important; }
   .joyride-close-tip:hover, .joyride-close-tip:focus {
-    color: #eeeeee !important; }
+    color: #EEEEEE !important; }
 
 .joyride-modal-bg {
   position: fixed;
@@ -2848,11 +2846,11 @@ label.error {
   cursor: pointer; }
 
 .joyride-expose-wrapper {
-  background-color: white;
+  background-color: #FFFFFF;
   position: absolute;
   border-radius: 3px;
   z-index: 102;
-  box-shadow: 0 0 15px white; }
+  box-shadow: 0 0 15px #FFFFFF; }
 
 .joyride-expose-cover {
   background: transparent;
@@ -2892,7 +2890,7 @@ label.error {
 
 .keystroke, kbd {
   background-color: #ededed;
-  border-color: gainsboro;
+  border-color: #dddddd;
   color: #222222;
   border-style: solid;
   border-width: 1px;
@@ -2914,21 +2912,21 @@ label.error {
   margin-bottom: inherit;
   padding: 0.25rem 0.5rem 0.25rem;
   font-size: 0.6875rem;
-  background-color: #008cba;
-  color: white; }
+  background-color: #008CBA;
+  color: #FFFFFF; }
   .label.radius {
     border-radius: 3px; }
   .label.round {
     border-radius: 1000px; }
   .label.alert {
     background-color: #f04124;
-    color: white; }
+    color: #FFFFFF; }
   .label.warning {
     background-color: #f08a24;
-    color: white; }
+    color: #FFFFFF; }
   .label.success {
-    background-color: #43ac6a;
-    color: white; }
+    background-color: #43AC6A;
+    color: #FFFFFF; }
   .label.secondary {
     background-color: #e7e7e7;
     color: #333333; }
@@ -2937,7 +2935,7 @@ label.error {
     color: #333333; }
 
 [data-magellan-expedition], [data-magellan-expedition-clone] {
-  background: white;
+  background: #FFFFFF;
   z-index: 50;
   min-width: 100%;
   padding: 10px; }
@@ -3004,7 +3002,7 @@ label.error {
     margin-top: -20px;
     margin-left: -20px;
     border: solid 3px;
-    border-color: #555555 white;
+    border-color: #555555 #FFFFFF;
     border-radius: 1000px;
     animation-name: rotate;
     animation-duration: 1.5s;
@@ -3036,7 +3034,7 @@ label.error {
         position: absolute;
         bottom: 0;
         background-color: rgba(51, 51, 51, 0.8);
-        color: white;
+        color: #FFFFFF;
         width: 100%;
         padding: 0.625rem 0.875rem;
         font-size: 0.875rem; }
@@ -3045,7 +3043,7 @@ label.error {
     top: 10px;
     left: 10px;
     font-size: 12px;
-    color: white;
+    color: #FFFFFF;
     background: rgba(0, 0, 0, 0);
     z-index: 10; }
     .orbit-container .orbit-slide-number span {
@@ -3073,7 +3071,7 @@ label.error {
       right: 0;
       width: 11px;
       height: 14px;
-      border: solid 4px white;
+      border: solid 4px #FFFFFF;
       border-top: none;
       border-bottom: none; }
     .orbit-container .orbit-timer.paused > span {
@@ -3084,7 +3082,7 @@ label.error {
       border: inset 8px;
       border-left-style: solid;
       border-color: transparent;
-      border-left-color: white; }
+      border-left-color: #FFFFFF; }
       .orbit-container .orbit-timer.paused > span.dark {
         border-left-color: #333333; }
   .orbit-container:hover .orbit-timer > span {
@@ -3115,19 +3113,19 @@ label.error {
     .orbit-container .orbit-prev > span {
       border-right-style: solid;
       border-color: transparent;
-      border-right-color: white; }
+      border-right-color: #FFFFFF; }
     .orbit-container .orbit-prev:hover > span {
-      border-right-color: white; }
+      border-right-color: #FFFFFF; }
   .orbit-container .orbit-next {
     right: 0; }
     .orbit-container .orbit-next > span {
       border-color: transparent;
       border-left-style: solid;
-      border-left-color: white;
+      border-left-color: #FFFFFF;
       left: 50%;
       margin-left: -4px; }
     .orbit-container .orbit-next:hover > span {
-      border-left-color: white; }
+      border-left-color: #FFFFFF; }
 
 .orbit-bullets-container {
   text-align: center; }
@@ -3145,7 +3143,7 @@ label.error {
     display: inline-block;
     width: 0.5625rem;
     height: 0.5625rem;
-    background: #cccccc;
+    background: #CCCCCC;
     float: none;
     margin-right: 6px;
     border-radius: 1000px; }
@@ -3208,12 +3206,12 @@ ul.pagination {
     ul.pagination li.unavailable:hover a, ul.pagination li.unavailable a:focus, ul.pagination li.unavailable:hover button, ul.pagination li.unavailable button:focus {
       background: transparent; }
     ul.pagination li.current a, ul.pagination li.current button {
-      background: #008cba;
-      color: white;
+      background: #008CBA;
+      color: #FFFFFF;
       font-weight: bold;
       cursor: default; }
       ul.pagination li.current a:hover, ul.pagination li.current a:focus, ul.pagination li.current button:hover, ul.pagination li.current button:focus {
-        background: #008cba; }
+        background: #008CBA; }
   ul.pagination li {
     float: left;
     display: block; }
@@ -3229,7 +3227,7 @@ ul.pagination {
 .panel {
   border-style: solid;
   border-width: 1px;
-  border-color: #d7d7d7;
+  border-color: #d8d8d8;
   margin-bottom: 1.25rem;
   padding: 1.25rem;
   background: #f2f2f2;
@@ -3248,7 +3246,7 @@ ul.pagination {
   .panel.callout {
     border-style: solid;
     border-width: 1px;
-    border-color: #b6edff;
+    border-color: #b6efff;
     margin-bottom: 1.25rem;
     padding: 1.25rem;
     background: #ecfaff;
@@ -3265,13 +3263,13 @@ ul.pagination {
       .panel.callout h1.subheader, .panel.callout h2.subheader, .panel.callout h3.subheader, .panel.callout h4.subheader, .panel.callout h5.subheader, .panel.callout h6.subheader {
         line-height: 1.4; }
     .panel.callout a:not(.button) {
-      color: #008cba; }
+      color: #008CBA; }
   .panel.radius {
     border-radius: 3px; }
 
 /* Pricing Tables */
 .pricing-table {
-  border: solid 1px #dddddd;
+  border: solid 1px #DDDDDD;
   margin-left: 0;
   margin-bottom: 1.25rem; }
   .pricing-table * {
@@ -3281,12 +3279,12 @@ ul.pagination {
     background-color: #333333;
     padding: 0.9375rem 1.25rem;
     text-align: center;
-    color: #eeeeee;
+    color: #EEEEEE;
     font-weight: normal;
     font-size: 1rem;
     font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; }
   .pricing-table .price {
-    background-color: #f6f6f6;
+    background-color: #F6F6F6;
     padding: 0.9375rem 1.25rem;
     text-align: center;
     color: #333333;
@@ -3294,36 +3292,36 @@ ul.pagination {
     font-size: 2rem;
     font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; }
   .pricing-table .description {
-    background-color: white;
+    background-color: #FFFFFF;
     padding: 0.9375rem;
     text-align: center;
     color: #777777;
     font-size: 0.75rem;
     font-weight: normal;
     line-height: 1.4;
-    border-bottom: dotted 1px #dddddd; }
+    border-bottom: dotted 1px #DDDDDD; }
   .pricing-table .bullet-item {
-    background-color: white;
+    background-color: #FFFFFF;
     padding: 0.9375rem;
     text-align: center;
     color: #333333;
     font-size: 0.875rem;
     font-weight: normal;
-    border-bottom: dotted 1px #dddddd; }
+    border-bottom: dotted 1px #DDDDDD; }
   .pricing-table .cta-button {
-    background-color: white;
+    background-color: #FFFFFF;
     text-align: center;
     padding: 1.25rem 1.25rem 0; }
 
 /* Progress Bar */
 .progress {
-  background-color: #f6f6f6;
+  background-color: #F6F6F6;
   height: 1.5625rem;
   border: 1px solid white;
   padding: 0.125rem;
   margin-bottom: 0.625rem; }
   .progress .meter {
-    background: #008cba;
+    background: #008CBA;
     height: 100%;
     display: block; }
   .progress.secondary .meter {
@@ -3331,7 +3329,7 @@ ul.pagination {
     height: 100%;
     display: block; }
   .progress.success .meter {
-    background: #43ac6a;
+    background: #43AC6A;
     height: 100%;
     display: block; }
   .progress.alert .meter {
@@ -3352,17 +3350,17 @@ ul.pagination {
   position: relative;
   width: 100%;
   height: 1rem;
-  border: 1px solid #dddddd;
+  border: 1px solid #DDDDDD;
   margin: 1.25rem 0;
   -ms-touch-action: none;
   touch-action: none;
-  background: #fafafa; }
+  background: #FAFAFA; }
   .range-slider.vertical-range {
     display: block;
     position: relative;
     width: 100%;
     height: 1rem;
-    border: 1px solid #dddddd;
+    border: 1px solid #DDDDDD;
     margin: 1.25rem 0;
     -ms-touch-action: none;
     touch-action: none;
@@ -3379,27 +3377,27 @@ ul.pagination {
       height: auto;
       bottom: 0; }
   .range-slider.radius {
-    background: #fafafa;
+    background: #FAFAFA;
     border-radius: 3px; }
     .range-slider.radius .range-slider-handle {
-      background: #008cba;
+      background: #008CBA;
       border-radius: 3px; }
       .range-slider.radius .range-slider-handle:hover {
         background: #007da4; }
   .range-slider.round {
-    background: #fafafa;
+    background: #FAFAFA;
     border-radius: 1000px; }
     .range-slider.round .range-slider-handle {
-      background: #008cba;
+      background: #008CBA;
       border-radius: 1000px; }
       .range-slider.round .range-slider-handle:hover {
         background: #007da4; }
   .range-slider.disabled, .range-slider[disabled] {
-    background: #fafafa;
+    background: #FAFAFA;
     cursor: default;
     opacity: 0.7; }
     .range-slider.disabled .range-slider-handle, .range-slider[disabled] .range-slider-handle {
-      background: #008cba;
+      background: #008CBA;
       cursor: default;
       opacity: 0.7; }
       .range-slider.disabled .range-slider-handle:hover, .range-slider[disabled] .range-slider-handle:hover {
@@ -3422,7 +3420,7 @@ ul.pagination {
   cursor: pointer;
   -ms-touch-action: manipulation;
   touch-action: manipulation;
-  background: #008cba; }
+  background: #008CBA; }
   .range-slider-handle:hover {
     background: #007da4; }
 
@@ -3432,7 +3430,7 @@ ul.pagination {
   bottom: 0;
   left: 0;
   right: 0;
-  background: black;
+  background: #000000;
   background: rgba(0, 0, 0, 0.45);
   z-index: 1004;
   display: none;
@@ -3447,7 +3445,7 @@ ul.pagination {
   top: 0;
   border-radius: 3px;
   left: 0;
-  background-color: white;
+  background-color: #FFFFFF;
   padding: 1.25rem;
   border: solid 1px #666666;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
@@ -3455,11 +3453,11 @@ ul.pagination {
   @media only screen and (max-width: 40em) {
     .reveal-modal {
       min-height: 100vh; } }
-  .reveal-modal .column, .reveal-modal .columns {
+  .reveal-modal .column, .reveal-modal dialog, .reveal-modal .columns, .reveal-modal dialog {
     min-width: 0; }
-  .reveal-modal > :first-child {
+  .reveal-modal > :first-child, .reveal-modal > dialog {
     margin-top: 0; }
-  .reveal-modal > :last-child {
+  .reveal-modal > :last-child, .reveal-modal > dialog {
     margin-bottom: 0; }
   @media only screen and (min-width:40.063em) {
     .reveal-modal {
@@ -3471,11 +3469,11 @@ ul.pagination {
   @media only screen and (min-width:40.063em) {
     .reveal-modal {
       top: 6.25rem; } }
-  .reveal-modal.radius {
+  .reveal-modal.radius, dialog.radius {
     border-radius: 3px; }
-  .reveal-modal.round {
+  .reveal-modal.round, dialog.round {
     border-radius: 1000px; }
-  .reveal-modal.collapse {
+  .reveal-modal.collapse, dialog.collapse {
     padding: 0; }
   @media only screen and (min-width:40.063em) {
     .reveal-modal.tiny {
@@ -3512,7 +3510,7 @@ ul.pagination {
       left: 0;
       right: 0;
       margin: 0 auto; } }
-  .reveal-modal.full {
+  .reveal-modal.full, dialog.full {
     top: 0;
     left: 0;
     height: 100%;
@@ -3526,13 +3524,13 @@ ul.pagination {
         left: 0;
         right: 0;
         margin: 0 auto; } }
-  .reveal-modal .close-reveal-modal {
+  .reveal-modal .close-reveal-modal, .reveal-modal dialog {
     font-size: 2.5rem;
     line-height: 1;
     position: absolute;
     top: 0.5rem;
     right: 0.6875rem;
-    color: #aaaaaa;
+    color: #AAAAAA;
     font-weight: bold;
     cursor: pointer; }
 
@@ -3544,7 +3542,7 @@ dialog {
     bottom: 0;
     left: 0;
     right: 0;
-    background: black;
+    background: #000000;
     background: rgba(0, 0, 0, 0.45);
     z-index: auto;
     display: none;
@@ -3555,7 +3553,7 @@ dialog {
 @media print {
   dialog, .reveal-modal, dialog {
     display: none;
-    background: white !important; } }
+    background: #FFFFFF !important; } }
 
 .side-nav {
   display: block;
@@ -3570,7 +3568,7 @@ dialog {
     font-weight: normal; }
     .side-nav li a:not(.button) {
       display: block;
-      color: #008cba;
+      color: #008CBA;
       margin: 0;
       padding: 0.4375rem 0.875rem; }
       .side-nav li a:not(.button):hover, .side-nav li a:not(.button):focus {
@@ -3587,7 +3585,7 @@ dialog {
       list-style: none;
       border-top-color: white; }
     .side-nav li.heading {
-      color: #008cba;
+      color: #008CBA;
       font-size: 0.875rem;
       font-weight: bold;
       text-transform: uppercase; }
@@ -3623,11 +3621,11 @@ dialog {
       top: 48%;
       margin-left: -0.375rem; }
   .split.button span:after {
-    border-color: white transparent transparent transparent; }
+    border-color: #FFFFFF transparent transparent transparent; }
   .split.button.secondary span {
     border-left-color: rgba(255, 255, 255, 0.5); }
   .split.button.secondary span:after {
-    border-color: white transparent transparent transparent; }
+    border-color: #FFFFFF transparent transparent transparent; }
   .split.button.alert span {
     border-left-color: rgba(255, 255, 255, 0.5); }
   .split.button.success span {
@@ -3702,10 +3700,10 @@ dialog {
     .sub-nav dt.active a, .sub-nav dd.active a, .sub-nav li.active a {
       border-radius: 3px;
       font-weight: normal;
-      background: #008cba;
+      background: #008CBA;
       padding: 0.1875rem 1rem;
       cursor: default;
-      color: white; }
+      color: #FFFFFF; }
       .sub-nav dt.active a:hover, .sub-nav dd.active a:hover, .sub-nav li.active a:hover {
         background: #007ba0; }
 
@@ -3718,7 +3716,7 @@ dialog {
     margin-bottom: 1rem;
     position: relative;
     color: transparent;
-    background: #dddddd;
+    background: #DDDDDD;
     text-indent: 100%;
     width: 4rem;
     height: 2rem;
@@ -3736,7 +3734,7 @@ dialog {
   .switch label:after {
     content: "";
     display: block;
-    background: white;
+    background: #FFFFFF;
     position: absolute;
     top: 0.25rem;
     left: 0.25rem;
@@ -3749,7 +3747,7 @@ dialog {
     -moz-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0); }
   .switch input:checked + label {
-    background: #008cba; }
+    background: #008CBA; }
   .switch input:checked + label:after {
     left: 2.25rem; }
   .switch label {
@@ -3762,11 +3760,11 @@ dialog {
     left: 2.25rem; }
   .switch label {
     color: transparent;
-    background: #dddddd; }
+    background: #DDDDDD; }
   .switch label:after {
-    background: white; }
+    background: #FFFFFF; }
   .switch input:checked + label {
-    background: #008cba; }
+    background: #008CBA; }
   .switch.large label {
     width: 5rem;
     height: 2.5rem; }
@@ -3803,9 +3801,9 @@ dialog {
       border-radius: 2rem; }
 
 table {
-  background: white;
+  background: #FFFFFF;
   margin-bottom: 1.25rem;
-  border: solid 1px #dddddd;
+  border: solid 1px #DDDDDD;
   table-layout: auto; }
   table caption {
     background: transparent;
@@ -3813,14 +3811,14 @@ table {
     font-size: 1rem;
     font-weight: bold; }
   table thead {
-    background: whitesmoke; }
+    background: #F5F5F5; }
     table thead tr th, table thead tr td {
       padding: 0.5rem 0.625rem 0.625rem;
       font-size: 0.875rem;
       font-weight: bold;
       color: #222222; }
   table tfoot {
-    background: whitesmoke; }
+    background: #F5F5F5; }
     table tfoot tr th, table tfoot tr td {
       padding: 0.5rem 0.625rem 0.625rem;
       font-size: 0.875rem;
@@ -3832,7 +3830,7 @@ table {
     color: #222222;
     text-align: left; }
   table tr.even, table tr.alt, table tr:nth-of-type(even) {
-    background: #f9f9f9; }
+    background: #F9F9F9; }
   table thead tr th, table tfoot tr th, table tfoot tr td, table tbody tr th, table tbody tr td, table tr td {
     display: table-cell;
     line-height: 1.125rem; }
@@ -3852,7 +3850,7 @@ table {
     float: left; }
     .tabs dd > a, .tabs .tab-title > a {
       display: block;
-      background-color: #efefef;
+      background-color: #EFEFEF;
       color: #222222;
       padding: 1rem 2rem;
       font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
@@ -3860,7 +3858,7 @@ table {
       .tabs dd > a:hover, .tabs .tab-title > a:hover {
         background-color: #e1e1e1; }
     .tabs dd.active a, .tabs .tab-title.active a {
-      background-color: white;
+      background-color: #FFFFFF;
       color: #222222; }
   .tabs.radius dd:first-child a, .tabs.radius .tab:first-child a {
     -webkit-border-bottom-left-radius: 3px;
@@ -3922,7 +3920,7 @@ table {
 .th {
   line-height: 0;
   display: inline-block;
-  border: solid 4px white;
+  border: solid 4px #FFFFFF;
   max-width: 100%;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
   transition: all 200ms ease-out; }
@@ -3933,13 +3931,13 @@ table {
 
 /* Tooltips */
 .has-tip {
-  border-bottom: dotted 1px #cccccc;
+  border-bottom: dotted 1px #CCCCCC;
   cursor: help;
   font-weight: bold;
   color: #333333; }
   .has-tip:hover, .has-tip:focus {
     border-bottom: dotted 1px #004054;
-    color: #008cba; }
+    color: #008CBA; }
   .has-tip.tip-left, .has-tip.tip-right {
     float: none !important; }
 
@@ -3954,7 +3952,7 @@ table {
   max-width: 300px;
   left: 50%;
   width: 100%;
-  color: white;
+  color: #FFFFFF;
   background: #333333; }
   .tooltip > .nub {
     display: block;
@@ -3976,7 +3974,7 @@ table {
     .tooltip.round > .nub {
       left: 2rem; }
   .tooltip.opened {
-    color: #008cba !important;
+    color: #008CBA !important;
     border-bottom: dotted 1px #004054 !important; }
 
 .tap-to-close {
@@ -4079,7 +4077,7 @@ meta.foundation-mq-topbar {
       margin: 0; }
       .top-bar .name h1 a {
         font-weight: normal;
-        color: white;
+        color: #FFFFFF;
         width: 75%;
         display: block;
         padding: 0 15px; }
@@ -4088,7 +4086,7 @@ meta.foundation-mq-topbar {
     right: 0;
     top: 0; }
     .top-bar .toggle-topbar a {
-      color: white;
+      color: #FFFFFF;
       text-transform: uppercase;
       font-size: 0.8125rem;
       font-weight: bold;
@@ -4104,7 +4102,7 @@ meta.foundation-mq-topbar {
         height: 34px;
         line-height: 33px;
         padding: 0 40px 0 15px;
-        color: white;
+        color: #FFFFFF;
         position: relative; }
         .top-bar .toggle-topbar.menu-icon a span::after {
           content: "";
@@ -4114,7 +4112,7 @@ meta.foundation-mq-topbar {
           top: 50%;
           margin-top: -8px;
           right: 15px;
-          box-shadow: 0 0px 0 1px white, 0 7px 0 1px white, 0 14px 0 1px white;
+          box-shadow: 0 0px 0 1px #FFFFFF, 0 7px 0 1px #FFFFFF, 0 14px 0 1px #FFFFFF;
           width: 16px; }
         .top-bar .toggle-topbar.menu-icon a span:hover:after {
           box-shadow: 0 0px 0 1px "", 0 7px 0 1px "", 0 14px 0 1px ""; }
@@ -4150,7 +4148,7 @@ meta.foundation-mq-topbar {
     .top-bar-section ul li > a {
       display: block;
       width: 100%;
-      color: white;
+      color: #FFFFFF;
       padding: 12px 0 12px 0;
       padding-left: 15px;
       font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
@@ -4161,13 +4159,13 @@ meta.foundation-mq-topbar {
         font-size: 0.8125rem;
         padding-right: 15px;
         padding-left: 15px;
-        background-color: #008cba;
+        background-color: #008CBA;
         border-color: #007295;
-        color: white; }
+        color: #FFFFFF; }
         .top-bar-section ul li > a.button:hover, .top-bar-section ul li > a.button:focus {
           background-color: #007295; }
         .top-bar-section ul li > a.button:hover, .top-bar-section ul li > a.button:focus {
-          color: white; }
+          color: #FFFFFF; }
       .top-bar-section ul li > a.button.secondary {
         background-color: #e7e7e7;
         border-color: #b9b9b9;
@@ -4177,40 +4175,40 @@ meta.foundation-mq-topbar {
         .top-bar-section ul li > a.button.secondary:hover, .top-bar-section ul li > a.button.secondary:focus {
           color: #333333; }
       .top-bar-section ul li > a.button.success {
-        background-color: #43ac6a;
+        background-color: #43AC6A;
         border-color: #368a54;
-        color: white; }
+        color: #FFFFFF; }
         .top-bar-section ul li > a.button.success:hover, .top-bar-section ul li > a.button.success:focus {
           background-color: #368a54; }
         .top-bar-section ul li > a.button.success:hover, .top-bar-section ul li > a.button.success:focus {
-          color: white; }
+          color: #FFFFFF; }
       .top-bar-section ul li > a.button.alert {
         background-color: #f04124;
         border-color: #cf280e;
-        color: white; }
+        color: #FFFFFF; }
         .top-bar-section ul li > a.button.alert:hover, .top-bar-section ul li > a.button.alert:focus {
           background-color: #cf280e; }
         .top-bar-section ul li > a.button.alert:hover, .top-bar-section ul li > a.button.alert:focus {
-          color: white; }
+          color: #FFFFFF; }
       .top-bar-section ul li > a.button.warning {
         background-color: #f08a24;
-        border-color: #cf6b0e;
-        color: white; }
+        border-color: #cf6e0e;
+        color: #FFFFFF; }
         .top-bar-section ul li > a.button.warning:hover, .top-bar-section ul li > a.button.warning:focus {
-          background-color: #cf6b0e; }
+          background-color: #cf6e0e; }
         .top-bar-section ul li > a.button.warning:hover, .top-bar-section ul li > a.button.warning:focus {
-          color: white; }
+          color: #FFFFFF; }
     .top-bar-section ul li > button {
       font-size: 0.8125rem;
       padding-right: 15px;
       padding-left: 15px;
-      background-color: #008cba;
+      background-color: #008CBA;
       border-color: #007295;
-      color: white; }
+      color: #FFFFFF; }
       .top-bar-section ul li > button:hover, .top-bar-section ul li > button:focus {
         background-color: #007295; }
       .top-bar-section ul li > button:hover, .top-bar-section ul li > button:focus {
-        color: white; }
+        color: #FFFFFF; }
       .top-bar-section ul li > button.secondary {
         background-color: #e7e7e7;
         border-color: #b9b9b9;
@@ -4220,39 +4218,39 @@ meta.foundation-mq-topbar {
         .top-bar-section ul li > button.secondary:hover, .top-bar-section ul li > button.secondary:focus {
           color: #333333; }
       .top-bar-section ul li > button.success {
-        background-color: #43ac6a;
+        background-color: #43AC6A;
         border-color: #368a54;
-        color: white; }
+        color: #FFFFFF; }
         .top-bar-section ul li > button.success:hover, .top-bar-section ul li > button.success:focus {
           background-color: #368a54; }
         .top-bar-section ul li > button.success:hover, .top-bar-section ul li > button.success:focus {
-          color: white; }
+          color: #FFFFFF; }
       .top-bar-section ul li > button.alert {
         background-color: #f04124;
         border-color: #cf280e;
-        color: white; }
+        color: #FFFFFF; }
         .top-bar-section ul li > button.alert:hover, .top-bar-section ul li > button.alert:focus {
           background-color: #cf280e; }
         .top-bar-section ul li > button.alert:hover, .top-bar-section ul li > button.alert:focus {
-          color: white; }
+          color: #FFFFFF; }
       .top-bar-section ul li > button.warning {
         background-color: #f08a24;
-        border-color: #cf6b0e;
-        color: white; }
+        border-color: #cf6e0e;
+        color: #FFFFFF; }
         .top-bar-section ul li > button.warning:hover, .top-bar-section ul li > button.warning:focus {
-          background-color: #cf6b0e; }
+          background-color: #cf6e0e; }
         .top-bar-section ul li > button.warning:hover, .top-bar-section ul li > button.warning:focus {
-          color: white; }
+          color: #FFFFFF; }
     .top-bar-section ul li:hover:not(.has-form) > a {
       background-color: #555555;
       background: #272727;
-      color: white; }
+      color: #FFFFFF; }
     .top-bar-section ul li.active > a {
-      background: #008cba;
-      color: white; }
+      background: #008CBA;
+      color: #FFFFFF; }
       .top-bar-section ul li.active > a:hover {
         background: #007ba0;
-        color: white; }
+        color: #FFFFFF; }
   .top-bar-section .has-form {
     padding: 15px; }
   .top-bar-section .has-dropdown {
@@ -4308,7 +4306,7 @@ meta.foundation-mq-topbar {
         margin-top: 0;
         font-size: 1.125rem; }
         .top-bar-section .dropdown li.title h5 a, .top-bar-section .dropdown li.parent-link a {
-          color: white;
+          color: #FFFFFF;
           display: block; }
           .top-bar-section .dropdown li.title h5 a:hover, .top-bar-section .dropdown li.parent-link a:hover {
             background: none; }
@@ -4366,7 +4364,7 @@ meta.foundation-mq-topbar {
     .top-bar-section li.hover > a:not(.button) {
       background-color: #555555;
       background: #272727;
-      color: white; }
+      color: #FFFFFF; }
     .top-bar-section li:not(.has-form) a:not(.button) {
       padding: 0 15px;
       line-height: 45px;
@@ -4377,11 +4375,11 @@ meta.foundation-mq-topbar {
     .top-bar-section li.active:not(.has-form) a:not(.button) {
       padding: 0 15px;
       line-height: 45px;
-      color: white;
-      background: #008cba; }
+      color: #FFFFFF;
+      background: #008CBA; }
       .top-bar-section li.active:not(.has-form) a:not(.button):hover {
         background: #007ba0;
-        color: white; }
+        color: #FFFFFF; }
     .top-bar-section .has-dropdown > a {
       padding-right: 35px !important; }
       .top-bar-section .has-dropdown > a:after {
@@ -4432,16 +4430,16 @@ meta.foundation-mq-topbar {
       background: transparent;
       min-width: 100%; }
       .top-bar-section .dropdown li a {
-        color: white;
+        color: #FFFFFF;
         line-height: 45px;
         white-space: nowrap;
         padding: 12px 15px;
         background: #333333; }
       .top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {
-        color: white;
+        color: #FFFFFF;
         background: #333333; }
       .top-bar-section .dropdown li:not(.has-form):not(.active):hover > a:not(.button) {
-        color: white;
+        color: #FFFFFF;
         background-color: #555555;
         background: #272727; }
       .top-bar-section .dropdown li label {
@@ -4474,10 +4472,10 @@ meta.foundation-mq-topbar {
   .no-js .top-bar-section ul li:hover > a {
     background-color: #555555;
     background: #272727;
-    color: white; }
+    color: #FFFFFF; }
   .no-js .top-bar-section ul li:active > a {
-    background: #008cba;
-    color: white; }
+    background: #008CBA;
+    color: #FFFFFF; }
   .no-js .top-bar-section .has-dropdown:hover > .dropdown {
     display: block;
     position: static !important;
@@ -4614,7 +4612,7 @@ div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, t
 
 /* Default Link Styles */
 a {
-  color: #008cba;
+  color: #008CBA;
   text-decoration: none;
   line-height: inherit; }
   a:hover, a:focus {
@@ -4679,7 +4677,7 @@ h6 {
   margin-bottom: 0.5rem; }
 
 hr {
-  border: solid #dddddd;
+  border: solid #DDDDDD;
   border-width: 1px 0 0;
   clear: both;
   margin: 1.25rem 0 1.1875rem;
@@ -4761,19 +4759,19 @@ dl dd {
 abbr, acronym {
   text-transform: uppercase;
   font-size: 90%;
-  color: #222222;
+  color: #222;
   cursor: help; }
 
 abbr {
   text-transform: none; }
   abbr[title] {
-    border-bottom: 1px dotted #dddddd; }
+    border-bottom: 1px dotted #DDDDDD; }
 
 /* Blockquotes */
 blockquote {
   margin: 0 0 1.25rem;
   padding: 0.5625rem 1.25rem 0 1.1875rem;
-  border-left: 1px solid #dddddd; }
+  border-left: 1px solid #DDDDDD; }
   blockquote cite {
     display: block;
     font-size: 0.8125rem;
@@ -4791,7 +4789,7 @@ blockquote, blockquote p {
 .vcard {
   display: inline-block;
   margin: 0 0 1.25rem 0;
-  border: 1px solid #dddddd;
+  border: 1px solid #DDDDDD;
   padding: 0.625rem 0.75rem; }
   .vcard li {
     margin: 0;
@@ -4840,7 +4838,7 @@ blockquote, blockquote p {
 
   * {
     background: transparent !important;
-    color: black !important;
+    color: #000000 !important;
     /* Black prints faster: h5bp.com/s */
     box-shadow: none !important;
     text-shadow: none !important; }
@@ -4903,12 +4901,12 @@ blockquote, blockquote p {
 .tab-bar {
   -webkit-backface-visibility: hidden;
   background: #333333;
-  color: white;
+  color: #FFFFFF;
   height: 2.8125rem;
   line-height: 2.8125rem;
   position: relative; }
   .tab-bar h1, .tab-bar h2, .tab-bar h3, .tab-bar h4, .tab-bar h5, .tab-bar h6 {
-    color: white;
+    color: #FFFFFF;
     font-weight: bold;
     line-height: 2.8125rem;
     margin: 0; }
@@ -4956,7 +4954,7 @@ blockquote, blockquote p {
   height: 2.8125rem;
   display: block;
   padding: 0;
-  color: white;
+  color: #FFFFFF;
   position: relative;
   transform: translate3d(0, 0, 0); }
   .tab-bar .menu-icon span::after {
@@ -4967,7 +4965,7 @@ blockquote, blockquote p {
     top: 50%;
     margin-top: -0.5rem;
     left: 0.90625rem;
-    box-shadow: 0 0px 0 1px white, 0 7px 0 1px white, 0 14px 0 1px white;
+    box-shadow: 0 0px 0 1px #FFFFFF, 0 7px 0 1px #FFFFFF, 0 14px 0 1px #FFFFFF;
     width: 1rem; }
   .tab-bar .menu-icon span:hover:after {
     box-shadow: 0 0px 0 1px #b3b3b3, 0 7px 0 1px #b3b3b3, 0 14px 0 1px #b3b3b3; }
@@ -5210,7 +5208,7 @@ ul.off-canvas-list {
     color: #999999;
     text-transform: uppercase;
     font-weight: bold;
-    background: #444444;
+    background: #444;
     border-top: 1px solid #5e5e5e;
     border-bottom: none;
     margin: 0; }
@@ -5262,7 +5260,7 @@ ul.off-canvas-list {
     color: #999999;
     text-transform: uppercase;
     font-weight: bold;
-    background: #444444;
+    background: #444;
     border-top: 1px solid #5e5e5e;
     border-bottom: none;
     margin: 0; }
@@ -5292,7 +5290,7 @@ ul.off-canvas-list {
   margin-right: 0.5rem;
   display: inline; }
 
-/* #{$current-visibility-breakpoint} displays */
+/* small displays */
 @media only screen {
   .show-for-small-only, .show-for-small-up, .show-for-small, .show-for-small-down, .hide-for-medium-only, .hide-for-medium-up, .hide-for-medium, .show-for-medium-down, .hide-for-large-only, .hide-for-large-up, .hide-for-large, .show-for-large-down, .hide-for-xlarge-only, .hide-for-xlarge-up, .hide-for-xxlarge-only, .hide-for-xxlarge-up {
     display: inherit !important; }
@@ -5321,7 +5319,7 @@ ul.off-canvas-list {
   th.show-for-small-only, td.show-for-small-only, th.show-for-small-up, td.show-for-small-up, th.show-for-small, td.show-for-small, th.show-for-small-down, td.show-for-small-down, th.hide-for-medium-only, td.hide-for-medium-only, th.hide-for-medium-up, td.hide-for-medium-up, th.hide-for-medium, td.hide-for-medium, th.show-for-medium-down, td.show-for-medium-down, th.hide-for-large-only, td.hide-for-large-only, th.hide-for-large-up, td.hide-for-large-up, th.hide-for-large, td.hide-for-large, th.show-for-large-down, td.show-for-large-down, th.hide-for-xlarge-only, td.hide-for-xlarge-only, th.hide-for-xlarge-up, td.hide-for-xlarge-up, th.hide-for-xxlarge-only, td.hide-for-xxlarge-only, th.hide-for-xxlarge-up, td.hide-for-xxlarge-up {
     display: table-cell !important; } }
 
-/* #{$current-visibility-breakpoint} displays */
+/* medium displays */
 @media only screen and (min-width:40.063em) {
   .hide-for-small-only, .show-for-small-up, .hide-for-small, .hide-for-small-down, .show-for-medium-only, .show-for-medium-up, .show-for-medium, .show-for-medium-down, .hide-for-large-only, .hide-for-large-up, .hide-for-large, .show-for-large-down, .hide-for-xlarge-only, .hide-for-xlarge-up, .hide-for-xxlarge-only, .hide-for-xxlarge-up {
     display: inherit !important; }
@@ -5350,7 +5348,7 @@ ul.off-canvas-list {
   th.hide-for-small-only, td.hide-for-small-only, th.show-for-small-up, td.show-for-small-up, th.hide-for-small, td.hide-for-small, th.hide-for-small-down, td.hide-for-small-down, th.show-for-medium-only, td.show-for-medium-only, th.show-for-medium-up, td.show-for-medium-up, th.show-for-medium, td.show-for-medium, th.show-for-medium-down, td.show-for-medium-down, th.hide-for-large-only, td.hide-for-large-only, th.hide-for-large-up, td.hide-for-large-up, th.hide-for-large, td.hide-for-large, th.show-for-large-down, td.show-for-large-down, th.hide-for-xlarge-only, td.hide-for-xlarge-only, th.hide-for-xlarge-up, td.hide-for-xlarge-up, th.hide-for-xxlarge-only, td.hide-for-xxlarge-only, th.hide-for-xxlarge-up, td.hide-for-xxlarge-up {
     display: table-cell !important; } }
 
-/* #{$current-visibility-breakpoint} displays */
+/* large displays */
 @media only screen and (min-width:64.063em) {
   .hide-for-small-only, .show-for-small-up, .hide-for-small, .hide-for-small-down, .hide-for-medium-only, .show-for-medium-up, .hide-for-medium, .hide-for-medium-down, .show-for-large-only, .show-for-large-up, .show-for-large, .show-for-large-down, .hide-for-xlarge-only, .hide-for-xlarge-up, .hide-for-xxlarge-only, .hide-for-xxlarge-up {
     display: inherit !important; }
@@ -5379,7 +5377,7 @@ ul.off-canvas-list {
   th.hide-for-small-only, td.hide-for-small-only, th.show-for-small-up, td.show-for-small-up, th.hide-for-small, td.hide-for-small, th.hide-for-small-down, td.hide-for-small-down, th.hide-for-medium-only, td.hide-for-medium-only, th.show-for-medium-up, td.show-for-medium-up, th.hide-for-medium, td.hide-for-medium, th.hide-for-medium-down, td.hide-for-medium-down, th.show-for-large-only, td.show-for-large-only, th.show-for-large-up, td.show-for-large-up, th.show-for-large, td.show-for-large, th.show-for-large-down, td.show-for-large-down, th.hide-for-xlarge-only, td.hide-for-xlarge-only, th.hide-for-xlarge-up, td.hide-for-xlarge-up, th.hide-for-xxlarge-only, td.hide-for-xxlarge-only, th.hide-for-xxlarge-up, td.hide-for-xxlarge-up {
     display: table-cell !important; } }
 
-/* #{$current-visibility-breakpoint} displays */
+/* xlarge displays */
 @media only screen and (min-width:90.063em) {
   .hide-for-small-only, .show-for-small-up, .hide-for-small, .hide-for-small-down, .hide-for-medium-only, .show-for-medium-up, .hide-for-medium, .hide-for-medium-down, .hide-for-large-only, .show-for-large-up, .hide-for-large, .hide-for-large-down, .show-for-xlarge-only, .show-for-xlarge-up, .hide-for-xxlarge-only, .hide-for-xxlarge-up {
     display: inherit !important; }
@@ -5408,7 +5406,7 @@ ul.off-canvas-list {
   th.hide-for-small-only, td.hide-for-small-only, th.show-for-small-up, td.show-for-small-up, th.hide-for-small, td.hide-for-small, th.hide-for-small-down, td.hide-for-small-down, th.hide-for-medium-only, td.hide-for-medium-only, th.show-for-medium-up, td.show-for-medium-up, th.hide-for-medium, td.hide-for-medium, th.hide-for-medium-down, td.hide-for-medium-down, th.hide-for-large-only, td.hide-for-large-only, th.show-for-large-up, td.show-for-large-up, th.hide-for-large, td.hide-for-large, th.hide-for-large-down, td.hide-for-large-down, th.show-for-xlarge-only, td.show-for-xlarge-only, th.show-for-xlarge-up, td.show-for-xlarge-up, th.hide-for-xxlarge-only, td.hide-for-xxlarge-only, th.hide-for-xxlarge-up, td.hide-for-xxlarge-up {
     display: table-cell !important; } }
 
-/* #{$current-visibility-breakpoint} displays */
+/* xxlarge displays */
 @media only screen and (min-width:120.063em) {
   .hide-for-small-only, .show-for-small-up, .hide-for-small, .hide-for-small-down, .hide-for-medium-only, .show-for-medium-up, .hide-for-medium, .hide-for-medium-down, .hide-for-large-only, .show-for-large-up, .hide-for-large, .hide-for-large-down, .hide-for-xlarge-only, .show-for-xlarge-up, .show-for-xxlarge-only, .show-for-xxlarge-up {
     display: inherit !important; }
@@ -5570,7 +5568,7 @@ body {
 body p {
   font-family: Open Sans, sans-serif;
   font-size: 12px;
-  color: black;
+  color: #000;
   clear: none; }
 
 h1, h2, h3, h4, h5 {
@@ -5579,25 +5577,28 @@ h1, h2, h3, h4, h5 {
 
 h1 {
   font-size: 36px;
-  color: green; }
+  color: #008000; }
+  @media only screen and (max-width: 40em) {
+    h1 {
+      font-size: 28px; } }
 
 h2, h3 {
   font-weight: bold; }
 
 h2 {
   font-size: 24px;
-  color: black;
+  color: #000;
   margin: 0.2rem 0; }
 
 h3 {
   font-size: 18px;
-  color: #0099cc; }
+  color: #09c; }
 
 a {
-  color: #0099cc; }
+  color: #09c; }
 
 a:hover {
-  color: black; }
+  color: #000; }
 
 ul, ol, dl {
   list-style-position: inside;
@@ -5614,10 +5615,10 @@ ul, ol, dl {
 p.open {
   font-family: Open Sans, sans-serif;
   font-size: 14px;
-  color: black; }
+  color: #000; }
 
 a.open {
-  color: #0099cc;
+  color: #09c;
   font-family: Open Sans, sans-serif;
   font-size: 14px; }
 
@@ -5652,13 +5653,13 @@ header {
 
 #opener p {
   font-size: 18px;
-  color: black;
+  color: #000;
   font-family: Open Sans, sans-serif; }
 
 #phone {
   font-family: Open Sans, sans-serif;
   font-size: 20px;
-  color: green;
+  color: #008000;
   display: inline;
   padding-right: 0;
   float: right;
@@ -5682,10 +5683,10 @@ header {
   padding-left: 2px; }
 
 .content {
-  background-color: white;
-  -moz-box-shadow: 0px 0px 12px -5px black;
-  -webkit-box-shadow: 0px 0px 12px -5px black;
-  box-shadow: 0px 0px 12px -5px black; }
+  background-color: #fff;
+  -moz-box-shadow: 0px 0px 12px -5px #000;
+  -webkit-box-shadow: 0px 0px 12px -5px #000;
+  box-shadow: 0px 0px 12px -5px #000; }
 
 .side_space {
   padding: 0; }
@@ -5712,13 +5713,13 @@ header {
   display: block;
   font-family: Open Sans, sans-serif;
   font-size: 14px;
-  color: white; }
+  color: #fff; }
 
 .top-bar-section > ul > li > a {
   font-size: 18px; }
 
 .top-bar-section li:not(.has-form) a:not(.button):hover {
-  color: white;
+  color: #fff;
   background-color: #9acd68; }
 
 .top-bar-section li:not(.has-form) a:not(.button) {
@@ -5754,7 +5755,7 @@ header {
   content: "" !important; }
 
 .top-bar-section .dropdown li a {
-  color: white;
+  color: #fff;
   background-color: rgba(33, 157, 199, 0.7) !important; }
 
 .top-bar-section li:not(.has-form) a:not(.button) {
@@ -5764,7 +5765,7 @@ header {
   line-height: 36px; }
 
 .top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {
-  color: white;
+  color: #fff;
   background-color: rgba(33, 157, 199, 0.7) !important; }
 
 .top-bar-section ul li:hover:not(.has-form) > a {
@@ -5788,7 +5789,7 @@ header {
   background-color: #209cc7; }
 
 .left-off-canvas-menu li > a {
-  color: white; }
+  color: #fff; }
 
 .left-off-canvas-menu li > a:hover {
   color: #fcde74; }
@@ -5803,32 +5804,31 @@ header {
   margin-bottom: 0; }
 
 .metaslider .nivo-caption {
-  background-color: green;
-  border: 2px solid black;
+  background-color: #008000;
+  border: 2px solid #000;
   max-height: 86px;
   margin-top: 0;
   overflow: hidden; }
-
-@media only screen and (min-width:64.063em) {
-  .metaslider .nivo-caption {
-    width: 36%;
-    position: absolute;
-    left: 64%; } }
-
-@media only screen and (max-width: 40em) {
-  display: none; }
+  @media only screen and (min-width:64.063em) {
+    .metaslider .nivo-caption {
+      width: 36%;
+      position: absolute;
+      left: 64%; } }
+  @media only screen and (max-width: 40em) {
+    .metaslider .nivo-caption {
+      display: none !important; } }
 
 .metaslider .nivo-caption h3 {
   font-family: Open Sans, sans-serif;
   font-size: 18px;
-  color: white;
+  color: #fff;
   padding-left: 10px;
   font-weight: normal;
   padding: 5px 16px; }
 
 .metaslider .show-for-small-only.nivo-caption {
-  background-color: green;
-  border: 2px solid black;
+  background-color: #008000;
+  border: 2px solid #000;
   max-height: 86px;
   overflow: hidden;
   margin-top: 0; }
@@ -5850,7 +5850,7 @@ header {
   text-align: center;
   font-size: 14px;
   font-family: Open Sans, sans-serif;
-  color: black;
+  color: #000;
   padding-top: 30px; }
 
 .side-nav ul {
@@ -5862,7 +5862,7 @@ header {
 .side-nav li > p {
   font-size: 14px;
   font-family: Open Sans, sans-serif;
-  color: black; }
+  color: #000; }
 
 .side-nav li:hover {
   background-repeat: repeat;
@@ -5881,7 +5881,7 @@ header {
   margin-top: 30px; }
 
 #pup_txt {
-  color: black;
+  color: #000;
   padding-top: 43px;
   padding-right: 0;
   padding-bottom: 0;
@@ -5890,7 +5890,7 @@ header {
 #newsletter {
   margin: 0;
   padding: 0;
-  border: 1px solid green !important;
+  border: 1px solid #008000 !important;
   height: 50%;
   line-height: 180%;
   width: 75%;
@@ -5936,7 +5936,6 @@ footer {
   margin: 0 -15px;
   padding: 20px 10px 0 10px; }
 
-
 footer h2 {
   font-weight: normal; }
 
@@ -5945,11 +5944,11 @@ footer h2 {
   line-height: 100%; }
 
 .multi a:hover {
-  color: white; }
+  color: #fff; }
 
 #current {
   background-color: #9acd68;
-  color: white;
+  color: #fff;
   font-weight: bold; }
 
 .medium-1 {
@@ -5959,35 +5958,35 @@ footer h2 {
   /* fallback/image non-cover color */
   background-color: #14698d;
   /* Firefox 3.6+ */
-  background-image: -moz-linear-gradient(left, #14698d 0%, #ffffff 100%);
+  background-image: -moz-linear-gradient(left, #14698d 0%, #fff 100%);
   /* Safari 4+, Chrome 1+ */
-  background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, #14698d), color-stop(100%, #ffffff));
+  background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, #14698d), color-stop(100%, #fff));
   /* Safari 5.1+, Chrome 10+ */
-  background-image: -webkit-linear-gradient(left, #14698d 0%, #ffffff 100%);
+  background-image: -webkit-linear-gradient(left, #14698d 0%, #fff 100%);
   /* Opera 11.10+ */
-  background-image: -o-linear-gradient(left, #14698d 0%, #ffffff 100%);
+  background-image: -o-linear-gradient(left, #14698d 0%, #fff 100%);
   /* IE10+ */
-  background: -ms-linear-gradient(left, #14698d 0%, #ffffff 100%);
+  background: -ms-linear-gradient(left, #14698d 0%, #fff 100%);
   /* Standard */
-  background-image: linear-gradient(to left, #ffffff, #14698d);
+  background-image: linear-gradient(to left, #fff, #14698d);
   /* IE6-9 */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$from', endColorstr='$to',GradientType=1 ); }
 
 #h2_2 {
   /* fallback/image non-cover color */
-  background-color: green;
+  background-color: #008000;
   /* Firefox 3.6+ */
-  background-image: -moz-linear-gradient(left, #008000 0%, #ffffff 100%);
+  background-image: -moz-linear-gradient(left, #008000 0%, #fff 100%);
   /* Safari 4+, Chrome 1+ */
-  background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, #008000), color-stop(100%, #ffffff));
+  background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, #008000), color-stop(100%, #fff));
   /* Safari 5.1+, Chrome 10+ */
-  background-image: -webkit-linear-gradient(left, #008000 0%, #ffffff 100%);
+  background-image: -webkit-linear-gradient(left, #008000 0%, #fff 100%);
   /* Opera 11.10+ */
-  background-image: -o-linear-gradient(left, #008000 0%, #ffffff 100%);
+  background-image: -o-linear-gradient(left, #008000 0%, #fff 100%);
   /* IE10+ */
-  background: -ms-linear-gradient(left, #008000 0%, #ffffff 100%);
+  background: -ms-linear-gradient(left, #008000 0%, #fff 100%);
   /* Standard */
-  background-image: linear-gradient(to left, #ffffff, #008000);
+  background-image: linear-gradient(to left, #fff, #008000);
   /* IE6-9 */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$from', endColorstr='$to',GradientType=1 );
   margin-top: 20px; }
@@ -6002,7 +6001,7 @@ footer h2 {
   padding-left: 15px; }
   .event .img {
     padding: 0;
-    border: 1px solid green;
+    border: 1px solid #008000;
     margin-bottom: 30px;
     text-align: center;
     max-width: 220px; }
@@ -6015,8 +6014,8 @@ footer h2 {
 #homepage_featured_caption {
   font-family: Open Sans, sans-serif;
   font-size: 14px;
-  color: white;
-  background-color: green;
+  color: #fff;
+  background-color: #008000;
   font-style: italic;
   margin: 0;
   padding: 0 5px; }
@@ -6053,23 +6052,23 @@ footer h2 {
   font-family: Open Sans, sans-serif;
   font-weight: bold;
   font-size: 13px;
-  color: white;
-  border: 2px solid green;
+  color: #fff;
+  border: 2px solid #008000;
   background-color: #9acd68;
   padding: 3px 9px;
   border-radius: 5px;
-  -moz-box-shadow: 0px 5px 8px -6px black;
-  -webkit-box-shadow: 0px 5px 8px -6px black;
-  box-shadow: 0px 5px 8px -6px black;
+  -moz-box-shadow: 0px 5px 8px -6px #000;
+  -webkit-box-shadow: 0px 5px 8px -6px #000;
+  box-shadow: 0px 5px 8px -6px #000;
   text-transform: uppercase; }
 
 #previous:hover {
   font-family: Open Sans, sans-serif;
   font-weight: bold;
   font-size: 13px;
-  color: white;
+  color: #fff;
   border: 2px solid #9acd68;
-  background-color: green;
+  background-color: #008000;
   padding: 3px 9px;
   border-radius: 5px;
   text-transform: uppercase; }
@@ -6078,23 +6077,23 @@ footer h2 {
   font-family: Open Sans, sans-serif;
   font-weight: bold;
   font-size: 13px;
-  color: white;
-  border: 2px solid green;
+  color: #fff;
+  border: 2px solid #008000;
   background-color: #9acd68;
   padding: 3px 9px;
   border-radius: 5px;
-  -moz-box-shadow: 0px 5px 8px -6px black;
-  -webkit-box-shadow: 0px 5px 8px -6px black;
-  box-shadow: 0px 5px 8px -6px black;
+  -moz-box-shadow: 0px 5px 8px -6px #000;
+  -webkit-box-shadow: 0px 5px 8px -6px #000;
+  box-shadow: 0px 5px 8px -6px #000;
   text-transform: uppercase; }
 
 #next:hover {
   font-family: Open Sans, sans-serif;
   font-weight: bold;
   font-size: 13px;
-  color: white;
+  color: #fff;
   border: 2px solid #9acd68;
-  background-color: green;
+  background-color: #008000;
   padding: 3px 9px;
   border-radius: 5px;
   text-transform: uppercase; }
@@ -6127,13 +6126,13 @@ footer h2 {
 
 #gas a {
   text-decoration: underline;
-  color: black; }
+  color: #000; }
 
 #qbutton {
   background-color: #9acd68;
-  color: white;
+  color: #fff;
   width: 160px;
-  border: 3px solid white;
+  border: 3px solid #fff;
   font-family: Open Sans, sans-serif;
   font-weight: bold;
   font-size: 14px;
@@ -6183,8 +6182,8 @@ footer h2 {
 
 .qbutton {
   background-color: #9acd68;
-  color: white;
-  border: 2px 2px 2px 0 solid white;
+  color: #fff;
+  border: 2px 2px 2px 0 solid #fff;
   font-family: Open Sans, sans-serif;
   font-weight: bold;
   font-size: 14px;
@@ -6193,9 +6192,9 @@ footer h2 {
   border-bottom-left-radius: 5px;
   border-top-left-radius: 5px;
   padding: 0 0 0 3px;
-  -moz-box-shadow: -6px 5px 10px -8px black;
-  -webkit-box-shadow: -6px 5px 10px -8px black;
-  box-shadow: -6px 5px 10px -8px black;
+  -moz-box-shadow: -6px 5px 10px -8px #000;
+  -webkit-box-shadow: -6px 5px 10px -8px #000;
+  box-shadow: -6px 5px 10px -8px #000;
   float: right;
   margin-right: -3px;
   vertical-align: middle; }
@@ -6278,14 +6277,14 @@ footer span.bullet, #copyright span.bullet {
   float: left; }
 
 .ngg-gallery-thumbnail img {
-  background-color: white;
+  background-color: #ffffff;
   border: none !important;
   margin: 0 !important;
   padding: 4px;
   position: relative; }
 
 .photoTitle {
-  color: #008cba; }
+  color: #008CBA; }
 
 /* Images */
 .alignleft {
@@ -6448,6 +6447,9 @@ img.alignleft, img.alignright, img.aligncenter, div.wp-caption img {
 
 #blog-post .cycle-slide {
   font-size: 14px; }
+  @media only screen and (max-width: 40em) {
+    #blog-post .cycle-slide img {
+      display: none !important; } }
 
 #blog_wrapper {
   min-height: 220px; }
@@ -6463,6 +6465,66 @@ img.alignleft, img.alignright, img.aligncenter, div.wp-caption img {
   display: none; }
 
 /* End Blog & Search */
+/* for the mobile menu */
+aside.left-off-canvas-menu {
+  background: transparent;
+  background-color: #008CBA;
+  color: white; }
+
+aside.left-off-canvas-menu li.page_item {
+  display: block;
+  overflow: hidden;
+  position: relative; }
+
+aside.left-off-canvas-menu .off-canvas-list ul li a {
+  line-height: 20px;
+  color: white;
+  border-bottom: 1px solid #b1b3b6;
+  background-repeat: no-repeat;
+  background-position: 3px 50%; }
+
+aside.left-off-canvas-menu .off-canvas-list ul li a:hover {
+  background-color: #e7e7e7;
+  color: black; }
+
+aside.left-off-canvas-menu li.page_item_has_children a.toggle {
+  /*  background: url('../assets/cceoem-arrow-mmenu.png');
+  background-repeat: no-repeat;
+  background-position: 50% 3px;*/
+  border-left: 15px solid transparent;
+  border-right: 15px solid transparent;
+  border-top: 20px solid #e7e7e7;
+  border-bottom: 0;
+  font-size: 0;
+  height: 0;
+  line-height: 0;
+  padding: 0;
+  position: absolute;
+  right: 10px;
+  top: 13px;
+  width: 0; }
+
+aside.left-off-canvas-menu li.page_item_has_children a.toggle.open {
+  border-left: 15px solid transparent;
+  border-right: 15px solid transparent;
+  border-bottom: 20px solid #e7e7e7;
+  border-top: 0; }
+
+aside.left-off-canvas-menu li.page_item_has_children a.toggle.open:hover {
+  background-color: #008CBA; }
+
+aside.left-off-canvas-menu ul.children {
+  display: none; }
+
+aside.left-off-canvas-menu .off-canvas-list ul li > ul li > a {
+  padding-left: 10px;
+  margin-left: 25px;
+  line-height: 18px; }
+
+aside.left-off-canvas-menu ul.open {
+  display: block; }
+
+/* End Mobile Menu */
 /* Ninja Forms */
 .ninja-forms-form-wrap {
   margin-left: auto;
@@ -6490,7 +6552,7 @@ img.alignleft, img.alignright, img.aligncenter, div.wp-caption img {
   margin-bottom: 16px; }
 
 .ninja-forms-field-error > p {
-  color: white;
+  color: #fff;
   font-size: 12px;
   font-weight: bold;
   margin-top: -16px;
@@ -6500,7 +6562,7 @@ img.alignleft, img.alignright, img.aligncenter, div.wp-caption img {
   margin-bottom: 0; }
 
 .ninja-forms-success-msg > p, .ninja-forms-success-msg > div > p {
-  color: #43ac6a;
+  color: #43AC6A;
   font-size: 1.25rem;
   font-weight: bold; }
 
@@ -6581,7 +6643,7 @@ img.alignleft {
   display: inline; }
 
 img.alignleft, img.alignright, img.aligncenter, div.wp-caption img {
-  border: 1px solid green; }
+  border: 1px solid #008000; }
 
 .alignright {
   float: right; }
@@ -6593,13 +6655,13 @@ img.alignleft, img.alignright, img.aligncenter, div.wp-caption img {
   float: left; }
 
 .wp-caption {
-  background: green;
+  background: #008000;
   width: auto; }
 
 .wp-caption-text {
   font-family: Open Sans, sans-serif;
   font-size: 9px !important;
-  color: white;
+  color: #fff;
   font-style: italic;
   margin: 0;
   padding: 0 5px; }
diff --git a/footer.php b/footer.php
index 394b29d..1a09251 100755
--- a/footer.php
+++ b/footer.php
@@ -57,6 +57,7 @@
     <script>
         jQuery(document).ready(function(){
             jQuery(".top-bar > section > ul > li > a").attr('href','#');
+            jQuery(".left-off-canvas-menu > ul > li > a:first-child").attr('href','#');
         });
     
     </script>
diff --git a/front-page.php b/front-page.php
index 7350b05..21bd2f3 100755
--- a/front-page.php
+++ b/front-page.php
@@ -12,7 +12,7 @@
             ?>
     </div>
 </div>
-<div id="main" class="row" style="background-image: url(<?php bloginfo('template_url'); ?>/assets/content_back.png);background-position:right;background-repeat:repeat-y;background-size:100%;">
+<div id="main" class="row">
     <div class="small-12 medium-9 columns">
         <div class="row">
             <div class="small-11 left columns">
@@ -78,14 +78,12 @@
 
                                     <div class="cycle-pager small-12 medium-8 right">
                                         <a id="button-a" href="#" onclick="$('.cycle-slideshow').cycle('prev');return false;">
-                                            <div class="left cycle-button"
-                                                style="background-color:#9acd68;border-radius:5px;font-size:15px;line-height:13px;padding:10px;">
+                                            <div class="left cycle-button">
                                                 Previous
                                             </div>
                                         </a>
                                         <a id="button-b" href="#" onclick="$('.cycle-slideshow').cycle('next');return false;">
-                                            <div class="right cycle-button"
-                                                 style="background-color:#9acd68;border-radius:5px;font-size:15px;line-height:13px;padding:10px;">
+                                            <div class="right cycle-button">
                                                 Next
                                             </div>
                                         </a>
@@ -97,14 +95,14 @@
                 <!--/blog-->
                 <!--events-->
                 <div class="row">
-                    <div id="h2_2" class="small-10 text-centered columns" style="background-image: linear-gradient(to left, #fff, #008000);background-color:#008000">
+                    <div id="h2_2" class="small-10 text-centered columns">
                         
                         <h2 class="small-push-1"><?php echo date('Y');?> Holiday Schedule</h2>
                     </div>
                 </div>
                 <div class="row event">
                     <div class="medium-11 medium-push-1 columns side_space">
-                        <div class="img small-7 small-centered medium-5 columns" style="margin-bottom:30px;">
+                        <div class="img small-7 small-centered medium-5 columns">
                             <div
                             <?php
                                 if ( has_post_thumbnail($homepage_ID) ) {
@@ -116,8 +114,7 @@
                                 }
                             ?>
                             ></div>
-                            <div id="homepage_featured_caption" style="background-color:#008000;color: #fff;font-family: Open Sans;font-size:14px;
-                                 font-style: italic;margin:0;padding:0 5px;"> 
+                            <div id="homepage_featured_caption"> 
                                      <?php echo get_post(get_post_thumbnail_id($homepage_ID))->post_excerpt; ?>
                             </div>
                         </div>
diff --git a/functions.php b/functions.php
index b9e9854..c47e720 100755
--- a/functions.php
+++ b/functions.php
@@ -61,7 +61,7 @@ function glm_site_scripts()
 {
     wp_enqueue_script(
         'modernizr',
-        get_template_directory_uri() . '/js/vendor/modernizr.js'
+        get_template_directory_uri() . '/js/modernizr/modernizr.min.js'
     );
     wp_enqueue_script(
         'jquery',
diff --git a/header.php b/header.php
index f4cb6d8..4102f23 100755
--- a/header.php
+++ b/header.php
@@ -14,8 +14,8 @@
         <div class="off-canvas-wrap" data-offcanvas>
             <div class="inner-wrap">
                 <aside class="left-off-canvas-menu">
-                    <?php glm_page_menu(); ?>
                 </aside>
+                <?php get_sidebar(); ?>
                 <div class="row content">
                     <div class="small-12 columns">
                         <header>
diff --git a/js/pageSetup.js b/js/pageSetup.js
index 372a4e6..fd146b9 100644
--- a/js/pageSetup.js
+++ b/js/pageSetup.js
@@ -1,6 +1,6 @@
 $(document).foundation();
 $(document).ready(function () {
-    $('ul.dropdown').each(function () {
+    $('ul.children').each(function () {
         $(this).before('<a class="toggle" href="#"></a>');
     });
     $('a.toggle').click('click', function () {
diff --git a/scss/_structure.scss b/scss/_structure.scss
index e7baf5e..8c74f81 100755
--- a/scss/_structure.scss
+++ b/scss/_structure.scss
@@ -15,6 +15,9 @@ h1, h2, h3, h4, h5 {
 h1 {
     font-size: 36px;
     color: #008000;
+    @media #{$small-only} {
+        font-size:28px;
+    }
 }
 h2, h3 {
     font-weight: bold;
@@ -262,17 +265,16 @@ header {
     max-height: 86px;
     margin-top: 0;
     overflow: hidden;
-}
-@media #{$large-up} {
-    .metaslider .nivo-caption {
+    @media #{$large-up} {
         width: 36%;
         position: absolute;
         left: 64%;
     }
+    @media #{$small-only} {
+        display: none !important;
+    }
 }
-@media #{$small-only} {
-    display: none;
-}
+
 .metaslider .nivo-caption h3 {
     font-family: Open Sans, sans-serif;
     font-size: 18px;
@@ -941,6 +943,11 @@ img.alignleft, img.alignright, img.aligncenter, div.wp-caption img {
     }
     #blog-post .cycle-slide {
         font-size: 14px;
+        @media #{$small-only} {
+            img {
+                display: none !important;
+            }
+        }
     }
     #blog_wrapper {
         min-height: 220px;
@@ -956,7 +963,69 @@ img.alignleft, img.alignright, img.aligncenter, div.wp-caption img {
     .cycle-slide .wp-caption {
         display: none;
     }
-    /* End Blog & Search */
+/* End Blog & Search */
+    
+ 
+/* for the mobile menu */
+aside.left-off-canvas-menu {
+        content:"lalalalalalalalalalalalala";
+  background: transparent;
+  background-color: $primary-color;
+  color: white;
+}
+aside.left-off-canvas-menu li.page_item {
+  display: block;
+  overflow: hidden;
+  position: relative;
+}
+aside.left-off-canvas-menu .off-canvas-list ul li a {
+  line-height: 20px;
+  color: white;
+  border-bottom: 1px solid #b1b3b6;
+  background-repeat: no-repeat;
+  background-position: 3px 50%;
+}
+aside.left-off-canvas-menu .off-canvas-list ul li a:hover {
+  background-color: $secondary-color;
+  color: black;
+}
+aside.left-off-canvas-menu li.page_item_has_children a.toggle {
+/*  background: url('../assets/cceoem-arrow-mmenu.png');
+  background-repeat: no-repeat;
+  background-position: 50% 3px;*/
+  @include off-canvas-arrow(down);
+  font-size: 0;
+  height: 0;
+  line-height: 0;
+  padding: 0;
+  position: absolute;
+  right: 10px;
+  top: 13px;
+  width: 0;
+}
+aside.left-off-canvas-menu li.page_item_has_children a.toggle.open {
+    @include off-canvas-arrow(up);
+}
+aside.left-off-canvas-menu li.page_item_has_children a.toggle.open:hover {
+    background-color: $primary-color;
+}
+aside.left-off-canvas-menu ul.children {
+  display: none;
+}
+aside.left-off-canvas-menu .off-canvas-list ul li > ul li > a {
+  padding-left: 10px;
+  margin-left: 25px;
+  line-height: 18px;
+}
+aside.left-off-canvas-menu ul.open {
+  display: block;
+}
+aside.left-off-canvas-menu > ul > li > a:first-child {
+    
+} 
+/* End Mobile Menu */   
+    
+    
     
     
 /* Ninja Forms */
diff --git a/scss/app.scss b/scss/app.scss
index cd8dd1b..82bea11 100755
--- a/scss/app.scss
+++ b/scss/app.scss
@@ -1,8 +1,10 @@
+@import "mixins/gradients";
+@import "mixins/off-canvas-arrow";
+
 @import "settings";
 @import "foundation";
-@import "gradients";
-@import "structure";
 @import "wordpress";
+@import "structure";
 
 // Or selectively include components
 // @import
diff --git a/scss/_gradients.scss b/scss/mixins/_gradients.scss
similarity index 100%
rename from scss/_gradients.scss
rename to scss/mixins/_gradients.scss
diff --git a/scss/mixins/_off-canvas-arrow.scss b/scss/mixins/_off-canvas-arrow.scss
new file mode 100644
index 0000000..9712a25
--- /dev/null
+++ b/scss/mixins/_off-canvas-arrow.scss
@@ -0,0 +1,13 @@
+$direction: down;
+@mixin off-canvas-arrow($direction) {
+  border-left: 15px solid transparent;
+  border-right: 15px solid transparent;
+   @if $direction == 'up' {
+    border-bottom: 20px solid $secondary-color;
+    border-top: 0;
+    // if width is not passed, or empty do this
+   } @else {
+    border-top: 20px solid $secondary-color;
+    border-bottom: 0;
+   }
+}
\ No newline at end of file
diff --git a/sidebar.php b/sidebar.php
index 7bc7646..6f05ef7 100755
--- a/sidebar.php
+++ b/sidebar.php
@@ -1,9 +1,19 @@
-                <div class="small-12 columns medium-3 side-nav">
-                    <ul style="list-style-type: none;">
-                        <li>
-                            <a href="<?php echo esc_url( get_permalink( get_page_by_title( 'Recycling Totes' ) ) ); ?>"><img src="<?php echo get_template_directory_uri(); ?>/assets/bin-3.png"><p>Get a Recycle Tote</p></a></li>
-                        <li><a id="pointer" href="<?php echo esc_url( get_permalink( get_page_by_title( 'Drop-Off Center / Transfer Station' ) ) ); ?>"></a><p>Hours & Locations</p></li>
-                        <li><a id="broch" href="<?php echo esc_url( get_permalink( get_page_by_title( 'Recycling Guide' ) ) ); ?>"></a><p>Get a Recycling Guide</p></li>
-                        <li><a id="pup"><img src="<?php echo get_template_directory_uri(); ?>/assets/pup.png"></a><a id="pup_txt">eNews</a><input type="text" id="newsletter" class="right" placeholder="  Enter email to sign up"><p class="open">The EmmetRecycling.org Retriever</p></li>
-                    </ul>
-                </div>
+
+                    <aside class="left-off-canvas-menu">
+                        <ul class="off-canvas-list">
+                            <?php wp_nav_menu(array('menu_class' => ''));?>
+                        </ul>
+                        <div id="searchform_container" class="small-12">
+                            <form role="search" method="get" id="searchform" action="<?php echo home_url('/'); ?>">
+                                <div id="search_off_canvas">
+                                        <div>
+                                            <input name="s" id="s" type="text" placeholder="  Search the site">
+                                        </div>
+                                        <div class="small-11 centered columns button">Search</div>
+                                </div>
+                            </form>
+                        </div>
+                        <?php if (is_active_sidebar('sidebar-l')) :?>
+                            <?php dynamic_sidebar('sidebar-l');?>
+                        <?php endif;?>
+                    </aside> <!-- left-off-canvas-menu -->
-- 
2.17.1