LnF updates to masthead.

Change-Id: I6c31d244eb1bad5c87d89b10a5df750043cf12a0

@@ -19,77 +19,67 @@
  */
  */
 
 
 .light #mast {
 .light #mast {
-    background-color: #bbb;
-    box-shadow: 0 2px 8px #777;
+    background-color: #231f20;
 }
 }
 .dark #mast {
 .dark #mast {
-    background-color: #444;
-    box-shadow: 0 2px 8px #222;
+    /* TODO: dark theme */
+    background-color: #231f20;
 }
 }
 
 
 
 
 .light #mast .nav-menu-button:hover {
 .light #mast .nav-menu-button:hover {
-    background-color: #ddd;
+    background-color: #888;
 }
 }
 .dark #mast .nav-menu-button:hover {
 .dark #mast .nav-menu-button:hover {
-    background-color: #777;
+    background-color: #888;
 }
 }
 
 
-#mast img.logo:hover {
-    /* need something better */
-    /*background-color: #888;*/
-}
-
-.light #mast .title {
-    color: #369;
-}
-.dark #mast .title {
-    color: #eee;
-}
 
 
 .light #mast-right a {
 .light #mast-right a {
-    color: #369;
+    color: #009fdb;
 }
 }
-
 .dark #mast-right a {
 .dark #mast-right a {
-    color: #eee;
+    /* TODO: dark theme */
+    color: #009fdb;
 }
 }
 
 
 .light #mast nav  {
 .light #mast nav  {
-    color: #369;
+    color: #009fdb;
 }
 }
 
 
 .dark #mast nav  {
 .dark #mast nav  {
-    color: #eee;
+    /* TODO: dark theme */
+    color: #009fdb;
 }
 }
 
 
 
 
 /* Theme styles for drop down menu */
 /* Theme styles for drop down menu */
 
 
 .light #mast .dropdown {
 .light #mast .dropdown {
-    background-color: #bbb;
-    box-shadow: 0 2px 8px #777;
+    background-color: #231f20;
+    border: 1px solid #dddddd;
 }
 }
-
 .dark #mast .dropdown {
 .dark #mast .dropdown {
-    background-color: #444;
-    box-shadow: 0 2px 8px #111;
+    /* TODO: dark theme */
+    background-color: #231f20;
+    border: 1px solid #dddddd;
 }
 }
 
 
 .light #mast .dropdown a {
 .light #mast .dropdown a {
-    color: #369;
-    border-bottom: solid #ccc 1px;
+    color: #009fdb;
+    border-bottom: solid #444 1px;
 }
 }
-
 .dark #mast .dropdown a {
 .dark #mast .dropdown a {
-    color: #eee;
-    border-bottom: solid #333 1px;
+    /* TODO: dark theme */
+    color: #009fdb;
+    border-bottom: solid #444 1px;
 }
 }
 
 
 .light #mast .dropdown a:hover {
 .light #mast .dropdown a:hover {
-    background-color: #ddd;
+    color: #fff;
 }
 }
 
 
 .dark #mast .dropdown a:hover {
 .dark #mast .dropdown a:hover {
-    background-color: #777;
+    /* TODO: dark theme */
+    color: #fff;
 }
 }

@@ -19,9 +19,8 @@
  */
  */
 
 
 #mast {
 #mast {
-    height: 36px;
-    padding: 4px;
-    vertical-align: baseline;
+    height: 48px;
+    padding: 0;
 }
 }
 
 
 html[data-platform='iPad'] #mast {
 html[data-platform='iPad'] #mast {
@@ -29,31 +28,22 @@ html[data-platform='iPad'] #mast {
 }
 }
 
 
 #mast .nav-menu-button {
 #mast .nav-menu-button {
-    width: 30px;
-    height: 30px;
-    margin-left: 8px;
-    margin-bottom: 4px;
-    cursor: pointer;
+    width: 26px;
+    height: 21px;
+    margin: 14px 18px 14px 14px;
 }
 }
 
 
 #mast img.logo {
 #mast img.logo {
-    height: 38px;
-    padding-left: 8px;
-    padding-right: 8px;
+    height: 47px;
+    width: 436px;
+    margin: 0;
 }
 }
 
 
-#mast .title {
-    font-size: 14pt;
-    font-style: italic;
-    vertical-align: 12px;
-}
-
-
 #mast-right {
 #mast-right {
     display: inline-block;
     display: inline-block;
     float: right;
     float: right;
     position: relative;
     position: relative;
-    top: -4px;
+    top: 0;
     padding-right: 15px;
     padding-right: 15px;
     line-height: 44px;
     line-height: 44px;
 }
 }
@@ -72,23 +62,23 @@ html[data-platform='iPad'] #mast {
     height: 7px;
     height: 7px;
     width: 9px;
     width: 9px;
     margin-left: 10px;
     margin-left: 10px;
-    background: url('/onos/ui/data/img/dropdown-icon.png') no-repeat;
+    background: url('../../../data/img/dropdown-icon.png') no-repeat;
 }
 }
 
 
 #mast .dropdown {
 #mast .dropdown {
     position: absolute;
     position: absolute;
-    top: 44px;
-    right: 0;
+    top: 40px;
+    right: -8px;
     display: none;
     display: none;
     min-width: 100px;
     min-width: 100px;
-    border-top: 1px solid #999;
     line-height: 16px;
     line-height: 16px;
+    font-size: 12pt;
     z-index: 1000;
     z-index: 1000;
 }
 }
 
 
 #mast .dropdown a {
 #mast .dropdown a {
     text-decoration: none;
     text-decoration: none;
-    font-size: 14px;
+    font-size: 12px;
     display: block;
     display: block;
     padding: 8px 16px 6px 12px;
     padding: 8px 16px 6px 12px;
 }
 }

 <!-- Masthead partial HTML -->
 <!-- Masthead partial HTML -->
-<img class="nav-menu-button" src="data/img/nav-menu.png"
+<img class="nav-menu-button clickable" src="data/img/nav-menu-mojo.png"
      ng-click="mastCtrl.toggleNav()"></div>
      ng-click="mastCtrl.toggleNav()"></div>
-<img class="logo" src="data/img/onos-logo.png">
-<span class="title">Open Network Operating System</span>
+<img class="logo" src="data/img/masthead-logo-mojo.png">
 <div id="mast-right">
 <div id="mast-right">
 
 
     <nav>
     <nav>
@@ -10,7 +9,7 @@
             <a class="user-menu__name">{{user}} <i class="dropdown-icon"></i></a>
             <a class="user-menu__name">{{user}} <i class="dropdown-icon"></i></a>
 
 
             <div class="dropdown">
             <div class="dropdown">
-                <a href="rs/logout">Logout</a>
+                <a href="rs/logout">logout</a>
             </div>
             </div>
         </div>
         </div>
     </nav>
     </nav>

@@ -24,7 +24,7 @@
     var $log;
     var $log;
 
 
     // configuration
     // configuration
-    var mastHeight = 36,
+    var mastHeight = 48,
         padMobile = 16;
         padMobile = 16;
 
 
     var dialogId = 'app-dialog',
     var dialogId = 'app-dialog',

@@ -19,7 +19,7 @@
  */
  */
 
 
 html {
 html {
-    font-family: sans-serif;
+    font-family: 'Open Sans', sans-serif;
     -webkit-text-size-adjust: 100%;
     -webkit-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
     height: 100%;
     height: 100%;