power-operations: add page and styles

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

20 files changed, 456 insertions, 150 deletions

diff --git a/src/dashboard.html b/src/dashboard.html
index a6ed878..c16b74e 100644
--- a/src/dashboard.html
+++ b/src/dashboard.html
@@ -9,13 +9,13 @@
     <script>
         var user = 'root';
         var password = '0penBmc';
-        var ip = 'https://9.3.164.177';
+        var ip = 'https://9.3.164.147';
 
         function getList(){
-            console.log('get list');
+
             $.ajax({
                 type: "GET",
-                url: ip + "/org/openbmc/control/list",
+                url: ip + "/xyz/openbmc_project/list",
                 dataType: "json",
                 async: true,
                 xhrFields: {
@@ -37,7 +37,7 @@
                     }
                 },
                 error: function(xhr, textStatus, errorThrown){
-                    console.log("not a successful request!")
+                    console.log("not a successful request!");
                     console.log(xhr, textStatus, errorThrown)
                 }
             });
@@ -61,7 +61,7 @@
                 getList();
             },
             "error": function(xhr, textStatus, errorThrown){
-                console.log("not a successful request!")
+                console.log("not a successful request!");
                 console.log(xhr, textStatus, errorThrown)
             }
         };
@@ -72,7 +72,7 @@
     <!-- Header & Navigation includes -->
     <div id="header__wrapper"></div>
     <div id="navigation"></div>
-    <div class="container">
+    <main class="content__container" role="main">
         <div class="row">
             <div class="column">
 
@@ -83,10 +83,8 @@
                 <p>Donec sollicitudin molestie malesuada. Pellentesque in ipsum id orci porta dapibus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta. Sed porttitor lectus nibh. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla porttitor accumsan tincidunt.</p>
             </div>
         </div>
-    </div>
+    </main>
 
 </body>
 <script src="js/app.min.js"></script>
-
-
 </html>
diff --git a/src/js/main.js b/src/js/main.js
index beea081..f50fe79 100755
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -1,56 +1,31 @@
-(function() {
-    // var user = 'root';
-    // var password = '0penBmc';
-    // var ip = 'https://9.3.164.177';
-    //
-    // var login = {
-    //     "type": "POST",
-    //     "url": ip + "/login",
-    //     "dataType": "json",
-    //     "async": false,
-    //     "headers": {
-    //         'Accept': 'application/json',
-    //         'Content-Type': 'application/json'
-    //     },
-    //     "xhrFields": {
-    //         withCredentials: true
-    //     },
-    //     "data": JSON.stringify({"data": [user, password]}),
-    //     "success": function(response){
-    //         console.log(response);
-    //     },
-    //     "error": function(xhr, textStatus, errorThrown){
-    //         console.log("not a successful request!")
-    //         console.log(xhr, textStatus, errorThrown)
-    //     }
-    // };
-    //
-    // $.ajax(login);
+(function () {
 
     // Init functions
     header();
     nav();
 
     // Load logo
-    function loadLogo(){
-        $('.logo__wrapper').load('logo.html', function(){
+    function loadLogo() {
+        $('.logo__wrapper').load('logo.html', function () {
 
             // Grab logo if has ID or not
             var logoID = document.getElementById("header__logo");
             var logo = document.querySelectorAll("img, svg");
 
             // Has ID - call header height
-            if(logoID && logoID !== null) {
+            if (logoID && logoID !== null) {
                 getHeaderHeight();
 
-            // If logo exists but no ID - call header height
-            } else if (logo !== null && logo.length == 1){
-                   $('img, svg').on('load', function(){
-                       getHeaderHeight();
-                   })
+                // If logo exists but no ID - call header height
+            } else if (logo !== null && logo.length == 1) {
+                $('img, svg').on('load', function () {
+                    getHeaderHeight();
+                });
 
-            // If no logo at all - call header height
-            } else { getHeaderHeight(); }
+                // If no logo at all - call header height
+            } else {
+                getHeaderHeight();
+            }
         });
     }
 
@@ -65,6 +40,7 @@
 
         nav(headerHeight);
     }
+
     // Include header
     function header() {
         $('#header__wrapper').load('header.html', function () {
@@ -79,12 +55,9 @@
         $('#navigation').load('navigation.html', function (headerHeight) {
 
             var nav = document.getElementById("nav__top-level");
-            var navWidth = nav.offsetWidth; // Get navigation width
             var subnav = document.getElementsByClassName("nav__second-level");
             var navBtn = document.querySelectorAll('#nav__top-level button');
 
-            // Add body padding to compensate for fixed nav
-            document.body.style.paddingLeft = navWidth + 'px';
 
             // Bump down nav to compensate for fixed header
             nav.style.top = height + 'px';
@@ -94,38 +67,37 @@
                 subnav[i].style.top = height + 'px';
             }
 
-            // Loop over nav buttons
+            //Loop over nav buttons
             for (var i = 0, len = navBtn.length; i < len; i++) {
 
                 // Click event for each nav button
-                navBtn[i].addEventListener('click', function(){
+                navBtn[i].addEventListener('click', function () {
                     var parent = $(this).parents("#navigation");
                     var btnId = $(this).attr("class").match(/btn[\w-]*\b/);
                     var subnavClass = $('.nav__second-level.' + btnId);
 
-                    // Remove opened class from buttons
+                    //Remove opened class from buttons
                     parent.find('.opened').removeClass('opened');
 
                     // Add opened class to clicked button
                     this.classList.add("opened");
 
-                    // Close all sub panels and remove opened class
-                    parent.find('.nav__second-level').css("left", '-' + navWidth + "px").removeClass('opened');
+                    //Close all sub panels and remove opened class
+                    parent.find('.nav__second-level').css("display", "none").removeClass('opened');
 
-                    // Open sub panels that matches clicked button and add opened class
-                    parent.find(subnavClass).addClass('opened').css("left", navWidth);
-                })
+                    //Open sub panels that matches clicked button and add opened class
+                    parent.find(subnavClass).css("display", "block").addClass('opened');
 
-            }
+                    // var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
+                    //
+                    // $('.nav__second-level a').each(function(){
+                    //     console.log(pgurl);
+                    //     if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
+                    //         $('.nav__second-level li').addClass("active");
+                    // })
+                });
 
-            // Temp solution to close subnav - TODO: better way to close
-            for (var i = 0, len = subnav.length; i < len; i++) {
-                subnav[i].addEventListener('click', function(){
-                    this.classList.remove("opened");
-                    this.style.left = "-" + navWidth + "px";
-                })
             }
-
         });
     }
 
diff --git a/src/navigation.html b/src/navigation.html
index d9d8cdf..c715c96 100644
--- a/src/navigation.html
+++ b/src/navigation.html
@@ -1,7 +1,7 @@
-<nav>
+<nav role="navigation">
     <ul id="nav__top-level">
         <li>
-            <button class="btn-dashboard">
+            <button class="btn-dashboard opened">
                 <svg version="1.1" class="nav__icon" x="0px" y="0px"
                      viewBox="0 0 20 20">
                     <g>
@@ -44,27 +44,24 @@
         </li>
     </ul>
     <ul class="nav__second-level btn-dashboard">
-        <li><button class="close" aria-label="close">&times;</button></li>
-        <li>2nd level 1</li>
-        <li>2nd level 2</li>
-        <li>2nd level 3</li>
+        <li><a href="">Server summary</a></li>
+        <li><a href="">Remote console</a></li>
+        <li><a href="">Power consumption</a></li>
+        <li><a href="power-operations.html">Power operation</a></li>
     </ul>
     <ul class="nav__second-level btn-settings">
-        <li><button class="close" aria-label="close">&times;</button></li>
-        <li>2nd level 4</li>
-        <li>2nd level 5</li>
-        <li>2nd level 6</li>
+        <li><a href="">2nd level 4</a></li>
+        <li><a href="">2nd level 5</a></li>
+        <li><a href="">2nd level 6</a></li>
     </ul>
     <ul class="nav__second-level btn-multi">
-        <li><button class="close" aria-label="close">&times;</button></li>
-        <li>2nd level 7</li>
-        <li>2nd level 8</li>
-        <li>2nd level 9</li>
+        <li><a href="">2nd level 7</a></li>
+        <li><a href="">2nd level 8</a></li>
+        <li><a href="">2nd level 9</a></li>
     </ul>
     <ul class="nav__second-level btn-help">
-        <li><button class="close" aria-label="close">&times;</button></li>
-        <li>2nd level 10</li>
-        <li>2nd level 212</li>
-        <li>2nd level 312</li>
+        <li><a href="">2nd level 10</a></li>
+        <li><a href="">2nd level 212</a></li>
+        <li><a href="">2nd level 312</a></li>
     </ul>
 </nav>
diff --git a/src/power-operations.html b/src/power-operations.html
new file mode 100644
index 0000000..30445be
--- /dev/null
+++ b/src/power-operations.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>openBMC</title>
+    <link rel="icon" href="favicon.ico?v=2"/>
+    <link rel="stylesheet" href="css/main.css">
+    <script src="js/vendor/vendor.min.js"></script>
+</head>
+<body>
+
+<!-- Header & Navigation includes -->
+<div id="header__wrapper"></div>
+<div id="navigation"></div>
+
+<!-- Power Operations Content -->
+<main id="power-operations" class="content__container" role="main">
+    <div class="row column">
+        <h1>Server power operation</h1>
+    </div>
+
+    <!-- Current status and bar display the state of the server. Class 'power__state-off' is applied to bar and 'power__state' text switches to say "off"-->
+    <div class="row column">
+        <div class="power__current-status">
+            <p class="inline h4">Current status</p>
+            <span class="power__status-log inline float-right">Server last reset at 01:41:24 on 02/17/17</span>
+        </div>
+    </div>
+    <div class="row column">
+        <div class="power__indicator-bar  power__state-on">
+            <p class="inline">Server BLZ_109284.209.01</p>
+            <p class="power__state inline float-right h3"><span>On</span></p>
+        </div>
+    </div>
+    <div class="row column">
+        <div class="row column">
+            <h3 class="h4">Select a power operation option</h3>
+        </div>
+
+        <!-- Power on displays when/if server is shutdown -->
+        <div class="row column power-option">
+            <button id="power__power-on" class="btn-secondary">Power On</button>
+            <p>Attempts to power on the server</p>
+        </div>
+
+        <!-- Power reboot/shutdown options : when server is off these get class 'disabled' and can not be interacted with -->
+        <div class="row column power-option">
+            <button id="power__warm-boot" class="btn-secondary">Warm reboot</button>
+            <p>Attempts to perform an orderly shutdown before restarting the server</p>
+        </div>
+        <div class="row column power-option">
+            <button id="power__cold-boot" class="btn-secondary">Cold reboot</button>
+            <p>Shuts down the server immediately, then restarts it</p>
+        </div>
+        <div class="row column power-option">
+            <button id="power__soft-shutdown" class="btn-secondary">Orderly shutdown</button>
+            <p>Attempts to stop all software on the server before removing power</p>
+        </div>
+        <div class="row column power-option">
+            <button id="power__hard-shutdown" class="btn-secondary">Immediate shutdown</button>
+            <p>Removes power from the server without waiting for software to stop</p>
+
+            <!-- Confirmation message - to accommodate the message for smaller screens we need to grab the height of the message and apply that height to "power-option" row
+
+            var msgheight = $(this).parent().find('.power__confirm').height();
+            $(this).parent().addClass('transitionAll').css("minHeight", msgheight).removeClass('disabled');
+            -->
+
+            <div class="power__confirm">
+                <div class="power__confirm-message">
+                    <p class="h3"><i></i>Are you sure you want to <strong>warm reboot?</strong></p>
+                    <p>Removes power from the server without waiting for software to stop</p>
+                </div>
+                <div class="power__confirm-buttons">
+                    <button class="btn-primary">Yes</button>
+                    <button class="btn-primary">No</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</main>
+
+</body>
+<script src="js/app.min.js"></script>
+
+<!-- FOR DEMO ONLY __ DO NOT COPY BELOW -->
+<script>
+    $('#power__hard-shutdown').on('click', function () {
+        var msgheight = $(this).parent().find('.power__confirm').height();
+
+        $(this).parents('#power-operations').find('.power__confirm').addClass('active');
+        $(this).parents('#power-operations').find('.power-option').addClass('disabled');
+        $(this).parent().addClass('transitionAll').css("minHeight", msgheight).removeClass('disabled');
+        $(this).parents('#power-operations').find('.power-option.disabled button').attr("disabled", true);
+    });
+
+    $('.btn-primary').on('click', function(){
+        $(this).parents('#power-operations').find('.power__indicator-bar').toggleClass('power__state-off');
+        $(this).parents('#power-operations').find('.power__confirm').removeClass('active');
+        $(this).parent().addClass('disabled');
+        $(this).parents('.power-option').addClass('disabled');
+        $(this).parents('#power-operations').find('.power__state span').html('Off');
+    });
+</script>
+</html>
diff --git a/src/scss/base/_all.scss b/src/scss/base/_all.scss
index bc61b44..5e10e93 100644
--- a/src/scss/base/_all.scss
+++ b/src/scss/base/_all.scss
@@ -5,4 +5,5 @@
 @import 'core';
 @import 'typography';
 @import 'utility';
+@import 'buttons';
 @import 'forms';
diff --git a/src/scss/base/_buttons.scss b/src/scss/base/_buttons.scss
new file mode 100644
index 0000000..3703722
--- /dev/null
+++ b/src/scss/base/_buttons.scss
@@ -0,0 +1,40 @@
+button, .button, input[type="submit"] {
+  font-weight: bold;
+  font-size: 1em;
+  text-transform: none;
+  border-radius: 3px;
+  padding: .8rem 3.5rem;
+  height: auto;
+  &:hover {
+    cursor: pointer;
+  }
+  &.disabled {
+    border: 2px solid $lightgrey;
+    color: $lightgrey;
+  }
+}
+
+.disabled {
+  button, .button, input[type="submit"] {
+    opacity: 0.2;
+    &:hover {
+      cursor: default;
+      background: transparent;
+    }
+  }
+}
+
+.btn-primary {
+  color: $primebtn__text;
+  background: $primebtn__bg;
+}
+.btn-secondary {
+  color: $secbtn__text;
+  background: transparent;
+  border: 2px solid $secbtn__border;
+  &:hover {
+    background: $lightbg__accent;
+    cursor: pointer;
+    background: $secbtn__bg;
+  }
+}
diff --git a/src/scss/base/_colors.scss b/src/scss/base/_colors.scss
index fe9f2dc..c013e08 100644
--- a/src/scss/base/_colors.scss
+++ b/src/scss/base/_colors.scss
@@ -1,20 +1,30 @@
 // Global
 $white: #fff;
 $black: #333;
+$darkgrey: #666;
+$lightgrey: #ccc;
 $field__disabled: #F4F8F8;
-$error: #FF5C49;
-$status-ok: #098145;
+
 
 // Dark background
 $darkbg__grey: #E3ECEC;
 $darkbg__accent: #79a6f6;
-$darkbg__primary: #1d3458;
+$darkbg__primary: #19273c;
 $active: #648FFF;
 
-// White Background
+// Light Background
 $lightbg__grey: #b8c1c1;
-$lightbg__accent: #3c6df0;
-$lightbg__primary: #19273c;
+$lightbg__accent: #ebf0fc;
+$lightbg__primary: #1a273b;
+
+// Primary Button colors
+$primebtn__bg: #3c6df0;
+$primebtn__text: $white;
+
+// Secondary Button colors
+$secbtn__bg: #ebf0fc;
+$secbtn__border: #3f71ec;
+$secbtn__text: #3f71ec;
 
 // Alerts
 $alert__error: rgba(230, 35, 37, 0.3);
@@ -25,4 +35,13 @@ $alert__message: rgba(203, 221, 235, 0.5);
 $links: #648FFF;
 $links__hover: $lightbg__accent;
 $links__visited: #5A3EC8;
-$links__disabled: rgba(27, 40, 52, 0.70);
\ No newline at end of file
+$links__disabled: rgba(27, 40, 52, 0.70);
+
+// Navigation
+$nav__top-level-color: #1a273b;
+$nav__second-level-color: #e6e9ed;
+
+// Status colors
+$error-color: #FF5C49;
+$status-ok: #34bc6e;
+$status-ok-light: #bcefce;
\ No newline at end of file
diff --git a/src/scss/base/_core.scss b/src/scss/base/_core.scss
index 37aaf46..13ba9e6 100644
--- a/src/scss/base/_core.scss
+++ b/src/scss/base/_core.scss
@@ -5,32 +5,9 @@ html, body {
   color: $black;
 }
 
-.container {
-  max-width: 1440px;
-}
-
 p {
   margin-bottom: .8em;
-  @include fastTransition-all;
-}
-
-button, .button, input[type="submit"] {
-  color: $white;
-  background: $lightbg__primary;
-  border: 1px solid $lightbg__primary;
-  font-weight: normal;
-  font-size: 1em;
-  text-transform: none;
-  border-radius: 0;
-  padding: .5rem 2rem;
-  height: auto;
-  line-height: 2.5em;
-  &:hover {
-    background: $lightbg__accent;
-    //box-shadow: inset 0 0 0 2px $lightbg__primary;
-    cursor: pointer;
-    @include fastTransition-all;
-  }
+  transition: margin .05s;
 }
 
 a {
@@ -41,7 +18,7 @@ a {
   &:hover {
     color: $links__hover;
   }
-  focus {
+  :focus {
     color: $links;
   }
 }
\ No newline at end of file
diff --git a/src/scss/base/_forms.scss b/src/scss/base/_forms.scss
index c4f7eed..97c24eb 100644
--- a/src/scss/base/_forms.scss
+++ b/src/scss/base/_forms.scss
@@ -34,7 +34,7 @@ textarea {
     border: 1px solid $lightbg__grey;
   }
   &.input__error {
-    border-color: $error;
+    border-color: $error-color;
     background: rgba(230, 35, 37, 0.1);
   }
 }
diff --git a/src/scss/base/_mixins.scss b/src/scss/base/_mixins.scss
index 4b7a1eb..e26c10d 100644
--- a/src/scss/base/_mixins.scss
+++ b/src/scss/base/_mixins.scss
@@ -1,8 +1,3 @@
-
-$lightbg__grey: #b8c1c1;
-$lightbg__accent: #3c6df0;
-$lightbg__primary: #19273c;
-
 //Breakpoints mixin
 @mixin mediaQuery($breakpoint) {
   @if $breakpoint == "x-small" {
diff --git a/src/scss/base/_typography.scss b/src/scss/base/_typography.scss
index b20397f..8c70067 100644
--- a/src/scss/base/_typography.scss
+++ b/src/scss/base/_typography.scss
@@ -19,26 +19,28 @@ h6 {
   font-weight: 300;
   margin: 0 0 .8rem;
   line-height: 1;
+  color: #333;
 }
 
-h1 {
+h1, .h1 {
   font-size: 2.3rem;
 }
 
-h2 {
+h2, .h2 {
   font-size: 1.8rem;
 }
 
-h3 {
+h3, .h3 {
   font-size: 1.3rem;
+  letter-spacing: -.08rem;
 }
 
-h4 {
+h4, .h4 {
   font-size: 1.125rem;
-  letter-spacing: -.08rem;
+  letter-spacing: -.04rem;
 }
 
-h5 {
+h5, .h5 {
   font-size: 1rem;
   letter-spacing: -.05rem;
 }
diff --git a/src/scss/base/_utility.scss b/src/scss/base/_utility.scss
index 2886bf1..3d5a8ce 100644
--- a/src/scss/base/_utility.scss
+++ b/src/scss/base/_utility.scss
@@ -1,6 +1,5 @@
 .inline {
   display: inline-block;
-  line-height: 2;
 }
 
 .disabled {
@@ -14,7 +13,7 @@
   clear: both;
 }
 .error {
-  color: $error;
+  color: $error-color;
 }
 
 .hide {
@@ -47,10 +46,18 @@
   margin: 0px !important;
 }
 
+.no-padding {
+  padding:0px !important;
+}
+
 .no-bottom-margin {
   margin-bottom: 0px !important;
 }
 
 .no-top-margin {
   margin-top: 0px !important;
+}
+
+.transitionAll {
+  transition: all .5s ease;
 }
\ No newline at end of file
diff --git a/src/scss/components/_all.scss b/src/scss/components/_all.scss
index 98ede4a..81974ba 100644
--- a/src/scss/components/_all.scss
+++ b/src/scss/components/_all.scss
@@ -1,3 +1,4 @@
 @import "systemUser";
 @import "login";
-@import "alerts";
\ No newline at end of file
+@import "alerts";
+@import "power-ops";
\ No newline at end of file
diff --git a/src/scss/components/_login.scss b/src/scss/components/_login.scss
index ed2626c..f5d73d8 100644
--- a/src/scss/components/_login.scss
+++ b/src/scss/components/_login.scss
@@ -59,7 +59,7 @@
 
 .login__status {
   color: $status-ok;
-  &.error {color: $error;}
+  &.error {color: $error-color;}
 }
 
 .login__error-msg {
@@ -67,7 +67,7 @@
   padding: 1em;
   text-align: center;
   font-size: .95em;
-  border: 1px solid $error;
+  border: 1px solid $error-color;
 
 
   @include mediaQuery(medium){
diff --git a/src/scss/components/_power-ops.scss b/src/scss/components/_power-ops.scss
new file mode 100644
index 0000000..1d4d2d8
--- /dev/null
+++ b/src/scss/components/_power-ops.scss
@@ -0,0 +1,133 @@
+// Power Operations SCSS
+
+#power-operations {
+
+  .h4 {
+    font-weight: bold;
+  }
+
+  // Power op time stamp
+  .power__status-log {
+    color: $darkgrey;
+  }
+
+  // Power Curernt status wrapper
+  .power__current-status {
+    border-bottom: 1px solid $lightbg__grey;
+    margin: 3.625em 0 1.2em 0;
+    .h4 {
+      padding: 0;
+      margin: 0 0 .5em 0;
+    }
+  }
+
+  // Power state indicator on/off
+  .power__state {
+    span:before {
+      content: '\25CF';
+      display: inline-block;
+      font-size: 1.2em;
+      color: $darkgrey;
+      margin-right: .3em;
+      @include slowTransition-all;
+    }
+  }
+
+  // Power bar indicator
+  .power__indicator-bar {
+    font-weight: bold;
+    padding: 1.4em 3em;
+    margin-bottom: 3.750em;
+    background-size: 200% 100%;
+    background-image: linear-gradient(to right, $status-ok-light 50%, $lightgrey 50%);
+    background-position: 100%;
+    transition: background-position 2s ease;
+    p {
+      padding: 0;
+      margin: 0;
+    }
+    &.power__state-on {
+      background-position: -200%;
+      .power__state {
+        span:before {
+          color: $status-ok;
+        }
+      }
+    }
+    &.power__state-off {
+      background-position: -100%;
+      color: $darkgrey;
+      .power__state {
+        span:before {
+          color: $darkgrey;
+        }
+      }
+    }
+  }
+
+  // Power button options
+  .power-option {
+    border-top: 1px solid $lightgrey;
+    padding: 1.8em 0 1em 1.8em;
+    position: relative;
+    overflow: hidden;
+    min-height: 1px;
+    .btn-secondary {
+      margin-bottom: .5em;
+    }
+    // Confirmation message for power option
+    .power__confirm {
+      position: absolute;
+      top: 0;
+      transform: translateY(-100%);
+      width: 100%;
+      margin-left: -1.8em;
+      z-index: 5;
+      background: $darkbg__primary;
+      color: $white;
+      padding: 2em 2em 1.55em 2em;
+      &.active {
+        transform: translateY(0);
+        @include fastTransition-all;
+      }
+    }
+    &.disabled {
+      @include fastTransition-all;
+    }
+  }
+}
+
+// Power confirmation buttons
+.power__confirm-buttons {
+  .btn-primary {
+    background: transparent;
+    border: 2px solid $white;
+    padding: 1em 2.2em;
+    margin: 0 10px;
+    border-radius: 4px;
+    &:focus,
+    &:hover {
+      background: $primebtn__bg;
+      border: 2px solid $primebtn__bg;
+    }
+  }
+  @include mediaQuery(large) {
+    float: right;
+  }
+}
+
+// Power confirmation message
+.power__confirm-message {
+  display: inline-block;
+}
+
+// Power confirmation message icon
+.power__confirm-message i::before {
+  content: '\26A0';
+  color: $white;
+  display: inline-block;
+  font-size: 2em;
+  vertical-align: middle;
+  font-style: normal;
+  margin-right: 15px;
+}
diff --git a/src/scss/components/_systemUser.scss b/src/scss/components/_systemUser.scss
index 8ab1535..beb96f0 100644
--- a/src/scss/components/_systemUser.scss
+++ b/src/scss/components/_systemUser.scss
@@ -16,8 +16,5 @@
       width: 20px;
       border-radius: 10px;
       vertical-align: middle;
-      //position: relative;
-      //top: 50%;
-      //transform: translateY(-50%);
     }
 }
diff --git a/src/scss/layout/_all.scss b/src/scss/layout/_all.scss
index 1122ffe..f78538c 100644
--- a/src/scss/layout/_all.scss
+++ b/src/scss/layout/_all.scss
@@ -1,2 +1,3 @@
 @import 'header';
 @import 'navigation';
+@import 'content';
diff --git a/src/scss/layout/_content.scss b/src/scss/layout/_content.scss
new file mode 100644
index 0000000..5c690c6
--- /dev/null
+++ b/src/scss/layout/_content.scss
@@ -0,0 +1,10 @@
+// Content layout styles
+
+.content__container {
+  padding-top: 3.75em;
+  margin-left: $nav__toplvlWidth;
+  @include fastTransition-all;
+  @include mediaQuery(medium){
+    margin-left: $nav__toplvlWidth + $nav__seclvlWidth;
+  }
+}
diff --git a/src/scss/layout/_header.scss b/src/scss/layout/_header.scss
index 9bbe7e8..b86fcd7 100644
--- a/src/scss/layout/_header.scss
+++ b/src/scss/layout/_header.scss
@@ -22,7 +22,7 @@ $logoMaxWidth: 125px;
 }
 header {
   position: relative;
-  background: $black;
+  background: $lightbg__primary;
   color: $white;
   padding: .8em;
 
diff --git a/src/scss/layout/_navigation.scss b/src/scss/layout/_navigation.scss
index 024e869..0b07e5f 100644
--- a/src/scss/layout/_navigation.scss
+++ b/src/scss/layout/_navigation.scss
@@ -1,5 +1,9 @@
+$nav__toplvlWidth: 120px;
+$nav__seclvlWidth: 240px;
+
+// Top level navigation
 #nav__top-level {
-  background: $black;
+  background: $nav__top-level-color;
   height: 100%;
   position: fixed;
   left: 0;
@@ -8,7 +12,11 @@
   z-index: 99;
   list-style-type: none;
   margin: 0;
-  li { margin: 0; }
+  padding: 0;
+  width: $nav__toplvlWidth;
+  li {
+    margin: 0;
+  }
   .button, button, a {
     background: transparent;
     height: auto;
@@ -21,6 +29,7 @@
     text-align: center;
     margin-bottom: 0;
     white-space: normal;
+    border-radius: 0;
     .nav__icon {
       color: $white;
       max-height: 40px;
@@ -33,7 +42,7 @@
     p {
       margin: 0;
       font-size: .9em;
-      line-height:1.2rem;
+      line-height: 1.2rem;
     }
 
     .nav__icon-help__outer {
@@ -46,7 +55,7 @@
       fill: $white;
     }
     &:hover {
-      background: $white;
+      background: $nav__second-level-color;
       fill: $black;
       color: $black;
       padding: 1em;
@@ -55,32 +64,74 @@
         stroke: $black;
       }
       .nav__icon-help__inner {
-        fill: $black;
+        fill: $lightbg__primary;
       }
     }
   }
   .opened {
-    background: $white;
+    background: $nav__second-level-color;
     fill: $black;
     color: $black;
+    .nav__icon-help__outer {
+      stroke: $lightbg__primary;
+    }
   }
 }
 
+// Second Level Navigation
 .nav__second-level {
   position: fixed;
+  background: $nav__second-level-color;
   top: 0;
   bottom: 0;
-  left: 0;
+  left: -$nav__toplvlWidth;
+  width: $nav__seclvlWidth;
   z-index: 97;
-  display: block;
-  background: $white;
-  padding: 10px .6em;
+  display: none;
+  padding: 0;
   margin: 0;
   list-style-type: none;
-  transition: all ease-out 0.5s;
-  box-shadow: 0 2px 5px 0 $black;
+  transition: left .5s ease;
+  @include mediaQuery(medium) {
+    left: $nav__toplvlWidth;
+  }
+  &.btn-dashboard {
+    display: block;
+  }
   &.opened {
-    transition: all ease-out .8s;
+    left: $nav__toplvlWidth;
+    @include fastTransition-all;
+  }
+  a {
+    padding: 1.2em .6em 1.2em 1.9em;
+    display: block;
+    color: $black;
+    text-decoration: none;
+    position: relative;
+  }
 
+  li {
+    a:after{
+      content: '\203A';
+      position: absolute;
+      font-size: 2em;
+      font-weight: 700;
+      top: 50%;
+      right: 2em;
+      transform: translateY(-59%);
+      color: #4b5d78;
+      opacity: 0;
+    }
+    &.active,
+    &:focus,
+    &:hover {
+      background: $white;
+      a {font-weight: bold; color: #4b5d78;}
+      a:after {
+        opacity: 1;
+        right: .5em;
+        @include fastTransition-all;
+      }
+    }
   }
 }