Misc CSS fixes

  * set max content width to 960px
  * created mixin for bold font
  * move app-header content to global header
  * minor global changes
  * changed input alignment for network config inputs
  * added pop-out button class
  * changed lightgrey color
  * fixed accordion header actions responsiveness
  * fixed input box border colors

Change-Id: Iffe26d526439d7f2bb6808528a975ab7374ff1b2
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>

28 files changed, 553 insertions, 272 deletions

diff --git a/app/common/styles/base/buttons.scss b/app/common/styles/base/buttons.scss
index 9c5ba92..2f53391 100644
--- a/app/common/styles/base/buttons.scss
+++ b/app/common/styles/base/buttons.scss
@@ -1,10 +1,9 @@
 button, .button, input[type="submit"], .submit {
-  font-weight: bold;
   font-size: 1em;
-  @include fontFamily;
+  @include fontFamilyBold;
   text-transform: none;
   border-radius: 3px;
-  padding: .8rem 3.5rem .5rem;
+  padding: .5rem 2rem .5rem;
   height: auto;
   border: 0;
   overflow: hidden;
@@ -28,7 +27,7 @@ button, .button, input[type="submit"], .submit {
 input[type="submit"] {
   color: $primebtn__text;
   background: $primebtn__bg;
-  min-height: 50px;
+  min-height: 40px;
   &:hover {
     background: lighten($primebtn__bg, 8%);
     @include fastTransition-all;
@@ -58,7 +57,7 @@ input[type="submit"] {
   color: $secbtn__text;
   background: transparent;
   border: 2px solid $secbtn__border;
-  min-height: 50px;
+  min-height: 40px;
   &:hover {
     background: $lightbg__accent;
     cursor: pointer;
@@ -90,3 +89,34 @@ input[type="submit"] {
     margin-top: -3px;
   }
 }
+
+.btn-pop-out {
+  position: relative;
+  padding: 0 0 1em 2em;
+  color: $black;
+  &:hover {
+    text-decoration: underline;
+  }
+  &:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 3px;
+    width: 25px;
+    height: 20px;
+    display: inline-block;
+    border: 1px solid $black;
+    border-top: 4px solid $black;
+  }
+  &:after {
+    content: '\2794';
+    position: absolute;
+    transform: rotate(-45deg);
+    font-size: .9em;
+    font-weight: 700;
+    vertical-align: middle;
+    display: inline-block;
+    left: 11px;
+    top: 4px;
+  }
+}
\ No newline at end of file
diff --git a/app/common/styles/base/colors.scss b/app/common/styles/base/colors.scss
index 76f65a9..a5a9d1b 100644
--- a/app/common/styles/base/colors.scss
+++ b/app/common/styles/base/colors.scss
@@ -3,11 +3,13 @@ $white: #ffffff;
 $black: #333;
 $darkgrey: #666;
 $medgrey: #d7dbe0;
-$lightgrey: #ccc;
+$lightgrey: #f5f7fa;
 $lightblue: #f0f2f5;
+$medblue: #3f71ec;
 $purple: #5A3EC8;
 $darkpurple: #20214f;
-$field__disabled: #d8d8d8;
+$field__disabled: #e6e6e6;
+$field__focus: #3C6DEF;
 $btn__disabled-txt: #a6a5a6;
 $btn__disabled-bg: #d8d8d8;
 
@@ -69,7 +71,7 @@ $not-present: $medium-lightbg;
 // Links
 $links: #648FFF;
 $links__hover: $lightbg__primary;
-$links__visited: $darkbg__primary;
+$links__visited: #8ea7ea;
 $links__disabled: rgba(27, 40, 52, 0.70);
 
 // Navigation
diff --git a/app/common/styles/base/core.scss b/app/common/styles/base/core.scss
index 13ba9e6..3dc8fea 100644
--- a/app/common/styles/base/core.scss
+++ b/app/common/styles/base/core.scss
@@ -16,7 +16,7 @@ a {
     color: $links__visited;
   }
   &:hover {
-    color: $links__hover;
+    text-decoration: underline;
   }
   :focus {
     color: $links;
diff --git a/app/common/styles/base/forms.scss b/app/common/styles/base/forms.scss
index b49c5b2..1157fa5 100644
--- a/app/common/styles/base/forms.scss
+++ b/app/common/styles/base/forms.scss
@@ -19,7 +19,7 @@ input[type='url'],
 input[type='text'],
 textarea {
   border-radius: 0px;
-  border: 1px solid $lightgrey;
+  border: 1px solid $medgrey;
   height: 3.1em;
   margin: 0 0 1em 0;
   background: $white;
@@ -27,17 +27,29 @@ textarea {
   transition: none !important;
   &:focus {
     border-color: $lightbg__accent;
-    border-bottom: 5px solid $lightbg__primary;
+    box-shadow: 0 -5px $field__focus inset;
   }
-  &:disabled, .disabled {
+  &:disabled,
+  .disabled {
     background: $field__disabled;
     border: 1px solid $lightbg__grey;
   }
   &.input__error {
-    border-color: $error-color;
+    box-shadow: 0 -5px $error-color inset;
+    color: $error-color;
+    &:focus {
+      box-shadow: 0 -5px $field__focus inset;
+    }
   }
 }
 
+input[readonly],
+input[readonly]:focus{
+  box-shadow: 0 0 0;
+  background: $field__disabled;
+  border: 1px solid $lightbg__grey;
+}
+
 textarea { padding: .2em;
   height: auto;}
 input[type="submit"], .submit {
diff --git a/app/common/styles/base/foundation.scss b/app/common/styles/base/foundation.scss
index 910be7a..9c31f8f 100644
--- a/app/common/styles/base/foundation.scss
+++ b/app/common/styles/base/foundation.scss
@@ -814,7 +814,7 @@ select[multiple] {
     display: block !important; } }
 
 .row {
-  max-width: 90rem;
+  max-width: 60.38rem; //960px
   margin-right: auto;
   margin-left: auto; }
 .row::before, .row::after {
diff --git a/app/common/styles/base/mixins.scss b/app/common/styles/base/mixins.scss
index acc8fd4..e29a4fc 100644
--- a/app/common/styles/base/mixins.scss
+++ b/app/common/styles/base/mixins.scss
@@ -30,11 +30,39 @@
   font-weight: 200;
 }
 
+@mixin fontFamilyBold {
+  font-family: Helvetica, Arial, Verdana, sans-serif;
+  font-weight: 700;
+}
+
 @mixin fontCourierBold {
   font-family: "Courier New", Helvetica, arial, sans-serif;
   font-weight: 700;
 }
 
+//Navigation icons
+@mixin navIcons {
+  color: $white;
+  fill: $white;
+  max-height: 40px;
+  stroke-width: .5;
+  display: block;
+  width: 40px;
+  margin: 0 auto .5em auto;
+  .st0 {
+    fill: none;
+    stroke: #fff;
+    stroke-width: 2;
+    stroke-miterlimit: 10;
+  }
+  .st1 {
+    fill: none;
+    stroke: #fff;
+    stroke-width: 4;
+    stroke-miterlimit: 10;
+  }
+}
+
 //Transitions mixin
 @mixin fastTransition-all {
   transition: all .5s ease;
@@ -71,6 +99,10 @@
   min-width: calc(100% * (1/2) - 5px);
 }
 
+@mixin vertCenter {
+  top: 50%;
+  transform: translateY(-50%);
+}
 
 @mixin indeterminate-bar {
   background-image: repeating-linear-gradient(-45deg, rgba(251, 234, 174, 0.35), rgba(251, 234, 174, 0.35) 25px, rgba(244, 176, 0, 0.45) 25px, rgba(244, 176, 0, 0.45) 50px);
diff --git a/app/common/styles/base/typography.scss b/app/common/styles/base/typography.scss
index dfad5a4..a9b65b2 100644
--- a/app/common/styles/base/typography.scss
+++ b/app/common/styles/base/typography.scss
@@ -52,4 +52,5 @@ h5, .h5 {
 .courier-bold {
   font-family: "Courier New", Helvetica, arial, sans-serif;
   font-weight: 700;
-}
\ No newline at end of file
+  margin-bottom: 0;
+}
diff --git a/app/common/styles/base/utility.scss b/app/common/styles/base/utility.scss
index 5982d0f..80449f5 100644
--- a/app/common/styles/base/utility.scss
+++ b/app/common/styles/base/utility.scss
@@ -53,19 +53,19 @@
 }
 
 .no-margin {
-  margin: 0px !important;
+  margin: 0 !important;
 }
 
 .no-padding {
-  padding:0px !important;
+  padding:0 !important;
 }
 
 .no-bottom-margin {
-  margin-bottom: 0px !important;
+  margin-bottom: 0 !important;
 }
 
 .no-top-margin {
-  margin-top: 0px !important;
+  margin-top: 0 !important;
 }
 
 .btm-border-grey {
diff --git a/app/common/styles/components/form-elements.scss b/app/common/styles/components/form-elements.scss
index e101385..0515926 100644
--- a/app/common/styles/components/form-elements.scss
+++ b/app/common/styles/components/form-elements.scss
@@ -3,7 +3,10 @@
   position: relative;
   padding: .5em .8em;
   margin-top: -10px;
-  border: 1px solid $lightgrey;
+  border: 1px solid $medgrey;
+  min-width: 70px;
+  padding-right: 25px;
+  font-weight: 400;
   &.active,
   &:hover {
     background: $dropdown__focus-bg;
@@ -13,8 +16,11 @@
     display: inline-block;
     margin-left: 5px;
     font-size: .8em;
-    transform: rotate(90deg);
+    transform: translateY(-50%) rotate(90deg);
     color: $lightbg__primary;
+    position: absolute;
+    right: .8em;
+    top: 50%;
   }
 }
 
@@ -41,6 +47,7 @@
     padding: 1em 1em 1em 1.8em;
     text-align: left;
     width: 100%;
+    font-weight: 400;
     &:hover {
       background: $dropdown__focus-bg;
     }
@@ -81,15 +88,14 @@
 
 // Checkbox
 
-.control-check {
-  font-size: 18px;
+.control-check,
+.control-radio {
   position: relative;
   display: inline-block;
   margin-bottom: 15px;
-  padding-left: 1em;
   padding-top: 7px;
   cursor: pointer;
-  line-height: .5;
+  line-height: initial;
 }
 
 .control-check input {
@@ -108,10 +114,6 @@
   border: 1px solid $lightgrey;
 }
 
-.control--radio .control__indicator {
-  border-radius: 50%;
-}
-
 /* Hover and focus states */
 .control-check:hover input ~ .control__indicator,
 .control-check input:focus ~ .control__indicator {
@@ -169,4 +171,97 @@
 .control-check input:disabled ~ .control__indicator:after {
   border-color: $white;
   color: $white;
+}
+
+// Radio Buttons
+.control-radio {
+  padding-left: 3em;
+}
+.control-radio.disabled:hover {
+  cursor: default;
+}
+.control-radio .control__indicator {
+  position: absolute;
+  top: 2px;
+  left: 0;
+  width: 30px;
+  height: 30px;
+  background: $white;
+  border: 2px solid $darkgrey;
+}
+.control-radio input{
+  position: absolute;
+  z-index: -1;
+  opacity: 0;
+}
+
+.control-radio .control__indicator {
+  border-radius: 50%;
+}
+
+/* Hover and focus states */
+.control-radio input:focus ~ .control__indicator {
+  background: $primebtn__bg;
+  outline: 1px solid $primebtn__bg;
+  outline-offset: 3px;
+}
+
+.control-radio input:checked ~ .control__indicator {
+  background: $lightbg__accent;
+  border: 2px solid $primebtn__bg;
+}
+
+/* Disabled state */
+.control-radio input:disabled ~ .control__indicator{
+  pointer-events: none;
+  opacity: .6;
+  background: #ccc;
+  border: 1px solid $lightgrey;
+}
+
+.control-radio:hover > input:disabled ~ .control__indicator{
+  outline: 0;
+}
+
+.control-radio:hover input:disabled {
+  cursor: default;
+}
+
+/* mark */
+.control__indicator:after {
+  position: absolute;
+  display: none;
+  content: '';
+}
+
+/* Show mark */
+.control-radio input:checked ~ .control__indicator:after {
+  display: block;
+}
+
+/* Disabled tick colour */
+.control-radio input:disabled ~ .control__indicator:after{
+  border-color: $white;
+  color: $white;
+}
+
+/* Radio button inner circle */
+.control-radio .control__indicator:after {
+  top: 4px;
+  left: 4px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: $primebtn__bg;
+}
+
+.control-radio:hover .control__indicator:after {
+  display: block;
+}
+
+/* Disabled circle colour */
+.control-radio input:disabled ~ .control__indicator:after {
+  background: #7b7b7b;
+  width: 20px;
+  height: 20px;
 }
\ No newline at end of file
diff --git a/app/common/styles/components/table.scss b/app/common/styles/components/table.scss
index e69de29..63d6cf7 100644
--- a/app/common/styles/components/table.scss
+++ b/app/common/styles/components/table.scss
@@ -0,0 +1,91 @@
+
+// Table Header
+.table-header {
+  width: 100%;
+  color: $black;
+  line-height: 30px;
+  padding: 10px 15px;
+
+  @include mediaQuery(medium) {
+    padding: 15px 20px;
+  }
+
+  @include mediaQuery(large) {
+    padding: 15px 30px;
+  }
+}
+
+
+// Table
+.table {
+  width: 100%;
+}
+
+.table__row {
+  display: flex;
+  width: 100%;
+  max-width: calc(100vw - 30px);
+  flex-wrap: wrap;
+  border-bottom: 1px solid $medgrey;
+  border-left: 1px solid $medgrey;
+  border-right: 1px solid $medgrey;
+  padding: 5px 0;
+
+  @include mediaQuery(small) {
+    padding: 0;
+  }
+}
+
+.table__cell {
+  flex: 0 0 100%;
+  line-height: 20px;
+  padding: 5px 15px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  @include mediaQuery(small) {
+    flex: 1;
+    padding: 15px 20px;
+  }
+
+  @include mediaQuery(large) {
+    padding: 15px 30px;
+  }
+}
+
+.table__cell-label {
+  display: inline-block;
+  font-weight: 700;
+  min-width: 50%;
+  padding-right: 15px;
+
+  @include mediaQuery(small) {
+    display: none;
+  }
+}
+
+// Table Head
+.table__head {
+  .table__row {
+    display: none;
+    font-weight: 700;
+    border-bottom: 1px solid $medgrey;
+    background-color: $darkbg__primary;
+    color: $white;
+
+    @include mediaQuery(small) {
+      display: flex;
+    }
+
+    .table__cell {
+      @include fastTransition-all();
+      position: relative;
+
+      &:last-child {
+        border: 0;
+      }
+    }
+  }
+}
+
diff --git a/app/common/styles/directives/app-header.scss b/app/common/styles/directives/app-header.scss
index 9b7dff5..e69de29 100644
--- a/app/common/styles/directives/app-header.scss
+++ b/app/common/styles/directives/app-header.scss
@@ -1,163 +0,0 @@
-$logoHeight: 30px;
-$logoMaxHeight: 100px;
-$logoMaxWidth: 125px;
-
-#header__wrapper {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 100;
-}
-
-.app__version {
-  margin-left: 1em;
-  display: none;
-  @include mediaQuery(x-small) {
-    display: inline-block;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-}
-
-header {
-  position: relative;
-  background: #000;
-  color: $white;
-  overflow: hidden;
-}
-
-.header__logout {
-  float: right;
-  display: inline-block;
-  color: $white;
-  font-size: .9em;
-  text-decoration: none;
-  padding: 1em;
-  &:visited {
-    color: $white;
-  }
-}
-
-.header__functions-wrapper {
-  color: $white;
-  background: $darkbg__primary;
-  padding: 0 1.1em;
-  box-sizing: border-box;
-  display: block;
-  position: relative;
-  overflow: hidden;
-  min-height: 5em;
-  #header__server-name {
-    //margin-top: .8em;
-    font-size: 1.5em;
-    font-weight: 500;
-    color: $white;
-    padding: .9em;
-    height: 100%;
-    background: transparent;
-    max-width: 350px;
-    white-space: nowrap;
-  }
-  .logo__wrapper {
-    padding-top: .5em;
-    //position: absolute;
-    //top: 50%;
-    //transform: translateY(-50%);
-  }
-
-  #header__logo {
-    vertical-align: middle;
-    margin: 1em;
-    float: left;
-    height: $logoHeight; //required for <SVG> logos - can remove if using img
-    max-height: $logoMaxHeight;
-    max-width: $logoMaxWidth;
-    width: auto;
-  }
-  #header__funct-icon {
-    display: block;
-    font-size: 2.3em;
-    color: $white;
-    padding: 0;
-    &:before {
-      content: '\2261';
-      line-height: .5;
-      font-size: 2em;
-      padding: 0 .3em;
-    }
-    @include mediaQuery(medium) {
-      display: none;
-    }
-  }
-
-  .header__functions {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    background: $darkbg__primary;
-    z-index: 100;
-    @include fastTransition-all;
-    span {
-      display: block;
-      color: $white;
-      font-size: 1em;
-    }
-    a, p, button {
-      display: block;
-      float: left;
-      text-decoration: none;
-      border-left: 1px solid #384456;
-      color: $lightgrey;
-      margin: 0;
-      padding: 1.250em 1.688em;
-      height: 100%;
-      font-size: 0.875em;
-      line-height: 1;
-      > span {
-        font-size: 1rem;
-        font-weight: bold;
-      }
-    }
-  }
-
-  // hide/show header functions based on screen size
-  .header__functions > #header__server-health {
-    display: none;
-    @include mediaQuery(small) {
-      display: block;
-    }
-  }
-
-  .header__functions > .header__refresh {
-    display: none;
-    @include mediaQuery(medium) {
-      display: block;
-    }
-  }
-
-  .header__functions {
-    .header__refresh {
-      color: $lightgrey;
-      line-height: 1.8;
-      margin-top: -4px;
-    }
-  }
-  .header__server-power,
-  .header__page-refresh {
-    &:hover {
-      background: rgba(60, 109, 240, .4);
-    }
-  }
-  .header__page-refresh {
-    img {
-      stroke: $white;
-      height: 22px;
-      width: 24px;
-    }
-  }
-}
-
-// end header__functions-wrapper
diff --git a/app/common/styles/directives/app-navigation.scss b/app/common/styles/directives/app-navigation.scss
index 4591f5c..496fbf7 100644
--- a/app/common/styles/directives/app-navigation.scss
+++ b/app/common/styles/directives/app-navigation.scss
@@ -17,6 +17,10 @@ $nav__seclvlWidth: 240px;
   li {
     margin: 0;
   }
+  //svg icons
+  .nav-icon {
+    @include navIcons;
+  }
   .button, button, a {
     background: transparent;
     height: auto;
@@ -31,12 +35,8 @@ $nav__seclvlWidth: 240px;
     white-space: normal;
     border-radius: 0;
     text-decoration: none;
-    .nav__icon {
-      color: $white;
-      max-height: 40px;
-      stroke-width: .5;
-      margin-bottom: -.5em;
-    }
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid transparent;
     a {
       margin-bottom: 5px;
     }
@@ -44,7 +44,7 @@ $nav__seclvlWidth: 240px;
       margin: 1em 0 0 0;
       display: block;
       font-size: .9em;
-      font-weight: normal;
+      font-weight: 700;
       line-height: 1rem;
     }
 
@@ -60,24 +60,50 @@ $nav__seclvlWidth: 240px;
     &:hover {
       background: $nav__second-level-color;
       fill: $black;
-      color: $black;
+      color: $medblue;
       padding: 1em;
       border-radius: 0;
+      border-top: 1px solid $medgrey;
+      border-bottom: 1px solid $medgrey;
       .nav__icon-help__outer {
         stroke: $black;
       }
       .nav__icon-help__inner {
         fill: $lightbg__primary;
       }
+      .nav-icon {
+        fill: $medblue;
+        color: $medblue;
+        .st0 {
+          stroke: $medblue;
+        }
+        .st1 {
+          fill: $medblue;
+          color: $medblue;
+          stroke: $medblue;
+        }
+      }
     }
   }
   .opened {
     background: $nav__second-level-color;
     fill: $black;
-    color: $black;
+    color: $medblue;
     .nav__icon-help__outer {
       stroke: $lightbg__primary;
     }
+    .nav-icon {
+      fill: $medblue;
+      color: $medblue;
+      .st0 {
+        stroke: $medblue;
+      }
+      .st1 {
+        fill: $medblue;
+        color: $medblue;
+        stroke: $medblue;
+      }
+    }
   }
 }
 
diff --git a/app/common/styles/elements/accordion.scss b/app/common/styles/elements/accordion.scss
index c3d9e0f..7e10227 100644
--- a/app/common/styles/elements/accordion.scss
+++ b/app/common/styles/elements/accordion.scss
@@ -8,11 +8,8 @@
   color: $white;
   margin-left: 0;
   .event__actions {
-    margin-top: 1em;
     margin-right: 10px;
-    @include mediaQuery(medium) {
-      margin-top: -6px;
-    }
+    margin-top: -6px;
     @include mediaQuery(large) {
       margin-right: -20px;
     }
diff --git a/app/common/styles/elements/content-search.scss b/app/common/styles/elements/content-search.scss
index af14e05..b1aae36 100644
--- a/app/common/styles/elements/content-search.scss
+++ b/app/common/styles/elements/content-search.scss
@@ -13,7 +13,7 @@
 
   #content__search-input {
     margin: 0;
-    border: 1px solid $lightgrey;
+    border: 1px solid $medgrey;
     padding-left: 40px;
     padding-right: 5px;
     &:focus {
diff --git a/app/common/styles/elements/export.scss b/app/common/styles/elements/export.scss
index 45b910a..ea0ab92 100644
--- a/app/common/styles/elements/export.scss
+++ b/app/common/styles/elements/export.scss
@@ -1,19 +1,17 @@
 //Export button
 .btn-export {
-  text-transform: capitalize;
   color: $black;
   font-size: .9em;
   font-weight: 700;
   position: relative;
   padding: 0 0 1em 2em;
   margin-right: .6em;
+  text-decoration: none;
+  margin-top: 7px;
   &:hover {
     text-decoration: underline;
   }
 }
-.btn-export {
-  margin-top: 7px;
-}
 .btn-export:before {
   content: '\21E5';
   position: absolute;
diff --git a/app/common/styles/elements/inline-confirm.scss b/app/common/styles/elements/inline-confirm.scss
index f2da19e..fe23cb8 100644
--- a/app/common/styles/elements/inline-confirm.scss
+++ b/app/common/styles/elements/inline-confirm.scss
@@ -3,7 +3,6 @@
 .inline__confirm {
   position: absolute;
   top: 0;
-  right: 0;
   transform: translateY(-103%);
   width: 100%;
   height: 100%;
@@ -22,10 +21,6 @@
 
 // Power confirmation buttons
 .inline__confirm-buttons {
-  position: absolute;
-  top: 50%;
-  right: 1em;
-  transform: translateY(-50%);
   .btn-primary {
     background: transparent;
     border: 2px solid $white;
@@ -46,7 +41,6 @@
 // confirmation message
 .inline__confirm-message {
   display: inline-block;
-  max-width: 50%;
 }
 
 // Power confirmation message icon
diff --git a/app/common/styles/elements/status.scss b/app/common/styles/elements/status.scss
index 22d99b8..7d9b57a 100644
--- a/app/common/styles/elements/status.scss
+++ b/app/common/styles/elements/status.scss
@@ -3,6 +3,7 @@
   content: '\25CF';
   display: inline-block;
   font-size: 2em;
+  color: $status-ok;
   margin-right: .1em;
   transform: translateY(2px);
   @include slowTransition-all;
@@ -40,7 +41,6 @@
 }
 
 .status-light__good {
-  color: $status-ok;
   &::before {
     @include status-light__good;
   }
diff --git a/app/common/styles/index.scss b/app/common/styles/index.scss
index 13804a7..4288740 100644
--- a/app/common/styles/index.scss
+++ b/app/common/styles/index.scss
@@ -1,4 +1,3 @@
-
 @import "./base/index.scss";
 @import "./elements/index.scss";
 @import "./components/index.scss";
diff --git a/app/common/styles/layout/content.scss b/app/common/styles/layout/content.scss
index 1547e30..13dbe44 100644
--- a/app/common/styles/layout/content.scss
+++ b/app/common/styles/layout/content.scss
@@ -7,6 +7,7 @@ $nav__seclvlWidth: 240px;
   position: relative;
   border-bottom: 1px solid $lightbg__grey;
   margin: 1.625em 0 1.2em 0;
+  padding-left: 0;
   .h4 {
     padding: 0;
     margin: 0 0 .5em 0;
diff --git a/app/common/styles/layout/header.scss b/app/common/styles/layout/header.scss
new file mode 100644
index 0000000..9b7dff5
--- /dev/null
+++ b/app/common/styles/layout/header.scss
@@ -0,0 +1,163 @@
+$logoHeight: 30px;
+$logoMaxHeight: 100px;
+$logoMaxWidth: 125px;
+
+#header__wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+}
+
+.app__version {
+  margin-left: 1em;
+  display: none;
+  @include mediaQuery(x-small) {
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+
+header {
+  position: relative;
+  background: #000;
+  color: $white;
+  overflow: hidden;
+}
+
+.header__logout {
+  float: right;
+  display: inline-block;
+  color: $white;
+  font-size: .9em;
+  text-decoration: none;
+  padding: 1em;
+  &:visited {
+    color: $white;
+  }
+}
+
+.header__functions-wrapper {
+  color: $white;
+  background: $darkbg__primary;
+  padding: 0 1.1em;
+  box-sizing: border-box;
+  display: block;
+  position: relative;
+  overflow: hidden;
+  min-height: 5em;
+  #header__server-name {
+    //margin-top: .8em;
+    font-size: 1.5em;
+    font-weight: 500;
+    color: $white;
+    padding: .9em;
+    height: 100%;
+    background: transparent;
+    max-width: 350px;
+    white-space: nowrap;
+  }
+  .logo__wrapper {
+    padding-top: .5em;
+    //position: absolute;
+    //top: 50%;
+    //transform: translateY(-50%);
+  }
+
+  #header__logo {
+    vertical-align: middle;
+    margin: 1em;
+    float: left;
+    height: $logoHeight; //required for <SVG> logos - can remove if using img
+    max-height: $logoMaxHeight;
+    max-width: $logoMaxWidth;
+    width: auto;
+  }
+  #header__funct-icon {
+    display: block;
+    font-size: 2.3em;
+    color: $white;
+    padding: 0;
+    &:before {
+      content: '\2261';
+      line-height: .5;
+      font-size: 2em;
+      padding: 0 .3em;
+    }
+    @include mediaQuery(medium) {
+      display: none;
+    }
+  }
+
+  .header__functions {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: $darkbg__primary;
+    z-index: 100;
+    @include fastTransition-all;
+    span {
+      display: block;
+      color: $white;
+      font-size: 1em;
+    }
+    a, p, button {
+      display: block;
+      float: left;
+      text-decoration: none;
+      border-left: 1px solid #384456;
+      color: $lightgrey;
+      margin: 0;
+      padding: 1.250em 1.688em;
+      height: 100%;
+      font-size: 0.875em;
+      line-height: 1;
+      > span {
+        font-size: 1rem;
+        font-weight: bold;
+      }
+    }
+  }
+
+  // hide/show header functions based on screen size
+  .header__functions > #header__server-health {
+    display: none;
+    @include mediaQuery(small) {
+      display: block;
+    }
+  }
+
+  .header__functions > .header__refresh {
+    display: none;
+    @include mediaQuery(medium) {
+      display: block;
+    }
+  }
+
+  .header__functions {
+    .header__refresh {
+      color: $lightgrey;
+      line-height: 1.8;
+      margin-top: -4px;
+    }
+  }
+  .header__server-power,
+  .header__page-refresh {
+    &:hover {
+      background: rgba(60, 109, 240, .4);
+    }
+  }
+  .header__page-refresh {
+    img {
+      stroke: $white;
+      height: 22px;
+      width: 24px;
+    }
+  }
+}
+
+// end header__functions-wrapper
diff --git a/app/common/styles/layout/index.scss b/app/common/styles/layout/index.scss
index 6c33f26..4183519 100644
--- a/app/common/styles/layout/index.scss
+++ b/app/common/styles/layout/index.scss
@@ -1 +1,2 @@
+@import 'header';
 @import 'content';
diff --git a/app/configuration/controllers/network-controller.html b/app/configuration/controllers/network-controller.html
index 6421e46..2a2947a 100644
--- a/app/configuration/controllers/network-controller.html
+++ b/app/configuration/controllers/network-controller.html
@@ -1,6 +1,6 @@
 <div id="configuration-network">
 	<div class="row column">
-		<h1>Network settings</h1>
+		<h1>BMC network settings</h1>
 	</div>
 	<form class="net-config__form" role="form" action="">
 		<section class="row column">
@@ -8,8 +8,8 @@
 				<h2 class="inline h4">Common settings</h2>
 			</div>
 			<fieldset>
-				<div class="row column">
-					<label for="netinterface-select" class="inline">Network interface</label>
+				<div class="column small-12 large-3">
+					<label for="netinterface-select">Network interface</label>
 					<div id="netinterface-select" class="dropdown__wrapper">
 						<button class="dropdown__button" ng-click="networkDevice = ! networkDevice">eth0</button>
 						<ul class="dropdown__list inline" ng-show="networkDevice">
@@ -22,22 +22,22 @@
 						</ul>
 					</div>
 				</div>
-				<div class="row column">
-					<label for="net-config__mac" class="inline">MAC address</label>
-					<input id="net-config__mac" type="text" class="inline"/>
+				<div class="column small-12 large-3">
+					<label for="net-config__mac">MAC address</label>
+					<input id="net-config__mac" type="text" readonly class=""/>
 				</div>
-				<div class="row column">
-					<label for="net-config__host" class="inline">Hostname</label>
-					<input id="net-config__host" type="text" class="inline"/>
+				<div class="column small-12 large-3">
+					<label for="net-config__host">Hostname</label>
+					<input id="net-config__host" type="text" class=""/>
 				</div>
-				<div class="row column">
-					<label for="net-config__domain" class="inline">Domain name</label>
-					<input id="net-config__domain" type="text" class="inline"/>
+				<div class="column small-12 large-3">
+					<label for="net-config__domain">Domain name</label>
+					<input id="net-config__domain" type="text" class=""/>
 				</div>
 			</fieldset>
 		</section>
 		<section class="row column">
-			<div class="page-header">
+			<div class="column small-12 page-header">
 				<h2 class="inline h4">IPV4 settings</h2>
 			</div>
 			<fieldset>
@@ -49,38 +49,45 @@
 				</div>
 				<div class="row column">
 					<label class="control-radio" for="static-ip-address">Assign a static IP address
-						<input type="radio" name="ip-address" id="static-ip-address" ng-model="dhcp" ng-value="false" />
+						<input type="radio" name="ip-address" id="static-ip-address" ng-model="dhcp" ng-value="false"/>
 						<span class="control__indicator control__indicator-on"></span>
 					</label>
 				</div>
 				<fieldset class="net-config__static-ip-wrap">
-					<div class="row column">
+					<div class="column small-12 large-4">
 						<label for="net-config__ipv4-address" class="inline">IPV4 address</label>
-						<input id="net-config__ipv4-address" type="text" class="inline" ng-disabled="dhcp" value="178.45.23.122"/>
+						<input id="net-config__ipv4-address" type="text" ng-disabled="dhcp" value=""/>
 					</div>
-					<div class="row column">
+					<div class="column small-12 large-4">
 						<label for="net-config__subnet" class="inline">Subnet mask</label>
-						<input id="net-config__subnet" type="text" class="inline" ng-disabled="dhcp" value="255.255.0.0"/>
+						<input id="net-config__subnet" type="text" ng-disabled="dhcp" value=""/>
 					</div>
-					<div class="row column">
+					<div class="column small-12 large-4">
 						<label for="net-config__default-gateway" class="inline">Default gateway</label>
-						<input id="net-config__default-gateway" type="text" class="inline" ng-disabled="dhcp" value="178.45.1.1"/>
-					</div>
-					<div class="row column">
-						<label for="net-config__prime-dns" class="inline">Primary DNS server</label>
-						<input id="net-config__prime-dns" type="text" class="inline"/>
-					</div>
-					<div class="row column">
-						<label for="net-config__secondary-dns" class="inline">Secondary DNS server</label>
-						<input id="net-config__secondary-dns" type="text" class="inline"/>
-					</div>
-					<div class="row column">
-						<label for="net-config__tertiary-dns" class="inline">Tertiary DNS server</label>
-						<input id="net-config__tertiary-dns" type="text" class="inline"/>
+						<input id="net-config__default-gateway" type="text" ng-disabled="dhcp" value=""/>
 					</div>
 				</fieldset>
 			</fieldset>
-			<div class="network-config__submit-wrapper float-right">
+		</section>
+		<section class="row column">
+			<div class="column small-12 page-header">
+				<h2 class="inline h4">DNS settings</h2>
+			</div>
+			<fieldset>
+				<div class="column small-12 large-4">
+					<label for="net-config__prime-dns">Primary DNS server</label>
+					<input id="net-config__prime-dns" type="text"/>
+				</div>
+				<div class="column small-12 large-4">
+					<label for="net-config__secondary-dns">Secondary DNS server</label>
+					<input id="net-config__secondary-dns" type="text"/>
+				</div>
+				<div class="column small-12 large-4">
+					<label for="net-config__tertiary-dns">Tertiary DNS server</label>
+					<input id="net-config__tertiary-dns" type="text"/>
+				</div>
+			</fieldset>
+			<div class="network-config__submit-wrapper">
 				<button class="btn-primary inline">Save settings</button>
 				<button class="btn-secondary inline">Cancel</button>
 			</div>
diff --git a/app/configuration/styles/network.scss b/app/configuration/styles/network.scss
index 22edf88..3b28ebf 100644
--- a/app/configuration/styles/network.scss
+++ b/app/configuration/styles/network.scss
@@ -5,9 +5,9 @@
   .dropdown__list {
     margin-top: -17px;
   }
-  input,
   .dropdown__button {
-    width: 240px;
+    width: 200px;
+    margin-top: 0px;
     text-align: left;
   }
   input {
@@ -16,14 +16,13 @@
   }
   label {
     min-width: 300px;
-    font-weight: 700;
   }
   fieldset {
     padding-left: 1.8em;
-    padding-top: 1em;
   }
   .net-config__static-ip-wrap {
-    padding-left: 3.6em;
+    padding-left: 0;
+    padding-top: 1em;
     display: block;
     label {
       min-width: 250px;
@@ -31,6 +30,8 @@
   }
   .control-radio {
     margin-top: 1em;
+    margin-left: .7em;
+    font-weight: 700;
   }
   .network-config__submit-wrapper {
     width: 100%;
diff --git a/app/login/controllers/login-controller.html b/app/login/controllers/login-controller.html
index 0fcbc97..b1acb9a 100644
--- a/app/login/controllers/login-controller.html
+++ b/app/login/controllers/login-controller.html
@@ -29,7 +29,7 @@
                 <input id="login__submit" class="btn-primary submit" type="button" value="Log in" role="button" ng-click="login(username, password)" ng-class="{error: error}" ng-disabled="dataService.loading">
 
                 <p class="login__error-msg" role="alert" ng-if="error">Incorrect username or password</p>
-                <p class="login__error-msg" role="alert" ng-if="server_unreachable">Server Unreachable</p>
+                <p class="login__error-msg" role="alert" ng-if="server_unreachable">Server unreachable</p>
             </form>
         </div>
     </div>
diff --git a/app/server-control/styles/power-operations.scss b/app/server-control/styles/power-operations.scss
index 3594ab4..087e375 100644
--- a/app/server-control/styles/power-operations.scss
+++ b/app/server-control/styles/power-operations.scss
@@ -14,7 +14,7 @@
 
   // Power Curernt status wrapper
   .power__current-status {
-    border-bottom: 1px solid $lightbg__grey;
+    border-bottom: 1px solid $medgrey;
     margin: 2.625em 0 1.2em 0;
     .h4 {
       padding: 0;
@@ -82,7 +82,7 @@
 
   // Power button options
   .power-option {
-    border-top: 1px solid $lightgrey;
+    border-top: 1px solid $medgrey;
     padding: 1.8em 0 1em 0;
     position: relative;
     overflow: hidden;
diff --git a/app/server-health/controllers/log-controller.html b/app/server-health/controllers/log-controller.html
index 713b879..dfa73b4 100644
--- a/app/server-health/controllers/log-controller.html
+++ b/app/server-health/controllers/log-controller.html
@@ -28,7 +28,7 @@
         <log-filter></log-filter>
     </section> <!-- end filter -->
     <section id="event-log__events" class="row column">
-        <div id="event__actions-bar" class="row header__actions-bar">
+        <div id="event__actions-bar" class="row header__actions-bar ">
             <div class="column small-1 large-1 event-log__col-check">
                 <label class="control-check">
                     <input type="checkbox" name="events__check-all" ng-model="all" ng-checked="(logs|filter:{selected: true}).length == logs.length"/>
diff --git a/app/server-health/styles/inventory.scss b/app/server-health/styles/inventory.scss
index 78fa1ad..307245f 100644
--- a/app/server-health/styles/inventory.scss
+++ b/app/server-health/styles/inventory.scss
@@ -59,7 +59,7 @@ $title-minWidth: 210px;
     margin: .5em 0;
     font-weight: 700;
     background: $white;
-    padding: 1.8em 1em 1em 3.7em;
+    padding: 1em 1em 0 3.7em;
     text-decoration: none;
     border: 1px solid $lightgrey;
     vertical-align: middle;
@@ -293,15 +293,12 @@ $title-minWidth: 210px;
     -webkit-transition: 0.5s linear max-height;
     transition: 0.5s linear max-height;
     padding: 0;
+    .content-label {
+      margin-top: 1em;
+    }
     &.active {
       max-height: 1000px; //max-height used to allow flexible height of content and still allow transition
       @include fastTransition-all;
-      //@include mediaQuery(small) {
-      //  max-height: 1000px;
-      //}
-      //@include mediaQuery(medium) {
-      //  max-height: 1000px;
-      //}
     }
   }
   .inv-event-log-row {
diff --git a/app/server-health/styles/log.scss b/app/server-health/styles/log.scss
index 1af81ad..708aa25 100644
--- a/app/server-health/styles/log.scss
+++ b/app/server-health/styles/log.scss
@@ -47,7 +47,7 @@
 
 #event-filter {
   .filter-label {
-    color: darken($lightgrey, 10%);
+    color: darken($medgrey, 10%);
     text-transform: uppercase;
     font-weight: 700;
     font-size: .75em;
@@ -305,10 +305,7 @@
   }
   .event__actions {
     margin-left: -1em;
-    //margin-bottom: 1em;
-    @include mediaQuery(medium) {
-      float: right;
-    }
+    float: right;
   }
   .event__icon {
     width: 20px;